Pro HTML5 Accessibility
Building an Inclusive Web
Uni Gottingen 7232 147 329
Joshue O Connor
Contents
About the Author
xv
About the Technical Reviewer
xvi
Acknowledgments
xvii
Introduction
xviii
Chapter 1: Introduction to HTML5 Accessibility
1
Introduction to HTML5: The New Wave
1
HTML5 vs. HTML 4 2
HTML5 Syntax 2
New Elements
6
HTML5: Accessibility and Feature Detection
9
Defining Accessibility 10
Accessibility: From Theory to Practice 11
Understanding Accessibility 12
Legislation
13
Rehabilitation Act 13
Other Relevant Legislation 15
Disability Discrimination Act 1995 16 Special Educational Needs and Disability Act 2001 16 PAS78, the DDA, and the Equality Act 2010 16
European Legislation 16
a CONTENTS
What Are the Benefits of Accessibility?
18
Accessibility Should Enhance Your Design—Not Destroy It
20
WCAG2.0 and HTML5
20
The Challenge of HTML5 Accessibility
22
Conclusion
22
Chapter 2: Understanding Disability and Assistive Technology
23
Understanding Your Users
23
It's All Me, Me, Me with Some People! 23
Overview of Blindness
24
Blindness and Accessibility 26
Vision Impairment 26 Glaucoma 27 Macular Degeneration 28 Retinopathy 29 Detached Retina 30
Physical Disability
32
Cognitive and Sensory Disabilities
32
Perception 32
Memory and Attention 32
Sequencing 33
Dyslexia 33
What Is Assistive Technology?
33
What Is a Screen Reader? 34
Screen Readers and Alternatives . 57 Technologies for Mobile Device Accessibility 57 Speech Synthesis: What Is It and How Does It Work? 59
• CONTENTS
Screen Magnification
60
Switch Access 61
Mouse Emulation 64
Switch Access, Mouse Emulation, and the Web 65
The Accessibility Overlap
66
Conclusion
66
> Chapter 3: JavaScript Isn't a Dirty Word, and ARIA Isn't Just Beautiful Music....67
JavaScript: Useful When Used Well
68
WAI-ARIA: What Is It?
68
What's Wrong with HTML 4, 3, 2...? 69
Accessible JavaScript
70
Progressive Enhancement 70
Unobtrusive JavaScript 71
Tidy Coding 71
Common JavaScript Accessibility Problems 72 Creating Accessible Pop-up Menus and Inline Event Handlers 75 Use of Tablndex and More Advanced Focus Techniques 77
JavaScript and WCAG 2.0 78
Common Scripting Failures in WCAG 2.0 81 Accessible JavaScript Toolkits 82
WAI-ARIA: How to Do It! 85
. Conclusion
110
Chapter 4: API and DOM
111
Defining the Elements Under the Hood of Assistive Technologies
112
What's an API? 112
What's a Layout Engine? 112
• CONTENTS
The Off-Screen Model (OSM)
113
What Is the DOM?
116
Commonly Used Accessibility APIs 121 HTML5 and Accessibility APIs 124
Conclusion
126
Chapter 5: HTML5: The New Semantics and New Approaches to Document
Markup
127
HTML5: What's New?
127
New HTML5 Semantics 128
Global Attributes in HTML5 132
A Quick Recap on How and Why to Use Heading Elements 163 Meet the New divs on the Block 165
Getting Sectioned 169
As an Aside, Did You Hear the One About the Vicar and the [...] 173
Conclusion
173
Chapter 6: Images, Rich Media, Audio, and Video in HTML5
175
Making Images Accessible
175
Meet the Poster Child of Accessible Web Design: The alt Attribute 175 How Screen Readers Handle @alt Text 176
@alt Drawbacks 177
What Should I Describe?
177
Describing Content: Don't Overdo It 178
Different Kinds of Images
179
What's New in HTML5 for Describing Images? 180 Describing an Image with ARIA-describedby 180
Which Method Should I Use?
184
Image Color Contrast 197
HTML5 and Accessible <video> and <audio>
197
HTML5 <video>, <audio>, and You 198 HTML5 <video> and Your Users.. 198
What's Wrong With Flash? 198
Accessibility Problems in Flash 198 Building an Accessible Player 199 First Things First: What's New in Embedded Content? 199 <video> Fallback Content 200
The Media Elements API 200
Getting Started with <video> 201 Making Your Controls Accessible 204 Accessible HTML5 Video Player Version 1 207 Accessible HTML5 Video Player Version 2 210
Audio Description and Captioning with the <track> Element
214
Cue Settings 216
Creating an <audio> Player 218
<canvas> Accessibility
218
Conclusion
220
Chapter 7: HTML5 and Accessible Data Tables
221
The Trouble with Tables
221
Screen Readers and Data Tables 221 Common Patterns for Data Tabl es 222
TMI? 223
How to Create Accessible Tables 223
* CONTENTS
• Chapter 8: HTML5 and Accessible Forms
243
Designing an Accessible Form User Interface
243
Some Forms Good Practices 243
Differences in FORM Elements Between HTML 4 and HTML5 244 HTML5 Labeling of Form Controls 247
New HTML5 Elements 248
New HTML5 INPUT Types 249
New HTML5 Form Attributes 256
Accessible Error Recovery 266
Conclusion
269
i
Chapter 9: HTML5, Usability, and User-Centered Design
271
What Is Usability?
271
Universal Design
274
Participatory Design
282
Focus Group Research
282
Surveys
282
The Cognitive Walkthrough
283
Expert Evaluations
283
Expert Accessibility Audits
283
Using Personas
283
Building Personas 284
Does Using Personas Work? 284
Field Studies
285
Traditional Usability Testing
285
User Testing with People with Disabilities
285
» CONTENTS
Measuring User-Testing Outputs 286
How Does User Testing Work? 286
Goals and Benefits of User Testing 291
Limitations of Testing 292
So What's the Best Method for Me to Assess My HTML5 Project?
293
Iterative Design Processes 293
Is Usability the New Economics?
294
Conclusion
294
• Chapter 10: Tools, Tips, and Tricks: Assessing Your Accessible HTML5
Project
295
Useful Tools for Developers
295
The Chris Pederick Web Developer Toolbar 295 WAT-C Web Accessibility Toolbar (Internet Explorer and Opera) 296
Colour Contrast Analyser 296
WAVE 300
Firebug 307
Tools in the Browser 308
Automated Accessibility Evaluation Tools 309 Want to Examine Accessibility APIs? Try AccProbe or Inspect32 310 Disability Simulation Tools: aDesigner 311
Guerilla User Testing 311
Validation
311
Cascading Style Sheets 313
Simulation Exercises
314
Simulation Exercise 1:No-Frills Browsing 314 Simulation Exercise 2: Turning Off Your Display and Using a Screen Reader 316
» CONTENTS
HI
Appendix A: WCAG 2.0 Client-Side Scripting Techniques
319
SCR1: Allowing the user to extend the default time limit
320
Description 320
Examples 320
SCR2: Using redundant keyboard and mouse event handlers
320
Description 320
Tests 322
Expected Results 322
SCR16: Providing a script that warns the user a time limit is about to expire
323
Example 323
SCR21: Using functions of the Document Object Model (DOM) to add content to
a page
324
Description 324
Example 324
SCR24: Using progressive enhancement to open new windows on user request
328
Description 328
Example 328
SCR26: Inserting dynamic content into the Document Object Model immediately
following its trigger element
329
Description 329
Example 330
Tests: Procedure 330
Expected Results 330
SCR28: Using an expandable and collapsible menu to bypass block of content
331
Description 331
Example 1 331
• CONTENTS
SCR32: Providing client-side validation and adding error text via the DOM
332
Description 332
Example 332
HTML and JavaScript Code 333
SCR35: Making actions keyboard accessible by using the onclick event of anchors
and buttons
341
Description 341
Example 1 341
Example 2 341
SCR37: Creating custom aialogs in a device-independent way
342
Description 342
Example 342
