How to design an HTML5 website which supports people with disabilities, and know why its a good business decision. The four major disabilities which will be covered, 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. 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. What People Will Learn - Understand the problem around designing interfaces for people with, disabilities - Know concrete steps to design and develop web applications to, accommodate the four kinds of major disabilities in HTML5 - Know the business case for Accessibility, 4; Learn the standard practices and design guidelines for accessible, design in HTML5

1. Accessible Design with HTML5
Developing Web for Accessibility
Raj Lal
Senior Engineer

2. GOAL: Accessibility with HTML5
1. What
2. Why
3. How

3. 1. What is Web Accessibility ?
Making
Content & Feature of your Web page
Easily available to Everyone
1

4. Content & Feature
Communication Interaction
Text Login
Link Contact
Images Search
Media Registration
Animation
1

5. Easily Available
Easy to Find, Understand and Use by:
Browsers Assistive Search Devices
Technologies Engines
1

6. By Everyone
• Disabled, Temporary disabled
• Not so tech savvy users
• Senior Citizens, Parents
• Advanced Users, Mobile Users
• Low literacy level
• Users in extenuating circumstances
1

7. By Everyone
1

8. Why Accessibility ?
1. What
2. Why
3. How
1. WHAT
2

9. The Business Case
Seniors Section 508 SEO = Traffic
2

10. Seniors
• Seniors folks Population is 117 Million with
annual spending power of 2 Trillion dollars
• 1/4 consumer is baby boomer (born 1946-1964)
• 57% working-age adults benefit Assistive Tech
1. WHAT
2
• Book: Marketing to leading edge boomers and seniors ,
* Recent study: http://msdn.microsoft.com/en-us/library/windows/desktop/gg712257.aspx

11. Section 508
Support
Disabled Users
2

12. Section 508
Hearing Mobility
Cognitive Visual
2

13. SEO
• Legal & General Group (L&G) Doubled number
of visitors http://www.legalandgeneral.com
• Within 24 hours search engine traffic saw a 25% increase, eventually
growing to 50%.
• Significant improvement in Google rankings for all target keywords
• Site visitors receiving quotations doubled within 3 months
• CNET - 30% increase in traffic from Google
• after CNET started providing transcripts
1. WHAT
2
http://www.w3.org/WAI/bcase/resources.html

14. How to HTML5 for Accessibility
1. What
2. Why
3. How
1. WHAT

15. How to HTML5 for Accessibility
Progressive ARIA Pour HTML5
Enhance Accessibility Principle Semantics
1. WHAT
3

16. Progressive Enhancement
HTML CSS
JavaScript
HTML CSS
HTML
1. WHAT
3

17. 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
• Load JavaScript after the page is loaded
1. WHAT
3

18. ARIA Accessibility APIs
ARIA = Accessible Rich Internet Applications
Part of HTML5 Specification
1. WHAT
3

19. ARIA Accessibility APIs
• ARIA helps Assistive Technology(AT)
• ARIA Make Web content Accessible to AT
• ARIA uses HTML and CSS Tags
• Most of ARIA is embedded in JS libraries
1. WHAT
3

20. How ARIA Works
VoiceOver
Windows Eye
Roles States Properties
Assistive
Technology
ARIA
Platform HTML
Accessibility
APIs
1. WHATOSX Accessibility Protocol
Mac
Linux IAccessible2
3
Windows MSAA

21. ARIA Accessibility APIs
• Uses a set of
- Roles
- States and
- Properties
1. WHAT
3

22. ARIA Roles
• Landmark Roles – Where Am I
• Structural Roles – What’s This
• Interface Widget Roles
1. WHAT
3

23. ARIA Roles
Role type Role name Role name
Landmark application form
roles banner main
complementary navigation
contentinfo search
1. WHAT
3

24. ARIA Roles
Role type Role name Role name
Structural article listitem
roles columnheader math
definition note
directory presentation
document region
group row
heading rowheader
1. WHAT img separator
3
list toolbar

