Let's make the web more accessible together.
When we talk about accessibility in web development, a lot of people jump to the assumption that we mean making websites that blind people can use. While that is certainly part of it, that's really just one specific demographic of users. In fact, accessibility affects many different demographics, and it can be broken down to the simple concept:
Users should be able to access the contents of your website independent on their circumstances.
- Visual impairment relying on screen-readers and keyboard navigation
- Physical or mental impairments so the mouse cannot be used
- Color-blindness or fuzzy vision making it hard to read small text
- Technical limitations such as connectivity, screen size, or browsers
- Accessible sites means more users, which may have an impact your goals
- There's a growing number of web-accessibility-related lawsuits
- If you are a govenment funded institution, you HAVE to be accessible
- Accessible design patterns often encourage better development practices
- It's just the right thing to do
- Visually hidden content for screen readers.
- Toggle menu visibility with just the keyboard.
- Create a "skip to content" link.
- Image alt attribute.
- Accessible custom radio buttons.
- Accessible custom checkboxes.
- Accessible custom switch input.
- Mimic system-specific focus styles.
- Add another visually hidden class without focus state.
- Give plain text inputs accessible labels.
- Switch to using semantic markup.
- Make external links open in same tab.
- Things work with or without JavaScript.
Other considerations no covered here:
- Color contrast
- Font-size and legibility
Understanding the laws and guidelines:
- Section 508 of the Rehabilitation Act
- Title II of The Americans with Disabilities Act (ADA)
- The Web Content Accessibility Guidelines (WCAG)
Tools for testing/auditing your site:
- HTML_CodeSniffer - Webapage accessibility auditing bookmarklet
- aXe Developer Tools - Webapage accessibility auditing browser extension
- Chrome Lighthouse - Webapage accessibility auditing browser feature (Chrome)
- Tenon - Webpage accessibility auditing service
- WAVE - Webpage accessibility auditing service
- ChromeVox - Screen reader browser extension (Chrome)
- NoCoffee - Visual-impairment simulating browser extension
- Colorblind Web Page Filter - Colorblind simulating browser extension
Build tools:
- Access Lint – Automatically test your pull requests
- Colorsafe – Test font and color combinations
- Tanaguru contrast finder – Color contrast tester
- RANDOMA11Y – Random, high-contrast color combination