What is (web) accessibility

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.

Web Content Accessibility Guidelines (WCAG)

 

The POUR principles

Perceivable

 

Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)

Operable

 

Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.

Understandable

 

Content is clear and limits confusion and ambiguity.

Robust

 

A wide range of technologies (including old and new user agents and assistive technologies) can access the content.

Principles of Accessible
UI (design)

Do not rely on color alone
to convey meaning

Ensure users can complete and submit all forms

Demo #1

Demo #2

Ensure links make sense out of context

Demo

Provide appropriate document structure

Demo

What is ARIA

ARIA isn't for making HTML accessible. It's for making inaccessible HTML accessible.

5 rules of ARIA use

 

1. If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.== Demo ==
2. Do not change native semantics, unless you really have to. == Demo ==
3. All interactive ARIA controls must be usable with the keyboard. == Demo ==
4. Do not use role="presentation" or aria-hidden="true" on a visible focusable element . == Demo ==
5. All interactive elements must have an accessible name. == Demo==

Use ARIA to
progressively enhance

 

• Specific states (aria-expanded, etc.)
• Relationships
• Live regions

 

Demo