The Basics of Web Accessibility. Tips and tools to improve our websites… | by Anna Azzam | Feb, 2022

1. Make sure you’re using the right HTML tags

// Custom <div> with styling to look like a button
<div style={...} onClick={fn}/>
// Native HTML button
<button onClick={fn}/>

2. Use aria-labels

<button aria-label="Copy"><CopyIcon/></button>

3. Use ARIA landmark roles

role=”banner”
role=”navigation” (e.g. a menu)
role=”main” (the main content of the page)
role=”complementary” (e.g. a sidebar)
role=”contentinfo”
role=”search”
role=”form”
role=”application”

4. Hide decorative content

<img aria-hidden="true"/>

Rule 1: All functionality on a webpage should be operated through a keyboard

Rule 2: The active element needs to be visible

A common pattern is to only show the red outline in “keyboard mode”

Rule 3: Tab order should be logical

Using logically ordered HTML is a better approach than positive tab-indices

Rule 4: Avoid small touch targets

Rule 5: Everything on mobile should be able to be fulfilled with a simple gesture

Color Contrast

Color Contrast Analyser tool (CCA)

Color Vision Impairments

Some different types of color blindness
Use both color and symbols for error states

Zoom levels and font sizes

Building for Hearing Impairments

Videos should have captions for hearing-impaired users — YouTube example

Avoid duration-based tasks

Simple forms and autofill

autofill="off"
autofill="name"
autofill="email"
autofill="organization"
autofill="street-address"
autofill="country"
autofill="postal-code"
autofill="cc-number"
autofill="bday"
autofill="tel"

Ax

Ax React

Other tools and resources

Leave a Comment