Accessibility

A11y (Web Accessibility) refers to best practices for keeping a website usable despite physical & technical restrictions. WCAG (Web Content Accessibility Guidelines) guidelines are categorized into 3 levels of conformance in order to meet the needs of different groups & different situations:

• ▪ AAA - most accessible
• ▪ AA
• ▪ A - least accessible

WCAG does not recommend aiming for AAA for entire sites because it is not possible for some content. In general, AA is aimed for.

Click Target Size

The recommended minimums for clickabled targets (buttons, links, ..):

• ▪ 44 x 44px for AAA rating.
• ▪ 24 x 24px for AA rating.
• ▪ 20 x 20px for AA rating only if:
  • ▫ the area is inline (such as a a link within a paragraph) or
  • ▫ there is is minimum 4px gap between adjacent clickable areas.

Tap Target Size

Although the WCAG doesn't mention a difference between click & tap targets (a target for a mouse pointer vs. a target on a touchscreen):

• ▪ Apple’s Human Interface Guidelines recommends a minimum of 44 x 44dp (density-independent pixels).
• ▪ Google’s Material Design suggests a minimum of 48 x 48dp. This will also be recommended in a Chrome Lighthouse test.

An element's click / tap target size can be increased without increasing how much space it takes up in the DOM.

Color

When it comes to colors, accessibility is based on contrast. For example, how different is the text color compared to the background color. The higher the contrast, the more accessible. Pika is an open-source colour app. Using a color picker, select a foreground & background color. It will display what level (less than AA, AA or AAA) that combination has.

Hiding Content

Browsers convert markup into an internal representation called the DOM tree. An accessibility tree is also created based on the DOM tree. This tree is used by assistive tools, like screen-readers, to communicate what is on a web page in different ways other than the default. Sometimes you need to hide elements in the DOM tree but show them in the accessibility tree (or vice-versa). For example, an image used as a background texture. This may look nice but not unnecessary for a screen-reader to identify this element to a blind user. The below table lists how to hide elements in both trees.

.hide { 
    display: none; 
}

<div class="hide">
    ...
</div>

<div aria-hidden="true"> 
    ...
</div>

<img
    alt=""
    src=".."
/>

.screenReaderOnly {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

<div class="screenReaderOnly">
    ...
</div>

• Source 1
• Source 2
• Source 3

Resources

Where to Next?

Notes
    
  │
  └── Web Dev
        
  │
  └── Web
            
YOU ARE HERE
            
  │
  ├── Accessibility
            
  │
  └── robots.txt