Dylan Sheffer

@DylanSheffer
DylanSheffer
DylanSheffer

Everyday Accessibility

The motivation behind this talk is to give developers the background and resources needed to create inclusive websites and applications.

Overview

What accessibility is and why it is important
Foundational knowledge
How assistive tech interprets a website
Strategies for creating accessible page elements
Basic Testing Methods

What is Accessibility?

Making your site usable by everybody regardless of ability.

Increase
Customer Pool

No Lawsuits

Better UX

Making your site usable for everyone has many benefits outside of creating a more inclusive experience.
There are also...

financial benefits from increasing potential customer base
removes the possibility of a lawsuit for discriminatory practices
increases the overall usability of your site

Real Talk

Before I go any further, I wanted to talk about why it's critical we get accessibility right.

It is critical we do this right

A11y isn't something we can debate about doing like using the latest javascript framework or using a new programming pattern.
It is all of our responsibility, as developers, that we ensure the preservation of a fundamental human right. The access to information and self expression.
Remember that all of us are only an accident or a few years of age from needing assistive technology in order live an independent lifestyle.
So it's in all of our best interest to create an inclusive infrastructure for our increasingly digital lives.

WCAG

Web Content Accessibility Guidelines

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

Web AIM's WCAG Checklist

The WCAG is a dense read and I think it's one of the reasons why developers are intimidated by accessibility.

If you're struggling understanding what the WCAG is saying checkout the website webaim.org. It has a more digestible checklist of the WCAG.

... The main idea of the WCAG is that we need to make our websites P.O.U.R

P.O.U.R

Perceivable

Operable

Understandable

Robust

Perceivable

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

Mainly through vision and hearing. Assistive technologies include screen readers, screen enlargers, audio captions, 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.

This includes using explicit language for dialog actions, using simple language for content, and to not completely rely on metaphors like icons and changing colors for information.

Robust

A wide range of technologies and devices can access the content.

Our sites need to be robust enough to be used in various contexts such as screen readers, screen enlargers, switches, etc.

If you can verify that your site is P.O.U.R, then you likely don't have an accessibility issue.

Types of Disabilities

Motor

Visual

Auditory

Cognitive

Neurological

Temporary

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.

Assistive tech reads the Accessibility Tree from top to bottom. This means that the order of content in your document matters a lot to assistive technology.

What Assistive Tech Sees from the Tree

Name

State

Role

Value

WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications

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

HTML is accessible by default and will have the proper semantics.

Code Example - Custom Button vs Native Button

https://codepen.io/dylansheffer/pen/qBWPGXG

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

W3C's guide on ARIA authoring

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

https://www.dylansheffer.com/projects/dylansheffer.com/

Testing for Accessibility

Types of Testing

Automatic

Manual

Accessibility Insights By Microsoft

Demo

Thank You!

Questions⁉

Tools and Resources

Heydon Pickering- Inclusive Components
Laura Kalbag- Accessibility For Everyone
WebAIM - Excellent Guides and Articles
Excellent Tools, webinars, guides, podcasts, etc
A11y Cast with Rob Dodson
Google Developer Accessibility Docs
OATMEAL - EBay's Open Accessibility Guidelines
A11y Project - Beginners Checklist
aXe Accessibility Audit Plugin
HTML Code Sniffer
Part of a Whole Blog
Reach - Accessible React Components
Bulb Audit - Open Sourced Professional A11y Audit
Color Safe - A11y Color Pallet Generator
18f - A11y Guide
Color Blindness Simulator for Chrome

Dylan Sheffer @DylanSheffer DylanSheffer DylanSheffer