Photo by Keisuke Higashio on Unsplash

Accessibility (A11Y)

What is A11Y?

“The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cogn ()itive ability.” (W3C — Accessibility)

Accessibility (often abbreviated to A11y — as in “a” then 11 characters then “y”) in Web development means enabling as many people as possible to use Web sites, even when those people’s abilities are limited in some way.

Why is A11Y essential ?

1. It enables social inclusion for for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries
2. There is also a business use case :

• Drive Innovation: Accessibility features in products and services often solve unanticipated problems.
• Enhance Your Brand: Diversity and inclusion efforts so important to business success are accelerated with a clear, well-integrated accessibility commitment.
• Extend Market Reach: The global market of people with disabilities is over 1 billion people with a spending power of more than $6 trillion. Accessibility often improves the online experience for all users.
• Minimize Legal Risk: Many countries have laws requiring digital accessibility, and the issue is of increased legal concern.

A11y Conformance/Success Criteria Levels:

• Level A is the minimum level. — some impact on design [25 criteria]
• Level AA includes all Level A and AA requirements. Many organizations strive to meet Level AA. — medium impact on design [ 25+13 criteria]
• Level AAA includes all Level A, AA, and AAA requirements. — high / extreme impact on design [25+13+23 criteria]

For example, let’s take guideline 1.4 (Distinguishable), which is about making it easier for users to see and hear content including separating foreground from background.

• Success Criterion 1.4.1 is about the Use of Color. The rule goes like this: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
• Success Criterion 1.4.3 is about Contrast (Minimum). The rule goes like this: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
• And finally, success criterion 1.4.6 is about Contrast (Enhanced). And the rule goes like this: The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

As you can see, the more higher we get, the more demanding it becomes and the more pressure it put on how things can be presented in the web page.

As a rule of thumb, success criteria from level A should be invisible or barely noticeable to the interface. On the other hand, level AAA will have such a high impact on design, that even the W3C claims that most organizations will not be able to achieve that level (as the compromises on design will be too important):

