Advanced Accessibility:
Deep Dive for Developers
Eric Eggert · AccessU 2018 ·
Eric Eggert
Web Accessibility Specialist @
Knowbility (Assessments, Teaching)
50% W3C Fellow → WAI/EOWG
The Accessibility Mindset
Being disabled is not as unusual as one might think. Due to chronic health conditions and older people having a higher risk of disability, we are also currently paving the cowpath to an internet that we can still use in the future.
The Accessibility Mindset
Accessibility has a very close relationship with usability, and advancements in accessibility often yield improvements in the usability of a website. Websites are also more adaptable to users’ needs when they are built in an accessible fashion.
North Star
Photo by Robson Hatsukami Morgan on Unsplash
In the time of table layouts, web developers could create code that passed validation rules but didn’t adhere to the underlying semantic HTML model. We later developed best practices, like using lists for navigation, and with HTML5 we started to wrap those lists in nav elements.
Working with accessibility standards is similar. The Web Content Accessibility Guidelines (WCAG) 2.0 can inform your decision to make websites accessible and can be used to test that you met the success criteria.
What it can’t do is measure how well you met them.
Semantics
What are Semantics?
Write good HTML!
What is good HTML?
Meaningful HTML!
The Basics
- Headings (
<h1>–<h6>) - Paragraphs (
<p>) - Lists (
<ul>,<ol>,<li>, and<dl>,<dt>,<dd>) - Images (
<img>,<svg>) - Tables (
<table>,<thead>,<tbody>,<tfoot>,<tr>,<td>)
(Un)Ordered Lists
<ul>
<li>Tomatoes</li>
<li>Potatoes</li>
</ul>
<ol>
<li>Cut Tomatoes</li>
<li>Cook Tomatoes</li>
</ol>
Description Lists
<dl>
<dt>Authors</dt>
<dd>John</dd>
<dd>Luke</dd>
<dt>Editor</dt>
<dd>Frank</dd>
</dl>
- Authors
- John
- Luke
- Editor
- Frank
Description Lists
<dl>
<dt lang="en-US"><dfn>color</dfn></dt>
<dt lang="en-GB"><dfn>colour</dfn></dt>
<dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>
- color
- colour
- A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.
Quotations
<p>The following is an excerpt from the
<cite>The Story of my Life</cite>
by Helen Keller</p>
<blockquote>
<p>Even in the days before my teacher came,
I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell,
would find the first violets and lilies.
There, too, after a fit of temper,
I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>
Quotations
<p>The following is an excerpt from the
<cite>The Story of my Life</cite>
by Helen Keller</p>
<blockquote cite="https://…">
<p>Even in the days before my teacher came,
I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell,
would find the first violets and lilies.
There, too, after a fit of temper,
I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>
Inline Quotations
They said <q>this is a sentence in English</q>.
Thes said <q lang="de">das ist ein Satz auf deutsch</q>.
Thes said <q lang="fr">qui est une phrase en français</q>.
Thes said <q lang="de-CH">das ist ein Satz auf deutsch</q>.
They said this is a sentence in English
.
Sie sagten das ist ein Satz auf deutsch
.
Thes said qui est une phrase en français
.
Thes said das ist ein Satz auf deutsch
.
Declaring the document language
<html lang="en">
- No need to use
xhtml:lang!
Think Bigger
Page Regions
- Page header (
<header>)* - Page footer (
<footer>)* - Navigation (
<nav>) - Main content (
<main>) - Search (
role="search")
*Only if not used in an <article> or <section>.
Labelling Regions
<nav aria-label="Main">…</nav>
…
<nav aria-labeledby="onthispage">
<h3 id="onthispage">On this page</h3>
…
</nav>
Page Structure Tutorial
WAI-ARIA
Accessible Rich
Internet Applications
WAI-ARIA
Accessible Rich
Internet Applications
To ARIA or not to ARIA?
5 Rules of ARIA (according to Notes on Using ARIA in HTML)
First Rule of ARIA use
If you can use a native HTML5 element or attribute with the semantics and behaviour 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.
Second Rule of ARIA use
Do not change native semantics, unless you really have to .
Example
<h1 role="button">heading button</h1>
<h1><button>heading button</button></h1>
Third Rule of ARIA use
All interactive ARIA controls must be usable with the keyboard.
Example
If using role=button the element must be able to receive focus and a user must be able to activate the action associated with the element using both the enter (on WIN OS) or return (MAC OS) and the space key.
Fourth Rule of ARIA use
Do not use role="presentation" or aria-hidden="true" on a visible focusable element.
Fifth Rule of ARIA use
All interactive elements must have an accessible name.
Styling
Styling tips
- Contrast at least 4.5:1 (WCAG also allows 3:1 for bold or large text – and not only for text! ↗️WCAG 2.1)
- Clickable areas should
- look clickable
- have a large enough size to accommodate touch input (min 44px each side ↗️WCAG 2.1)
- Be consistent across pages
- Use large fonts – 1rem (16px) is good, 1.125rem (18px) is even better
- Keep line-heights at about 1.5
Demo:
Navigation (+ARIA)
<nav aria-label="main">
<ul>
<li><a href="home.html">Home</a></li>
<li>
<a aria-current="true" href="#main">
Products
</a>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
Application Menus
Complex Widgets
Thank You
Eric Eggert
Knowbility, yatil.net, @yatil
https://slides.com/yatil/2018-accessu-advanced-a11y