Advanced
Accessibility:
Deep Dive for Developers

Eric Eggert · AccessU 2017 ·

Eric Eggert

Web Accessibility Specialist @

Knowbility (Assessments, Teaching)

50% W3C Fellow → WAI/EOWG

The Accessibility Mindset

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.

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

w3.org/WAI/tutorials/page-structure

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>

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!)
  • Clickable areas should
    • look clickable
    • have a large enough size to accommodate touch input (min 44–48px each side)
  • 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

Demo:

Navigation (+ARIA)

<nav 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

Application Menus

In Practice

Carousel

Thank You

Eric Eggert

Knowbility, yatil.net, @yatil

 

https://slides.com/yatil/2017-accessu-advanced-a11y

Made with Slides.com