New Zealand Government Web A11y Training 2016

Jason Kiss
Senior Advisor, Digital Engagement

Department of Internal Affairs - Te Tari Taiwhenua
Image source

Web accessibility

What is it?

Image source

Inclusive design

A broad range of people use the web.

Accessibility / inclusive design benefit all of them
(and all of us)

Image source

Sensory

Vision Impairments

  • Blindness
  • Low Vision
  • Color Blindness
Image source

Sensory

Hearing Impairments

  • Deafness
  • Hard of hearing
  • Tinnitus
Image source

Physical

Diminished motor control

  • Arthritis
  • Cerebral Palsy
  • Multiple Sclerosis (MS)
  • Parkinson’s Disease
  • Muscular Dystrophy (MD)
  • Paralysis
Image source

Cognitive / Neurological

  • ADD/ADHD
  • Autism
  • Down syndrome
  • Dyslexia
  • Dyscalculia
  • Learning Disabilities
  • Memory Loss
  • Photo-sensitive epilepsy
  • Traumatic Brain Injury
Image source
Image source

Other

  • Repetitive Stress Injury
  • Carpal Tunnel Syndrome
  • Fatigue, lack of sleep
  • Temporary injury

Percentage of people with disability, 2013

0–14 yrs 15–44 yrs 45–64 yrs 65+ yrs Total
11% 16% 28% 59% 24%
2013 Disability Survey, Statistics NZ

In 25 years, between 22–25% of New Zealanders will be 65+ years old or older.

National Population Projections: 2014(base)–2068
Statistics NZ

But, not just disabilities...

Cultural, linguistic, and generational differences...

Collage of photos of individuals from all over the world. Image source
Photo of a VCR machine. Image source

Different devices...

Photo of two feature phones and an iPad. Image source
3Com US Robotics 56K modem. Image source
An old desktop monitor showing WinXP wallpaper, with joystick, keyboard, and printer. Image source

Different browsers...

Logos for Chrome, Firefox, Opera, Safari, and Internet Explorer. Image source

Different environments...

A man texting while seated behind wheel of car. Image source
Fans at a rock concert. Image source
People hanging on to railing in a crowded bus. Image source
People in a large theatre hall. Image source

Assistive technologies

Keyboards

Close up of left hand on a Mac keyboard. Image source

Large print keyboards

Large print keyboard with yellow keys on black body. Image source

One-handed keyboards

Maltron one-handed keyboard for the right hand. Image source

Mice and trackballs

Large Kensington trackball. Image source
EZ Minicute vertical mouse. Image source

Headwands

Straight headwand strapped to a styrofoam head for display. Image source
Articulated headwand with head brace. Image source
Man with curved headwand typing at keyboard in front of monitor. Image source
Man with short headwand using onscreen keyboard on iPad. Image source

Mouthsticks

Mouthstick being used to type on iPad. Image source
Man using short mouthstick on special keyboard for mouthsticks. Image source
4 mouthsticks. Image source

Button switches

Red AMDI moon switch. Image source
Blue AMDI moon switch on articultated mounting brace. Image source

Sip and puff switches

Man using sip and puff switch with onscreen keyboard. Image source
Girl with sip and puff switch. Image source

Eye blink switch

Close up of fibre optic eye blink switch next to woman's eye. Image source

Proximity switch

Hand hovering over an Ablenet Candy Corn proximitiy switch. Image source

Switch scanning

Animated gif of scanning software selecting letter on SwithXS onscreen keyboard. Image source

Speech/voice recognition

Cortana logo. Image source
VoiceOver logo. Image source

Screen readers

JAWS for Windows banner image. Image source
Window-Eyes banner image. Image source
NVAccess logo. Image source
VoiceOver logo. Image source
Orca logo. Image source

Screen magnifiers

Screen magnifier in Mac OS. Image source
Screen magnifier in Windows 8. Image source

Braille displays

Braille Memo BM46 40 cell Braille display. Image source
Humanware Braille Notetaker. Image source

Affordable Braille display

Neil Jarvis from the RNZFB holding the new, affordable Orbit Braille display. Image source

Why should we care?

Image source
NZ coat of arms

NZ Human Rights Act 1993

Prohibits discrimination in the provision of goods and services on the basis of disability

United Nations

UN Convention on the Rights of Persons with Disabilities (Article 9)

