Avatar

Implementation

• If you are using an SVG for the avatar, make sure it is accessible
  • See How to create accessible SVGs and reference the different SVG patterns
• If you are combining an avatar with another element, check accessibility guidelines for that element as well

Additional guidelines

• Ensure users can navigate to the avatar via screen reader
• Ensure the avatar image has alternative text
• Ensure keyboard users should not be able to interact with the avatar on its own via Tab and Shift+Tab

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

• SC 2.1.1 Keyboard (Level A)
• SC 2.1.3 Keyboard (No exception) (Level AAA)
• SC 2.4.3 Focus order (Level A)
• SC 2.5.5 Target size (Level AAA)

Related elements or patterns

• Badge
• Card
• Tag