Easy Wins for Web Accessibility
Accessibility used to be something I’d overlook when building websites, but over time, I’ve come to see just how crucial it is. It’s not something we should skimp on. From my experience, I’ve put together a list of the basic things we should all be doing to make our web products user-friendly for everyone.
1. Use Semantic HTML
Semantic HTML is the backbone of an accessible web. By using HTML elements as they’re meant to be used, you make it easier for screen readers and other assistive tech to understand and navigate your site.
- Headings (h1-h6): Use headings to structure your content in a hierarchical way. Make sure there’s only one ### per page for the main topic, followed by ### , ### , and so on.
- Landmarks (header, nav, main, footer): Use these elements to define your page’s structure. This helps screen reader users navigate quickly to different sections.
2. Provide Text Alternatives for Images
Always give your images a descriptive alt attribute so users who can’t see them know what they’re about.
- Decorative Images: Use an empty ### alt=“” for purely decorative images to keep screen readers from announcing them.
- Informative Images: Provide a short description that conveys the image’s purpose or content.
3. Ensure Sufficient Color Contrast
Make sure text stands out against its background so users with visual impairments, including color blindness, can read it easily.
- Contrast Ratios: Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
- Tools: Check your color combinations with online tools like the WebAIM Contrast Checker.
4. Use Meaningful Link Text
Links should have clear, descriptive text so users understand their purpose without needing extra context.
- Avoid “Click Here”: Instead of saying “Click here,” use text that describes the link’s destination, like “Read our accessibility guide.”
5. Ensure Keyboard Accessibility
All interactive elements (e.g., links, buttons, form controls) should be usable via keyboard for users who can’t use a mouse.
- Tab Order: Ensure a logical tab order that follows the visual layout of the page.
- Focus Styles: Make sure interactive elements have visible focus indicators so keyboard users can see which element is currently selected.
6. Label Form Elements Properly
Form controls should have labels that clearly describe their purpose.
- Labels: Use the ### element to associate labels with their corresponding form controls using the ### for attribute.
- Placeholders: Don’t rely only on placeholder text since it can disappear when users start typing and may not be read by screen readers.
7. Use ARIA Landmarks and Roles
ARIA (Accessible Rich Internet Applications) landmarks and roles can enhance accessibility by providing extra context to screen readers.
- Landmarks: Use ARIA landmarks (### role=“banner” , ### role=“navigation” , ### role=“main” , etc.) to define key areas of your page.
- Roles: Apply ARIA roles (### role=“button” , ### role=“alert” , etc.) to complex interactive elements that don’t have a semantic HTML equivalent.
Want to Go Further? Try These:
1. Test with Screen Readers
Regularly test your site or app with popular screen readers to make sure it’s navigable and understandable for users who rely on them.
- Tools: Use screen readers like NVDA (Windows), VoiceOver (macOS and iOS), and TalkBack (Android) to perform your tests.
2. Provide Captions and Transcripts for Media
Videos and audio content should have captions and transcripts to make them accessible to users who are deaf or hard of hearing.
- Captions: Provide synchronized captions for video content.
- Transcripts: Offer text transcripts for audio-only content.
3. Name Visual Icons
This one’s a bit tricky at first, but once you implement it, it gets easier.
- Josh Comeau has a great example of how to do this. Check out his article on implementing a ### VisuallyHidden component.
4. Stay Informed and Updated
Accessibility is an ongoing effort. Keep up with the latest accessibility standards and best practices.
- Resources: Follow organizations like W3C Web Accessibility Initiative (WAI) and WebAIM for the latest guidelines and resources.