Learn how to design an HTML5 application which supports people with disabilities, and know why its a good business decision. An accessible web application gives maximum reach to your application's information, functionalities and benefits, by allowing multiple input methods, different interaction models, and customization based on special needs and limited device supports. The four major disabilities that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse), and cognitive disabilities, which are related to learning abilities. Know how to use the latest technologies to accommodate these users in the user interface.

1. Accessible Design with HTML5
Developing Websites for Everyone
Raj Lal
Senior Engineer

2. Agenda
About Business 4 Key Areas 7 Steps in
Accessibility Case HTML5

3. About Accessibility

4. About Accessibility
Accessibility is about making web pages
Easier to Use

5. About Accessibility
Easier to Access
For Everyone
Latest Technology
Available

6. Easier to Access
• Screen readers
• Audio browsers
• Only keyboard or mouse
• Limited bandwidth
• Old browsers, computers
• Mobile / touch devices

7. Disabled
Seniors Citizens
Low literacy level
Temporary illness
Advanced Users
For Everyone

8. Latest Technology Available
HTML5 CSS3 JavaScript

9. The Business Case

10. 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)

11. 4 Key Areas

12. 4 Key Areas
Hearing
Mobility
Cognitive
Visual

13. 1/4 Hearing
Problem
Cannot hear media
Solution
Make it PERCEIVABLE

14. 1/4 Hearing
PERCEIVABLE
Text alternative to all non-text content
Alternative for media using subtitles
Transcribed text and Sign language

15. 2/4 Mobility
Problem
Difficulty with Mouse, Keyboard
Solution
Make it OPERABLE

16. 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

17. 3/4 Cognitive
Problem
Difficulty with Text content
Solution
Make it UNDERSTANDABLE

18. 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

19. 4/4 Visual
Problem
Cannot see the content or color
Solution
Make it ROBUST

20. 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

21. W3C’s The POUR Principle
Perceivable Operable Understand Robust
able

22. 7 Steps in HTML5

23. Step 1: Make Progressive Enhancements

24. Step 1: Progressive Enhancement
HTML CSS
JavaScript
HTML CSS
HTML

25. 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

26. 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>

27. Step 1: Comparison
Bad Example
<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>
Good example
<li class="closed"><a href="#">Security</a></li>

28. Step 1: Comparison
Bad Example
<font size=”14px” color=”#000”>
<b>Welcome to the site</b></font>
<td style="width:180px" id="left-column">…
Good example
<style type="text/css">
<!-- td#left-column {width: 180px;} -->
</style>
<h1>Welcome to the site</h1>
<table><tr><td id="left-column">…

29. Step 2: Allow Content Navigation

30. 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.

31. Step 2: Layout
OLD HTML5

32. Step 2: Layout with Role
<header role="banner">
<nav role="navigation">
<section role=“main”>
<footer role=“toolbar”>
<footer role=“button”>
…
HTML5 Accessible HTML5

33. Step 3: Makes FORMS Accessible

34. 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

35. Step 3: HTML code
Good example
<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>

36. Step 3: HTML code
Good example
<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>

37. Step 4: Accessible Images

38. 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”

39. Step 5: Accessible Media

40. 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

41. Step 6: Know HTML5 Animations

42. Step 6: Know HTML5 Animations
CSS3
Canvas & Animation
SVG & JavaScript
JavaScript

43. Step 6: Know HTML5 Animations
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

44. HTML CODE
<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>

45. 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

46. Step 6: Know HTML5 Animations
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

47. Step 6: Know HTML5 Animations
Animation: CSS3
var elem = $(„myelement'); JS CODE
elem.addEventListener('click',
function loop() {
elem.style.left = „100px';}, false);
#myelement CSS
{
…
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}

48. Step 7: Make Content Easy

49. 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”

50. Step 7: Make Content Easy
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”

51. Thank You
Raj Lal
Twitter @ iRajLal