What common accessibility issues affect user experience?

1 Keyboard accessibility

Some users rely on keyboards or keyboard-like devices to access websites and apps, either because they have physical or cognitive impairments, or because they prefer the efficiency and convenience of keyboard shortcuts. However, some websites and apps do not support keyboard navigation, or have inconsistent or confusing keyboard focus indicators, tab orders, or shortcuts. This can make it difficult or impossible for these users to access the content and functionality they need. To ensure keyboard accessibility, you should follow the Web Content Accessibility Guidelines (WCAG) recommendations, such as providing a logical tab order, a visible focus indicator, a skip link, and keyboard alternatives for mouse actions.

3 Text alternatives

Text alternatives are textual descriptions of non-text content, such as images, audio, video, charts, diagrams, and animations. They provide equivalent information for users who cannot see or hear the content, or who use assistive technologies like screen readers or braille displays. They also help with search engine optimization and content reuse. To provide text alternatives, you should use the alt attribute for images, the transcript or caption for audio and video, and the figure and figcaption elements for other types of non-text content. You should also write clear and concise text alternatives that convey the purpose and meaning of the content.

4 Headings and landmarks

Headings and landmarks are structural elements that help users understand and navigate the hierarchy and layout of your content and interface. Headings are titles or labels that indicate the topic or purpose of a section of content, while landmarks are regions or roles that indicate the function or purpose of a section of the interface, such as navigation, main, banner, or search. They help users with visual impairments, cognitive impairments, or limited attention span to scan and skip the content and interface according to their needs and preferences. To use headings and landmarks, you should follow the HTML semantic markup rules, such as using h1-h6 elements for headings, and using aria landmarks or HTML5 elements for landmarks.

5 Forms and labels

Forms and labels are interactive elements that allow users to input and submit information, such as names, emails, passwords, preferences, or feedback. They are essential for many websites and apps, but they can also pose accessibility challenges for users with visual impairments, motor impairments, or cognitive impairments. For example, some forms and labels may have unclear instructions, insufficient feedback, inadequate error handling, or inaccessible validation. To ensure forms and labels accessibility, you should follow the WCAG recommendations, such as providing clear and visible labels, using fieldset and legend elements for grouped inputs, using aria attributes for complex inputs, and providing helpful error messages and suggestions.

6 Multimedia and animation

Multimedia and animation are dynamic elements that can enhance the engagement and interactivity of your content and interface, such as videos, podcasts, slideshows, or carousels. However, they can also create accessibility barriers for users with hearing impairments, visual impairments, seizure disorders, or cognitive impairments. For example, some multimedia and animation may have no captions, audio descriptions, or text alternatives, or they may have autoplay, flashing, or scrolling effects that can distract or harm the users. To ensure multimedia and animation accessibility, you should follow the WCAG recommendations, such as providing captions, audio descriptions, and text alternatives for multimedia, providing controls and options for animation, and avoiding flashing or strobing effects that can cause seizures.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?