Web Accessibility

An Introduction

The Basics

Accessibility (aka a11y) is the practice of making a user interface usable by as many people as possible.

Accessible content and applications give all users equal opportunity, regardless of impairment, disability, or circumstance.

What's Covered

I. Types of Disabilities

II. Semantic Content

III. WCAG Standards

IV. ARIA Attributes

V. Screen Readers

Text

Types of Disabilities

WCAG

Web Content Accessibility Guidelines is a set of standards against which content can be measured for accessibility.

It features three conformance levels:

A (basic compliance)
AA (moderately stringent)

AAA (most stringent)

Quick Reference

ARIA

Accessible Rich Internet Applications is a specification that allows for additional HTML attributes, in order to enhance accessibility.

<p role='alert'>A boil water advisory is in effect for the planet Earth (Sol System).</p>

<!-- ... -->

<div role='tablist'>
  <button role='tab' type='button' aria-controls='panel-1' aria-selected='true'>Tab 1</button>
  <button role='tab' type='button' aria-controls='panel-2'>Tab 2</button>
  <button role='tab' type='button' aria-controls='panel-3'>Tab 3</button>
</div>

<!-- ... -->

<button aria-describedby='warning' type='submit'>Submit</button>
<p id='warning'>Note that once you submit this form, it's goin' down.</div>