Skip to content
Design for Accessibility (WCAG 2)
Design for Accessibility (WCAG 2)

Design for Accessibility (WCAG 2)

 
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 Lighthouse - Chrome Web Store
    Lighthouse - Chrome Web Store

    Lighthouse - Chrome Web Store

    Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

  • 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: WAVE Web Accessibility Evaluation Tools
    WAVE Web Accessibility Evaluation Tools

    WAVE Web Accessibility Evaluation Tools

    WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate about web accessibility.

  • More detail than Lighthouse, things like ‘un-useful information’ and ‘buttons too close’
 
W3C Validator - Assess raw HTML Semantics
 
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: WebAIM: Contrast Checker
WebAIM: Contrast Checker

WebAIM: Contrast Checker

Please enter a valid hex value (alpha value optional) or use the color picker.

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.