25. ARIA Roles
Role type Role name Role name
Interface standalone widget spinbutton
Widget Roles alert status
alertdialog tab
button tabpanel
checkbox textbox
dialog timer
gridcell tooltip
1. WHAT link treeitem
log composite
3

26. ARIA Roles
Role type Role name Role name
Interface marquee widget
Widget Roles menuitem combobox
menuitemcheckbox grid
menuitemradio listbox
option menu
progressbar menubar
radio radiogroup
1. WHAT scrollbar tablist
slider Tree / treegrid
3

27. ARIA States
• Dynamic Properties
• Global States
• Widget States
1. WHAT
3

28. ARIA States
Attribute type Global Widget
ARIA states aria-busy listitem
aria-disabled math
aria-grabbed note
aria-hidden
presentation
aria-invalid
region
row
rowheader
1. WHAT separator
3
toolbar

29. ARIA Properties
Attribute Global Widget
ARIA aria-atomic aria-autocomplete
Properties aria-controls aria-haspopup
aria- aria-label
describedby aria-level
aria-dropeffect aria-multiline
aria-flowto aria-multiselectable
aria-haspopup
1. WHAT aria-label
3
aria-labelledby

30. ARIA Properties
Attribute type Global Widget
ARIA Properties aria-live aria-orientation
aria-owns aria-readonly
aria-relevant aria-required
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
1. WHAT aria-valuetext
3

31. W3C POUR Principle
Perceivable Operable Understand Robust
able
1. WHAT
3

32. Perceivable
• Text alternative to all non-text content
• Alternative for media using subtitles
• Transcribed text and Sign language
1. WHAT
3

33. Operable
• Function accessible from keyboard alone
• No auto refresh, allow time based contents
• Proper use of Headings & Anchors
• Joysticks, Voice recognition or audio feedback
1. WHAT
3

34. Understandable
• High color contrast 4.5:1
• Use Sans serif fonts & allow resize
• Avoid auto-play of media, animation
• Avoid auto refresh, or flashy graphics
• Multiple visual cues, icons, audio for feedback
1. WHAT
3

35. Robust
• Broken HTML tag can cause difficulty with AT
• Follow HTML standard specifications
• Syntactically correct HTML & validate page
• Proper “lang” attributes in the markup
• Use “abbr” tag with proper usage
1. WHAT
3

36. HTML5 Semantics
Semantics are 30 new HTML elements which
describe the content of the page
1. WHAT
3

37. Accessible HTML5 Website
Home
Form Content
1. WHAT
3

38. Accessible Home Page
<header role="banner">
<nav role="navigation">
<section role=“main”>
<footer role=“contentinfo”>
…
Accessible HTML5
1. WHAT
HTML5
3

39. Accessible Form
1. WHAT
3

40. Accessible Form
HTML5
• Use label tag for describing form elements
• Associate labels with controls using for attribute
• Create a logical tab order with tabindex
• Use placeholder, type=email, url, text
• Use fieldset and legend to group form elements
1. WHAT
3

41. Accessible Form
ARIA
• Use role=main and keep one form in one page
• Use aria-required for required fields
• Use aria-live=assertive in the form for validation
• Use aria-describedby for adding help to fields
1. WHAT
3

42. Accessible Content
• Accessible Image
• Accessible Text and Links
1. WHAT
3

43. Accessible Image
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
1. WHAT
3

44. Accessible Text and Links
• 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”
• Color in CSS with foreground & background color
• Simple and Machine readable words like “Home page”
1. WHAT
3

45. Reference
WAI ARIA: http://www.w3.org/WAI/intro/aria
WCAG: http://www.w3.org/TR/WCAG/
POUR PRINCIPLE: http://webaim.org/articles/pour/
1. WHAT
3

46. Thank You
Raj Lal
Twitter @ iRajLal