2. States Parties shall also take appropriate measures:
a) To develop, promulgate and monitor...the accessibility of facilities and services open or provided to the public;
....
g) To promote access for persons with disabilities to new information and communications technologies and systems, including the Internet;

Litigation

Image source

Australia

SOCOG (2000)

Canada

Jodhan v.
Govt of Canada (2010)

United States

...

Print of an orange carrot on white paper. Image source
New Zealand Stock Exchange, Wellington. Image source

Empower and Enable Individuals

  • reading and learning
  • playing
  • working
  • shopping
  • communicating with friends and family
  • participating in community

Empower and Enable
Community and Society

Inclusion:

  • helps society increase its potential
  • increases cooperation, creativity, productivity
  • enables greater civic and political participation
  • spurs innovation

Empower and enable
design

Constraints are fundamental to
design and all creative work.

Horton typewriter, circa 1887. Image source
Black and white engraving of an old telephone. Image source
Oxo Good Grips swivel peeler with large, black rubber handle. Image source
Vint Cerf, inventor of the Internet. Image source
Curb cuts with red street Braille at an intersection. Image source

How?
What's required?

Open Web Platform

World Wide Web Consortium

  • HTML
  • CSS
  • SVG
  • ARIA
  • WOFF
  • XML
  • RDFa
  • more…

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

– Tim Berners-Lee

Web Content Accessibility Guidelines (WCAG) 2.0

  • Perceivable
  • Operable
  • Understandable
  • Robust

How to meet WCAG 2.0

Customisable quick reference to WCAG 2.0.

Screenshot of 'How to Meet WCAG 2.0' web page.

Use best practices

  • Progressive enhancement
  • Responsive web design
  • "Mobile-first"

If you do one thing...

Make sure it works with keyboard only!

NZ Government
Web Accessibility Standard

WCAG 2.0 Level-AA compliance

Screenshot of NZ Government Web Accessibility Standard web page.

2014 Web Standards Self-Assessments

Top 10 accessibility issues

  1. WCAG 1.3.1 Info and relationships
  2. WCAG 1.1.1 Non-text content
  3. WCAG 1.4.3 Contrast (minimum)
  4. WCAG 4.1.2 Name, role, value
  5. WCAG 2.4 7 Focus visible
  6. WCAG 4.1.1 Parsing
  7. WCAG 1.4.1 Use of color
  8. WCAG 2.4.4 Link purpose (In context)
  9. WCAG 2.1.1 Keyboard
  10. WCAG 1.4.5 Images of text

Future workshops

We'll be focussing on these top accessibility issues.

But what do *you* want to learn?

Email us: web.standards@dia.govt.nz

How is web content made accessible?

Answer #1: Well-written content

WCAG SC 1.1.1 Non-text content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

WCAG SC 2.4.4 Link purpose (In context)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context.

Programmatically determined link context

Example


Programmatically determined link context

A link's programmatically determined context is additional information that can be programmatically determined from its relationships with other elements, combined with the link text itself. Read more....

Read the full definition

How is web content made accessible?

Answer #2: Well-designed UI

WCAG SC 1.4.3 Contrast (minimum)

The visual presentation of text and images of text has a luminosity contrast ratio of at least 4.5:1.

This text has low contrast and is difficult to read

Contrast ratio 2.7:1

This text has high contrast and is easy to read

Contrast ratio 11.6:1

  • Only 3:1 ratio for large text (~19px and bold, or 24px)
  • Text in logos or brand names are exempt

WCAG SC 2.4.7 Focus visible

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Link with no focus indicator

Link with default outline focus indicator

Link with custom focus indicator

If you set
a:focus {outline: none;},
replace it with something else!

WCAG SC 1.4.1 Use of color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Especially links!

Here's some text with a link distinguished only by colour.

Visually indicate links in other ways. For example,

How is web content made accessible?

Answer #3: Proper HTML

WCAG SC 1.3.1 Info and relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Semantic structure

 
<h3>Types of pet</h3>
<ul>
    <li><a href="/cat/">cat</a></li>
    <li><a href="/dog/">dog</a></li>
    <li><a href="/kunekune/">kunekune</a></li>
</ul>
					

Types of pet

WCAG SC 4.1.2 Name, role, value

