What are we talking about?

At the most basic level, accessibility ensures that everyone, regardless of ability or disability, can access your web site or application.

The definition is more nuanced than that, though. The Web is fundamentally designed to work for all people. However, poorly designed and inaccessible applications lead to broad-scale exclusion. While the Web is designed to help people at scale, it also can harm people at scale.

Designers:

Accessibility should be integrated into design process, it is rarely ever done. Everyone benefits from readable text; text with concise sentences and widely-understood words. No one benefits from low contrast; everyone benefits from high contrast. Simple.

Designing with Accessibilty in mind

Things to consider when designing with accessibility in mind

Developers:

When it comes to the underlying HTML code, we’re in luck: it has already been designed, from the outset, to be inclusive. HTML is a toolkit for inclusion. Using the right elements for the job doesn’t just mean the few who use screen readers benefit, but keyboard accessibility comes out-of-the-box.

What I can do fast to improve?

1. Start early and check how bad the situation is (easy automatic check)

   WebAccessibility.com: Test Your Site for Accessibility

2. Manual testing: start from the simple → Web developer extension

   1. Check image description

      

      You can highlight images that have no alt attribute or display the value of alt attributes next to images.

   2. Disable all styles

      

      • Does the website work without CSS (in case it doesn’t load)?
      • Does the order of elements of your page make sense?
      • Are images and icons sized correctly?
      • Is your document well structured?

   3. Rendering (blurred vision, contrast) Chrome Dev Tools

      

      

      A perfect example are links, they should have underlines to easily differentiate them from normal text.

      P.S. prefers-reduced-motion for animations, zooming, and panning can be problematic for people who have vestibular disorders

   4. Use the keyboard

      tab key ➡️

      Put your mouse away and tab through the page and see if you can use every single part of the site without a mouse/touch pad.

      • Are focus styles clearly visible?
      • Can you navigate between headings?
      • Is everything focusable that should be?
      • Are your buttons real <button>s?
      • Is the overall UX using a keyboard great?
      • Are you managing focus correctly?
      • Do you hide and show elements correctly?
      • Does visual order match DOM order?
      • Can you use custom JS components without a mouse?

   5. Turn on VoiceOver and test your component without a mouse (repeat step 4)

      

   6. Color contrast of elements with VisBug

      

      

   7. Turn on Wave and check ARIA labels and others → Wave and → Axe

      • What the hell is ARIA?

        ARIA is a bunch of attributes that you can add to your elements to give them extra context and meaning

        <a
          href="/settings"
          id="user-dropdown-toggle"
          role="button"
          **aria-haspopup="true"**
        >
          <!-- Children Elements -->
        </a>
        

      Wave evaluation tool

      

      Axe helper

      

      8. Zoom in and zoom out 200%

      Good news

      Accessibility can never be perfect, but by thinking inclusively from planning, through prototyping to coding, you can reduce the time you spend on coding to minutes. It's never been easier before.

Checklist Vox Media

Accessibility Guidelines

A11y Project

Checklist

A11y Coffee