Ever wondered what it actually took to start making your current work accessible?
This guide highlights the actual important tools with realistic usages and instruction on what you need to worry about while you develop
Auditing Tools
Lighthouse - Automatic site audit
- Download from the chrome extension ‣
- Navigate to a site to test and run
- Also gives you info about SEO and general performance
VoiceOver - MacOs text-to-speech
- Turn it on in settings
- Hold command and press the power button 3 times to engage
- Press the X to stop
WAVE - Web Accessibility Evaluation Tool
- Paste a site to test here: ‣
- More detail than Lighthouse, things like ‘un-useful information’ and ‘buttons too close’
W3C Validator - Assess raw HTML Semantics
- Paste URL or paste HTML here: https://validator.w3.org/
Your Keyboard - Try navigating with the Tab, Shift+Tab and the Space Bar
Coding Accessibility Checklist
Specific HTML (Not just <div>)
Header
Footer
Nav
Article
Aside
Figure
Text (H1, H2, P etc)
Links =/= Button
- Buttons should perform an action on the current page
- Links should take users to other pages
Form
Label for every input (Even if not visible)
Avoid Placeholder (Learn more)
Avoid disabling buttons, tell users what’s wrong instead when clicked
Image Alt Tag (Describe what’s in the image) - Leave blank if image is decorative
Contrast, ensure a minimum WCAG AA ratio: ‣
Video Subtitles
ARIA - Use sparingly, meant for unclear interactions to tell screen readers what the element does
Why Be Accessible?
The importance of accessibility in web development cannot be overstated.
When we design websites that are accessible to people with disabilities, we're not just complying with legal requirements; we're creating a more inclusive digital landscape.
By following the guidelines outlined in the checklist, we ensure that our websites can be used by a wider range of people, including those with visual impairments, hearing impairments, motor disabilities, and cognitive impairments.
This not only benefits individuals but also has positive business implications.
Accessible websites are more likely to be found by search engines, leading to increased traffic and potential customers.
Additionally, a commitment to accessibility demonstrates a company's dedication to inclusivity and social responsibility, which can enhance its reputation and brand image.