For all user interface components:

  • name and role can be programmatically determined
  • states, properties, and values can be programmatically set
  • notification of changes to these items is available to user agents, including assistive technologies

Roles, states, and properties

 
<form>
  <fieldset>
     <legend>Do you like cats?</legend>
     <input type="radio" name="cats" id="yes" value="yes" checked>
     <label for="yes">Yes</label>
     <input type="radio" name="cats" id="no" value="no">
     <label for="no">No</label>
  </fieldset>
  <input type="submit" value="Submit">
</form>
						
Do you like cats?

WCAG SC 2.1.1 Keyboard

All functionality of the content is operable through a keyboard interface.

Keyboard accessibility

Types of pet

Do you like cats?

Why is all this important?

Remember all those devices and AT?

First there's the DOM

Tree diagram of the document object model. Image source

Next, accessibility APIs

Tree diagram of the document object model. Image source
text description

This image illustrates the relationship between user agents (e.g., browsers), accessibility APIs, and assistive technologies. It describes the 'contract' provided by the user agent to assistive technologies, which includes typical accessibility information found in the accessibility API for many of our accessible platforms for GUIs (role, state, selection, event notification, relationship information, and descriptions). The DOM, usually HTML, acts as the data model and view in a typical model-view-controller relationship, and JavaScript acts as the controller by manipulating the style and content of the displayed data. The user agent conveys relevant information to the operating system's accessibility API, which can be used by any assistive technologies, such as screen readers.

Mac OS

  • Mac OS X Accessibility Protocol

Windows

  • MSAA
  • IAccessible2
  • UI Automation

Linux

  • ATK/AT-SPI

Inspecting the APIs

Windows

  • AViewer
  • Accessibility Probe
  • Inspect Objects (MS Windows SDK)

Mac OS

  • Accessibility Inspector (Xcode)

Gnome/Linux

  • Accerciser

Demo: Mac Accessibility Inspector

Types of pet

Do you like cats?

Still, there's the DOM

It's useful when:

  • the API doesn't support certain information,
    or
  • the info passed to the API is incomplete

Native vs. Custom Widgets

Example: Checkbox (1/3)

 
<input type="checkbox" id="dogs"...>
<label for="dogs">Dogs</label>

<div class="checkbox">Dogs</div>	

$('.checkbox').on('click', function() {
   $(this).toggleClass('checked');
});	

.checkbox {
  background: #222 url(../img/checkbox.png) 
    no-repeat 0 8px;
}
.checkbox.checked {
  background-image: 
    url(../img/checkbox-checked.png);
}
					
Dogs

No keyboard access.

No role or state information.

What to do?

Just use native checkboxes already!

But, if you must...

The solution: WAI-ARIA

Screenshot of WAI-ARIA 1.0 specification web page.

It's just attributes and values

  • roles use @role, e.g.
    role="navigation"
  • states and properties use @aria-*,
    e.g.
    aria-expanded="true"

It's part of the HTML5 specification.

Landmark roles

  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

http://www.w3.org/TR/wai-aria/

Document structure roles

  • article
  • columnheader
  • definition
  • directory
  • document
  • group
  • heading
  • img
  • list
  • listitem
  • math
  • note
  • presentation
  • region
  • row
  • rowheader
  • separator
  • toolbar

Native ARIA semantics

  • header → “banner” role, if not a child of section or article
  • nav → “navigation” role
  • main → “main” role
  • aside → “complementary” role
  • footer → “contentinfo” role, if not a child of section or article

Standalone widget roles

  • alert
  • alertdialog
  • button
  • checkbox
  • dialog
  • gridcell
  • link
  • log
  • marquee
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • progressbar
  • radio
  • scrollbar
  • slider
  • spinbutton
  • status
  • tab
  • tabpanel
  • textbox
  • timer
  • tooltip
  • treeitem

Composite widget roles

  • combobox
  • grid
  • listbox
  • menu
  • menubar
  • radiogroup
  • tablist
  • tree
  • treegrid

http://www.w3.org/TR/wai-aria/roles#widget_roles

Native ARIA semantics

  • button → “button” role
  • input type="checkbox → “checkbox” role
  • input type="radio" → “radio” role

Overriding native HTML semantics

 
<a href="#">Link</a>

<a href="#" role="button">Button</a>
					
 
<ul>
   <li role="button">list item button</li>
</ul>
						
  • list item button

