Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal

Raj LalSenior Engineer

Developing Websites for Everyone

Accessible Design with HTML5

Agenda

About Accessibility

Business Case

4 Key Areas 7 Steps in HTML5

About Accessibility

About Accessibility

Accessibility is about making web pages Easier to Use

Easier to Access

For Everyone

Latest Technology Available

About Accessibility

Easier to Access• Screen readers

• Audio browsers

• Only keyboard or mouse

• Limited bandwidth

• Old browsers, computers

• Mobile / touch devices

For Everyone

Disabled

Seniors Citizens

Low literacy level

Temporary illness

Advanced Users

Latest Technology Available

HTML5 CSS3 JavaScript

The Business Case

The Business Case

Search Engine Optimization

Higher Search Engine Ranking

Senior Citizens spend 2x time buying online

Affluent customers may not be tech savvy

Its also a Law (section 508)

4 Key Areas

4 Key Areas

Hearing

Mobility

Cognitive

Visual

1/4 Hearing

Problem

Cannot hear media

Solution

Make it PERCEIVABLE

PERCEIVABLE

Text alternative to all non-text content Alternative for media using subtitles

Transcribed text and Sign language

1/4 Hearing

2/4 Mobility

Problem

Difficulty with Mouse, Keyboard

Solution

Make it OPERABLE

2/4 Mobility

OPERABLE

All function accessible from keyboard alone

No auto refresh, allow stop time based contents

Navigate with proper use of Headings & Anchors

Joysticks, Voice recognition or audio feedback

3/4 Cognitive

Problem

Difficulty with Text content

Solution

Make it UNDERSTANDABLE

3/4 Cognitive

UNDERSTANDABLE

High color contrast 4.5:1

Use San serif fonts & allow resize

Avoid auto-play of media, animation

Avoid auto refresh, or flashy graphics

Use multiple visual cues, std. icons & audio feedback

4/4 Visual

Problem

Cannot see the content or color

Solution

Make it ROBUST

4/4 Visual

ROBUST

Broken HTML tag can cause difficulty in screen reader

Follow HTML standard specifications

Use syntactically correct HTML & validate web page

Proper “lang” attributes in the markup

Use “acronym” and “abbr” tag with proper usage

Perceivable

W3C’s The POUR Principle

Operable Understandable

Robust

7 Steps in HTML5

Step 1: Make Progressive Enhancements

Step 1: Progressive Enhancement

HTML HTML CSS

HTML CSS JavaScript

Step 1: Progressive Enhancement

Design in a Progressive enhancement way

All content available by HTML alone

Use semantically structured HTML

All presentation elements in the style sheet

Step 1: Example

<h1>Top Level Heading</h1> <section> <h1>Second Level Heading</h1> <p>An <strong>important</strong> text in <em>section</em> element </p> </section>

Step 1: Comparison

<div class="depth0"> <a href="#" name="d26"> <img id="vh_div16indic" src="pix/closed.gif" alt="Closed"> Security </a></div><span id="vh_div16"></span>

Bad Example

<li class="closed"><a href="#">Security</a></li>

Good example

Step 1: Comparison

<font size=”14px” color=”#000”><b>Welcome to the site</b></font><td style="width:180px" id="left-column">…

Bad Example

<style type="text/css"></style><h1>Welcome to the site</h1><table><tr><td id="left-column">…

Good example

Step 2: Allow Content Navigation

Step 2: Allow content navigation

Accessible navigation sidebar

Option to skip to main content

Menus accessible from keyboard

Proper nesting of headings, h1, h2, h3, etc.

Step 2: Layout

HTML5OLD

Step 2: Layout with Role

<header role="banner"><nav role="navigation"><section role=“main”><footer role=“toolbar”><footer role=“button”>…

HTML5 Accessible HTML5

Step 3: Makes FORMS Accessible

Step 3: Make Forms Accessible

Use ‘label” tag for describing form elements

Associate labels with controls using "for" attribute

Create a logical tab order with “tabindex”

For tabbed interface use aria-hidden and aria-pressed

Use “fieldset” and “legend” to group form elements

Use aria-live=“assertive” in the form for validation

Step 3: HTML code

<ul class="group">

<li><input type="radio" id="EHTML" value="html" checked> <label for="EHTML">HTML</label></li>

<li><input type="radio" id="ETEXT" value="text" > <label for="ETEXT">Text</label></li>

</ul>

Good example

Step 3: HTML code

<fieldset> <legend tabindex="10"><b>Personal Details</b> </legend> <label for="name">Name:</label> <input id="name" type="text" size="30" tabindex="11"> <br> <label for="id">ID Number:</label> <input id="id" type="text" size="10" tabindex="12"> </fieldset>

Good example

Step 4: Accessible Images

Step 4: Make Images Accessible

Use ”alt” attribute for alternative text for the image

Use “title” attribute for tooltip

Use role=“presentation” to ignore the image

Use blank ”alt” for decorative images

Use meaningful name for src=“meaningful.png”

Step 5: Accessible Media

Step 5: Make Media Accessible

Media player features navigable by keyboard

Closed captions with timed text files

Switchable sign translation video

Transcripts, caption and sign language

Step 6: Know HTML5 Animations

SVG & JavaScriptCanvas & JavaScript

CSS3 Animation



Animation: SVG

• 2D vector graphics using XML• Object retained in the memory• Full DOM support• SVG elements can be styled• Check Modernizr.svg Modernizr.inlinesvg

Perform better when smaller number of elements and large surface

<svg id="svgElement" width="800px" height="600px" viewBox="0 0 800 600">

<rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" style="fill: white; stroke: black;" />

<circle id="circle0" cx="40" cy="40" r="40" style="fill: orange; stroke: black; stroke-width: 1;" /></svg>

HTML CODE

Step 6: Know HTML5 Animations Animation: Canvas: Context 2D

• Bitmap drawing area• Rectangles, lines, arcs, paths• Stateless • No DOM support, single element• Check Modernizr.canvas

Perform better when large number of objects and surface is small


Animation: CSS3

• Styles for Individual elements• Use CSS3 animation if available• Better than JavaScript based animation• Check Modernizr.csstransitions

Can perform better with GPU acceleration


#myelement{ …-ms-transition: opacity 1s ease;transition: opacity 1s ease;}

Animation: CSS3

var elem = $(‘myelement');

elem.addEventListener('click', function loop() { elem.style.left = ‘100px';}, false);

JS CODE

CSS

Step 7: Make Content Easy


Font size should always be relative , never fixed

Links should be underlined and of different color

Use Anchor links, easily navigable by screen readers

Meaningful link text , avoid using “click here” or “more”


Avoid long pages and minimize scrolling

Test navigation with Keyboard tab

Spelling help in Search

Color in CSS with foreground & background color

Simple and Machine (Screen reader) readable words like “Home page”

Thank YouRaj Lal

Twitter @ iRajLal