Pro HTML5 Accessibility

Transcription

1 Pro HTML5 Accessibility Building an Inclusive Web Uni Gottingen Joshue O Connor Apress

2 Contents About the Author About the Technical Reviewer Acknowledgments Introduction xv xvi xvii 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 Special Educational Needs and Disability Act PAS78, the DDA, and the Equality Act European Legislation 16 Dealing with Change and Diversity 18 V

3 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 vi

4 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 Common Scripting Failures in WCAG 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 What Are Accessibility APIs? 112 vii

5 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 Text 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 Type 1: Describing a Visually Rich Image 185 viii

6 Image Color Contrast 197 HTML5 and Accessible <video> and <audio> 197 HTML5 <video>, <audio>, and You 198 HTML5 <video> and Your Users 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 Accessible HTML5 Video Player Version 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 Conclusion 242

7 * 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 Formal vs. Informal User Testing 286 x

8 » 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 Inspect 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 Conclusion 317 xi

9 » 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 Example xii

10 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 Example SCR37: Creating custom aialogs in a device-independent way 342 Description 342 Example 342 Appendix B: Definition of WAI-ARIA Roles 347 WAI-ARIA States and Properties 354 Index 359 xiii