States and properties

Widget attributes

  • aria-autocomplete
  • aria-checked (state)
  • aria-disabled (state)
  • aria-expanded (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-level
  • aria-multiline
  • aria-multiselectable
  • aria-orientation
  • aria-pressed (state)
  • aria-readonly
  • aria-required
  • aria-selected (state)
  • aria-sort
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-valuetext

Live region attributes

  • aria-atomic
  • aria-busy (state)
  • aria-live
  • aria-relevant

Relationship attributes

  • aria-activedescendant
  • aria-controls
  • aria-describedby
  • aria-flowto
  • aria-labelledby
  • aria-owns
  • aria-posinset
  • aria-setsize

http://www.w3.org/TR/wai-aria/states_and_properties#state_prop_taxonomy

Labels and descriptions

@aria-labelledby


<div id="label">Date</div>

<input type="text" aria-labelledby="label format">

<span id="format">(DD-MM-YYYY)</span>						
						
Date
(DD-MM-YYYY)

Labels and descriptions

@aria-label


<nav role="navigation" aria-label="Example main menu">
   <ul>
      …
   </ul>
</nav>
						

<button aria-label="Close">X</button>
						

Labels and descriptions

@aria-describedby


<label for="comment">Leave a comment</label>

<textarea id="comment" aria-describedby="notice"></textarea>

<p id="notice">Note: Your comment may be published.</p>
					

Note: Your comment may be published.

Example: Checkbox (1/3) Revisited

 
<input type="checkbox" id="dogs"...>
<label for="dogs">Dogs</label>

<div class="checkbox">Dogs</div>	

$('.checkbox').on('click', function() {
   $(this).toggleClass('checked');
});	

.checkbox {
  background: #222 url(../img/checkbox.png) 
    no-repeat 0 8px;
}
.checkbox.checked {
  background-image: 
    url(../img/checkbox-checked.png);
}
					
Dogs

No keyboard access.

No role or state information.

Example: Checkbox (2/3)

Add keyboard support

  1. add tabindex="0"
 
<div class="checkbox" tabindex="0">Dogs</div>	
  1. add handler for Space key

$('.checkbox').on('click', function() {
   $(this).toggleClass('checked');
});	

$('.checkbox').keydown(function(e) {
   if (e.which == 32) {
      $(this).click();
   }
});
Dogs

Still no role or state information.

Example: Checkbox (3/3)

Add role and state

  1. add role="checkbox" and @aria-checked
 
<div class="checkbox" tabindex="0" 
   role="checkbox" aria-checked="false">Dogs</div>	
  1. add toggle for @aria-checked

$('.checkbox').on('click', function() {
   if ($(this).attr('aria-checked') == 'false') {
      $(this).attr('aria-checked', 'true');
   } else {
      $(this).attr('aria-checked', 'false');
   }
});	

$('.checkbox').keydown(function(e) {
   if (e.which == 32) {
      $(this).click();
   }
});

Role and state provided.

A word of caution...

Using WAI-ARIA in HTML

First rule of ARIA use

Use native HTML elements and attributes as much as possible.

Second rule of ARIA use

Don't override native HTML semantics, unless absolutely necessary.

Background image source

Due diligence

Black and white photo of small white dog digging with caption 'Dig Dig Dig'. Image source

Do the research, as you do…

Thanks!

Questions?

Jason Kiss
Senior Advisor, Digital Engagement
Dept. of Internal Affairs
web.standards@dia.govt.nz
Twitter: @jkiss

Copyright

Creative Commons Attribution 4.0 International Licence
Crown copyright ©. Copyright material in this presentation is protected by copyright owned by the Department of Internal Affairs on behalf of the Crown. Unless indicated otherwise for specific items or collections of content (either below or within specific items or collections), this copyright material is licensed for re-use under a Creative Commons Attribution 4.0 International Licence. In essence, you are free to copy, distribute and adapt the material, as long as you attribute it to the Department of Internal Affairs and abide by the other licence terms. Please note that this licence does not apply to any logos, emblems and trade marks in the presentation or to the presentation's design elements. Where a photograph used in this presentation is accompanied by a link to its source, see the photograph's source for its copyright and licence terms.

The framework used to build this presentation, Reveal.js is protected by copyright owned by Hakim El Hattab and licensed for use under the MIT License.