Accessibility Note

This presentation uses an out-of-the box HTML slideshow script which by itself is unaccessible. Keybindings exist to traverse forward and backward with arrow keys, but focus never shifts as the slides advance. The slides themselves are well structured, so you can use a read all command to listen to everything linearly. I've also added a live region which should work well for screen readers that support live regions. As you traverse through the slides using arrow keys, the slide's content will be added to the live region. If all else fails, you can also access the slideshow content by turning off CSS and JavaScript.

Accessibility Features of HTML5

With Mark Sadecki, W3C / Web Accessibility Initiative

Accessibility Features of HTML5

With Mark Sadecki
W3C / Web Accessibility Initiative
#CSUN2014 @cptvitamin
Slides: http://j.mp/html5-a11y

Overview

Mark Sadecki

Logo: W3C

HTML Accessibility Task Force

  • Mandate to develop accessibility solutions:
    • Technical Reports
    • Extension Specifications
    • Integration Path
  • Reach consensus on accessibility issues
Graphic: Arrows connecting the WAI PFWG and HTML WG to the HTML Accessibility Task Force

HTML5

The Open Web Platform

Graphic: Open Web Platform, One integrated system for all applications, content, and devices, ranging from gaming and TV to publishing and healthcare.

HTML5 is at the heart of the Open Web Platform. Since the Open Web Platform will be used in more places than just the web (like digital publishing, home entertainment, automobiles and gaming) it's imperative that it all it's features are accessible.

The Web - The Great Equalizer

The power of the Web is in its universality.
Access by everyone regardless of ability is an essential aspect.
- Tim Berners-Lee
W3C Director and inventor of the World Wide Web

Accessibility in HTML5

Improved Semantics

Describe your document structure with sectioning elements

<section>
<nav>
<article>
<aside>
<header>
<footer>

Improved Semantics

<input> element - New types

color
date
datetime
email
month
number
range
search
tel
time
url
week

Improved Semantics

<input> element - New attributes

autocomplete
autofocus
autosave
list
max/min/step
maxlength
pattern
required
spellcheck

ARIA

Landmark roles

application
banner
complementary
contentinfo
form
main
navigation
presentation

ARIA

Screenshot: iOS form field type is text

text

HTML5 formfield type equals text has focus, iOS keyboard shows a standard onscreen text keyboard.

Screenshot: iOS form field type is search

search

HTML5 formfield type equals search has focus, iOS displays the form field with rounded corners, consist with Search boxes on the rest of the OS.

Screenshot: iOS form field type is tel

telephone

HTML5 formfield type equals tel has focus, iOS keyboard shows a phone number dialing keyboard.

Screenshot: iOS form field type is url

URL

HTML5 formfield type equals url has focus, iOS keyboard shows text keyboard with .com, slash and dot buttons.

Screenshot: iOS form field type is email

email

HTML5 formfield type equals datetime has email, iOS keyboard shows text keyboard with @ and dot buttons.

Screenshot: iOS form field type is datetime

datetime

HTML5 formfield type equals datetime has focus, iOS keyboard shows a scrolling month/day/year and hour/minute picker.

Screenshot: iOS form field type is date

date

HTML5 formfield type equals date has focus, iOS keyboard shows a scrolling month/day/year picker.

Screenshot: iOS form field type is month

month

HTML5 formfield type equals month has focus, iOS keyboard shows a scrolling month/year picker.

Screenshot: iOS form field type is time

time

HTML5 formfield type equals time has focus, iOS keyboard shows a scrolling hour/minute picker.

Screenshot: 2 iOS form fields with type is text and spellcheck equal to true and false

spellcheck attribute

HTML5 formfield type equals text, the field with spellcheck="true" shows dotted red underline under mispelled word and the field with spellcheck="false" does not.

Graphics

Canvas

Challenges with Accessibility in Canvas

Canvas Demo

Hit Region and Focus Ring Demo


<canvas id="example" height="200" width="750">
  <label for="OptionA">
    <input id="OptionA" type="checkbox"> Option A
  </label>
  <label for="OptionB">
    <input id="OptionB" type="checkbox"> Option B
  </label>
</canvas>

Accessible Canvas in the Wild

ALT Guidance (4.7.1.1)

Requirements for providing text to act as an alternative for images

  • Use Cases
  • General Guidelines
  • Button links
  • Charts, diagrams, graphs, etc.
  • Images that include text
  • Inline images
  • Multi-image graphics
  • Webcam images
  • Icons
  • Logos
  • CAPTCHA
  • Guidance for Authoring Tools and Validators

Media

Media

Media

Multi-track synchronization

Media

Multi-track synchronization

Synchronized Audio Description

What's the Status of HTML5

HTML5 is in Candidate Recommendation

Where is the support at?

What's Next?

HTML5.1

Resources

Stay in touch!