Real Talk

It is critical we do this right

WCAG

Web Content Accessibility Guidelines

The official guidelines published by the W3C on how to make the web accessible.

Web AIM's WCAG Checklist

P.O.U.R

Perceivable

Available to the senses either through the browser or through assistive technologies.

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 and devices can access the content.

Types of Disabilities

How does assistive tech work with websites?

The browser scans the HTML code and creates both the DOM and the Accessibility Tree.

Accessibility Tree

A tree representation of the webpage that contains all meta-data about every page element.

What Assistive Tech Sees from the Tree

WAI-ARIA

Powerful tool that allows the developer to directly modify the accessibility tree.

Number 1 Rule for using ARIA

No ARIA is better than Bad ARIA

ARIA can modify an element's state, role, and properties, so using ARIA incorrectly misrepresents an element on a page.

Example: Imagine a paragraph tag was styled to look like an input.

Strategies for Building Accessible Page Elements

Use native HTML elements whenever possible

Code Example - Custom Button vs Native Button

Consult the WAI-ARIA Authoring Practices first when you need to create a custom element

Use Property Selectors Over Classes In CSS

It eliminates bloat from your HTML and clarifies your CSS.

// Semantic Selectors
input:invalid,
[aria-invalid] {
	border: 4px dotted #f64100;
}
								

// BEM Styled Class Selectors
input.input__invalid {
	border: 4px dotted #f64100;
}
							

Add Visually Hidden Markup

A lot of information is understood visually via context.

Additional markup can be used to bridge that gap

Code Example - Hidden Headings

Testing for Accessibility

Types of Testing

Automatic

Manual

Accessibility Insights By Microsoft

Demo