Designing & Developing for Accessibility

Eric Eggert – OsloMet – 4&5 December 2018

Eric Eggert

  • Web Developer & Trainer

  • 2005–2010 Freelancer

  • 2011+ Co-Founder @ outline

  • 2013–2016 Web Accessibility Specialist @ W3C/WAI

  • 2016+ 50/50 Web Accessibility Specialist @ Knowbility & W3C/WAI Fellow

Basics

​Who Invented

the Internet?

And Why?

Web Standards

WWW Standards Bodies

  • W3C: 
    World Wide Web Consortium

  • WHATWG: 
    Web Hypertext Application Technology Working Group

  • Ecma International: 
    née European Computer Manufacturers Association

  • ISO: 
    International Organization for Standardization

Technologies

CSS

HTML

JS

HyperText

Markup

Language

Cascading

Style Sheets

JavaScript

Content & Structure

Visual Look

Behavior

CSS

HTML

JS

Images

Videos

ARIA

Re-

spon-

sive

CSS

HTML

JS

Images

Videos

ARIA

Re-

spon-

sive

Accessibility

HTML5

  • HTML5 developed by WHATWG as an alternative to W3C’s XHTML2

  • Today: Development in parallel in WHATWG („Living Standard“) and in the HTML Working Group of W3C („Snapshots“)

  • Discussion over the direction of the specification

  • Serious differences, including the addition of a Image Description Extension in the W3C version

<h1 class="fancy">This is a heading</h1>

CSS

  • W3C’s CSS Working group is working on a dozen modules.

  • Things we got recently

    • Grids

    • Flexbox

    • Masking

    • (Web)Fonts

    • Animations

    • Transforms

    • Transitions

    • …

.fancy { font-family: fantasy; }

ECMA Script (JavaScript)

  • In the beginning just for client-side use cases

  • Now a universal programming language

  • Also on the server using node.js

document.querySelector('body').style.backgroundColor =
	'rebeccapurple';

W3C Process

  • WD: Working Draft

  • CR: Candidate Recommendation

  • PR: Proposed Recommendation

  • REC: Recommendation

First WD WD CR PR REC

WCAG

(But you know that already 😄)

Technically accessible does not necessarily mean usable by

people with disabilities.

Embrace the web medium

The control which designers know in the print medium, and often desire in the web medium, is simply […] the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.

 

 

— John Allsopp

A List Apart: A Dao of Web Design

Facets of the same experience

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

 

 

— Ethan Marcotte

A List Apart: Responsive Web Design

HTML

<p class="intro">
  Welcome to Lorem Ipsum Inc. Please browse our 
  website and find the latest <a href="/news/">News</a>!
</p>

Element

<p class="intro">
  Welcome to Lorem Ipsum Inc. Please browse our 
  website and find the latest <a href="/news/">News</a>!
</p>

Start Tag

End Tag

<p class="intro">
  Welcome to Lorem Ipsum Inc. Please browse our 
  website and find the latest <a href="/news/">News</a>!
</p>

Attribute

Value

<p class="intro">
  Welcome to Lorem Ipsum Inc. Please browse our 
  website and find the latest <a href="/news/">News</a>!
</p>

A nested Element

<img src="/logo.svg" alt="Lorem Ipsum Inc.">

Self-Closing Element

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>)
  • Complimentary content (<aside>)
  • 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>

A simple content page

Page Structure Tutorial

w3.org/WAI/tutorials/page-structure

CSS

Use for…

  • Layout (Flexbox, Grids)
  • Text (Font, Color, Spacing)
  • Responsiveness (Media Queries)
  • Shadows
  • Transparency
  • Background Colors and Images
  • Transforms & Animations

Styling a simple content page

JavaScript

A Programming Language
for the Web

C++-like Syntax

CSS

HTML

JS

Images

Videos

ARIA

Re-

spon-

sive

DOM

DOM

Document
Object
Model

= A representation of the HTML with applied CSS/JS that can be manipulated with JavaScript

Huh?

Example

Assistive Technologies (such as Screen Readers) also work with this DOM.

For example:

<div hidden>Text</div>

<div style="display: none;"></div>

… are not available to assistive technology because it is hidden for everyone in the DOM.

Plus:
Design Considerations

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.

North Star

Photo by Robson Hatsukami Morgan on Unsplash

Forms

End for Today!

Made with Slides.com