Why WCAG made 3 level "A", "AA" and "AAA" ? (The different levels of 'grade' a website based on…

A11Y can be split into 4 broad categories of disabilities:

Vision

Vision impairments range from limited or low vision to complete blindness. Users with low vision may use a combination of screen magnification, high contrast themes, and text-to-speech to access content. Some users may rely on a screen reader or braille display to navigate a page, perform actions, and read descriptions of content and controls.

Motor/dexterity

Motor and dexterity impairments may affect a user’s ability to use a mouse, touchscreen, or other pointing device. Some users may rely on alternative input devices to access content. These devices might include a keyboard, head- or eye-tracking software, switch devices, sip-and-puff devices, or voice access.

Auditory

Auditory impairments range from difficulty hearing certain frequencies, to speech processing issues, to a total inability to hear sound. Users experiencing an auditory impairment may rely on captions or transcripts to provide an alternative to sound in an interface.

Cognitive

Cognitive impairment is a broad category, encompassing topics such as ADHD, dyslexia, and autism, just to name a few. The accommodations for these users are quite diverse, but generally speaking, users may seek to minimize distractions, flashing, heavy animations, and anything which shifts the user’s context around the page in an unexpected way. Users may also use custom colors.

A11Y is only for disabled people ?

Web accessibility also benefits people without disabilities, for example:

• people using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
• older people with changing abilities due to ageing
• people with “temporary disabilities” such as a broken arm or lost glasses
• people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
• people using a slow Internet connection, or who have limited or expensive bandwidth

Achieving Accessibility

Keyboard support

Focus and the tab order

Forward Direction : TAB

Backward Direction: SHIFT + TAB

Manipulate: ENTER and SPACE

Arrange elements in the DOM to be in logical order

• Logical tab order

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

• Illogical tab order

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

• Correctly set the visibility of offscreen content that should not receive focus
• display: none
• visibility: hidden

Using Semantic element:

A common accessibility anti-pattern is to treat a non-interactive element, like a div or a span, as a button by adding a click handler to it.

But to be considered accessible, a button should:

• Be focusable via the keyboard
• Support being disabled
• Support the ENTER or SPACE keys to perform an action
• Be announced properly by a screen reader

Control focus with tabindex

• Insert an element into the natural tab order using tabindex="0"

<div tabindex="0">Focus me with the TAB key</div>

• Remove an element from the tab order using tabindex="-1"

<button tabindex="-1">Can't reach me with the TAB key!</button>

Style Focus

The focus indicator (often signified by a “focus ring”) identifies the currently focused element on your page. For users who are unable to use a mouse, this indicator is extremely important because it acts as a stand-in for their mouse-pointer.

Default focus style across browsers

The default focus style is not consistent across browsers

button:focus {  
  outline: 4px dashed orange;  
}

Designing a focus style

Screen Readers

Semantic Elements

• Native HTML elements Provides keyboard support by default

The easiest way of conveying proper semantics is to use semantically rich HTML elements.

Using CSS, it’s possible to style the <div> and <button> elements so they convey the same visual affordances, but the two experiences are very different when using a screen reader. A <div> is just a generic grouping element, so a screen reader only announces the text content of the <div>. The <button> is announced as a "button," a much stronger signal to the user that it's something they can interact with.

The simplest and often best solution to this problem is to avoid custom interactive controls altogether. For example, replace a <div> that's acting like a button with an actual <button>

Use landmarks to aid navigation

HTML5 elements such as main, nav, and aside act as landmarks, or special regions on the page to which a screen reader can jump.

Bypass repetitive content with skip links

Use a skip link to let users bypass this content.

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

Include text alternatives for images

An img should always be accompanied by an alt attribute to give the image its accessible name. If the image fails to load, the alt text is used as a placeholder so users have a sense of what the image was trying to convey.

• Image as Link

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

• Image as input

<input type="image" alt="Sign in" src="./sign-in-button.png">

Label documents and frames

Every page should have a title element that briefly explains what the page is about. The title element gives the page its accessible name. When a screen reader enters the page, this is the first text that is announced.

• Page Title

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

• Iframe Title

<input type="image" alt="Sign in" src="./sign-in-button.png">

Label buttons and links

• Buttons part of form

<button>Book Room</button>

• Icons Buttons

aria-label overrides any text content inside the button, letting you clearly describe the action to anyone using a screen reader.

<button aria-label="Left align"></button>

• Links

Adding more meaningful content inside link text.

Check out <a href="/guide">our guide to web performance</a>.

Label form elements

• Place the input element inside of a label element

<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>

• Or use the label’s for attribute and refer to the element's id

<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Accessible tap targets

• When content is displayed on a mobile device, it should be ensured that the elements are properly spaced out .
• This ensures accidentally pressing other elements.
• Especially important for those with motor impairment skills.
• A person’s finger pad area is 9mm or (48x48 pixels)
• This is the minimum recommended touch target size.
• Touch targets should be spaces out 8 pixels apart horizontally and vertically.

Color and contrast

• Some color combinations are difficult or impossible for people to read.
• This is called contrast which is the difference between foreground and background colors’ luminance.
• If colors are same the contract is low
• If colors are different contrast is high

Difference of color contrast.

• Only colors should not be used to convey information. First image shows error message with red line and second image is shown with error message.

• This is show the above screen looks for a color blind person

Response Design

Use the viewport meta tag

“The viewport defines the area of the screen that the browser can render the content to.”

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width will match the screen’s width in device-independent pixels
• initial-scale=1 means having a 1:1 mapping between CSS pixels and device-independent pixels
• Allow users to zoom by not setting maximum-scale=1 or user-scaleable=no
• Use flexible grid for designing to support all screen sizes
• Use relative units (em,rem) for text sizes instead of pixels

Tools — Screen Reader

ChromeVox (Free chrome extension):

ChromeVox Classic Extension

To disable/enable the plugin, the shortcut is SHIFT-ALT-A-A

Lighthouse | Tools for Web Developers | Google Developers

References

Demystifying WAI-ARIA, 18 ARIA attributes that every web developer should know

web.dev