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.
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)
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
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">…
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.
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>
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”
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
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
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
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”
Section 508: information technology is accessible to people with disabilities.
Presentation elements which change the visual content (for eg. bold, italics)
A text-to-speech reader also understands the tags <strong> or <em> but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
Use List instead of DIVsIndentation without spacer.gif use <Ul>
Use List instead of DIVsIndentation without spacer.gif use <Ul>
for good navigation in screen reader
for good navigation in screen reader
A text-to-speech reader also understands the tags <strong> or <em> but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
A text-to-speech reader also understands the tags <strong> or <em> but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
for good navigation in screen reader
for good navigation in screen reader
Use List instead of DIVsIndentation without spacer.gif use <Ul>
Use List instead of DIVsIndentation without spacer.gif use <Ul>