Written by: Frontend Study Group, 3/4/24

The Prompt: How should I approach answering live technical questions about frontend development that are more focused on general knowledge rather than specific problem-solving?

The Question We Chose To Answer:

How can I make my app more accessible? 

• Use semantic HTML elements (e.g., <header>, <nav>, <main>, <footer>) to provide structure and meaning to your content.

  • Use headings (<h1>, <h2>, etc.) to organize content hierarchically and make it easier to navigate for screen reader users.

• Ensure proper use of ARIA (Accessible Rich Internet Applications) attributes when necessary to enhance accessibility for screen reader users.

  • Implement ARIA patterns as recommended by W3C to ensure interactive components are accessible (e.g., use role="button" for custom buttons, role="alert" for important messages).

  • Use ARIA landmark roles

• Implement keyboard navigation by ensuring all interactive elements are focusable and can be operated using the keyboard.

• Provide alternative text for images using the alt attribute to describe the content and function of the images for screen reader users.

  • Ensure alt text is descriptive and meaningful for each image.

• Ensure sufficient color contrast between text and background to assist users with visual impairments.

• Provide labels for form elements to ensure screen reader users can understand the purpose of each input field.

  • Use aria-label or aria-labeled by to provide accessible labels for elements that lack visible text labels.

• Avoid using auto-playing media or provide controls to pause, stop, or adjust the volume of any audio or video elements.

• Test your web app with accessibility tools (e.g., screen readers, and browser extensions like Axe or Lighthouse) to identify and fix accessibility issues.

  • Test with system screen readers like Narrator (Windows), VoiceOver (Mac), and NVDA (free, open-source screen reader for Windows) to ensure compatibility and usability.

• Keep your UI consistent and predictable to help users with cognitive disabilities navigate and understand your app.

• Offer alternatives for time-based media, such as transcripts for audio or captions for videos, to ensure content is accessible to users with hearing impairments.

• Ensure that error messages are clear, descriptive, and accessible to assist users in correcting mistakes in forms or other interactions.

• Provide skip links to allow users to bypass repetitive content, such as navigation menus, and quickly access the main content.

• Consider the needs of users with various disabilities (visual, auditory, motor, and cognitive) throughout the design and development process to create an inclusive experience.

• Offer the option for users to select accessibility settings when they first visit the site, so they don't have to navigate to settings to make adjustments.

• Captions on video, also starting videos without sound for people who are sound-sensitive

• Hiding navigation under a hamburger can be difficult for users as well, hiding under a button generally is worse for accessibility. Smart labeling of buttons is better 

• Lots to consider for data visualization, if there are charts and graphs, make sure the colors contrast enough 

• give a dark option for the website if possible, and have your app pull from whatever their default is in their system 

• 3rd party auditors for accessibility who will get real-world people to test your app