This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Pro HTML5 Accessibility Build exciting, accessible, and usable web sites and apps with Pro HTML5 Accessibility. This book walks you through the process of designing user interfaces to be used by everyone, regardless of ability. It gives you the knowledge and skills you need to use HTML5 to serve the needs of the widest possible audience, including people with disabilities using assistive technology (AT) and older people. With Pro HTML5 Accessibility, you’ll learn: • How accessibility makes for good web site design • The fundamentals of ATs and how they interact with web content • How to apply HTML5 to your web projects in order to design more accessible content • How JavaScript and WAI-ARIA can be used with HTML5 to support the development of accessible web content • Important usability and user-centered design techniques that can make your HTML5 projects reach a wider audience Filled with practical advice, this book helps you master HTML5 and good accessibility design. It explores the new semantics of HTML5 and shows you how to combine them with authoring practices you may know from using earlier versions of HTML. It also aims to demonstrate how HTML5 content is currently supported (or not) by ATs such as screen readers and what this practically means for you as you endeavor to make your HTML5 projects accessible.
Shelve in Web Design/HTML User level: Intermediate–Advanced
SOURCE CODE ONLINE
www.apress.com
For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them.
Contents at a Glance About the Author................................................................................................... xv About the Technical Reviewer ............................................................................. xvi Acknowledgments .............................................................................................. xvii Introduction ....................................................................................................... xviii Chapter 1: Introduction to HTML5 Accessibility ....................................................1 Chapter 2: Understanding Disability and Assistive Technology ...........................23 Chapter 3: JavaScript Isn’t a Dirty Word, and ARIA Isn’t Just Beautiful Music....67 Chapter 4: API and DOM......................................................................................111 Chapter 5: HTML5: The New Semantics and New Approaches to Document Markup ...............................................................................................................127 Chapter 6: Images, Rich Media, Audio, and Video in HTML5 ..............................175 Chapter 7: HTML5 and Accessible Data Tables...................................................221 Chapter 8: HTML5 and Accessible Forms ...........................................................243 Chapter 9: HTML5, Usability, and User-Centered Design ....................................271 Chapter 10: Tools, Tips, and Tricks: Assessing Your Accessible HTML5 Project ................................................................................................................295 Appendix A: WCAG 2.0 Client-Side Scripting Techniques ..................................319 Appendix B: Definition of WAI-ARIA Roles ..........................................................347 Index ...................................................................................................................359
iv
Introduction This book aims to help web designers and developers come to grips with building exciting, accessible, and usable web sites/applications with HTML5. The book looks at using HTML5 to serve the needs of the widest possible audience, including people with disabilities using assistive technology (AT) and older people. It aims to be a useful go-to guide by giving you practical advice. The book explores the new semantics of HTML5 and how to combine them with authoring practices you may know from using earlier versions of HTML. It also aims to demonstrate how HTML5 content is currently supported (or not) by assistive technologies such as screen readers, and what this practically means for you as you endeavor to make your HTML5 projects accessible. The HTML5 specification is huge, with new APIs and patterns that can be difficult to understand from an accessibility perspective. Accessibility itself can also seem complex and nuanced, in particular if you have no experience dealing with the needs of people with disabilities. This book aims to hold your hand through the process of gaining an understanding of the needs of people with disabilities, as well as the new specification. Accessibility isn’t a mysterious or esoteric subject, but it is nuanced. And HTML5 is a gamechanger. Ultimately, creating accessible content is really a quality design issue. (Good design enables; bad design disables.) And getting design right is often a matter of choosing the correct approach. This book hopes to be your companion in understanding both, HTML5 and good accessibility design.
Who This Book Is For Pro HTML5 Accessibility is for the intermediate to more advanced web designer and developer who is already building websites and applications but may need some help in understanding accessibility and transitioning to HTML5.
Prerequisites The book can be read as a basic introduction to HTML5 and accessibility, but it may be more suited to the professional or experienced designer who already has knowledge of HTML4 as well as CSS, WAIARIA, and JavaScript experience. While no detailed knowledge of CSS, WAI-ARIA, or scripting is really required, it will help the reader to understand some of the design patterns and examples discussed in the book.
xviii
INTRODUCTION
Downloading the Code The code for the examples shown in this book is available on the Apress web site, www.apress.com. A link can be found on the book’s information page under the Source Code/Downloads tab. This tab is located underneath the Related Titles section of the page.
Contacting the Author The author has a general aversion to social media but will use Twitter occasionally. You can follow him on Twitter as @joshueoconnor.
xix
CHAPTER 1
Introduction to HTML5 Accessibility In this chapter, I will introduce accessibility, define what it is, and discuss why you should be paying attention to reducing the barriers to access that might exist for many people in the systems you build. We will also look at HTML5 and examine its main differences from HTML 4—and you’ll see what this means for accessibility as well as how those differences will impact the way you build web sites and applications.
Introduction to HTML5: The New Wave HTML5 is here. It is the new lingua franca for the Web. So what is it? HTML5 is the new version of HTML 4, XHTML1, and DOM Level 2 HTML. It has moved HTML from being a relatively simple document markup language to being a sophisticated platform for web applications with a host of new, rich application programming interfaces (APIs). As with all major changes in life, the transition might not be smooth. Such a major shift that adds a host of new elements and attributes presents particular challenges for you as an author as well as, potentially, for the consumer. HTML 4 was readily understood and offered features that could be used in imaginative ways. By leveraging these features in combination with other languages like Cascading Style Sheets (CSS) and JavaScript, developers could do things that were increasingly complex, pushing the models of user interaction. With the advent of Web 2.0–type content such as AJAX, dynamic content updating, and more clientside processing, we saw a variety of terrific, sophisticated applications being developed out of what were often semantically limited markup languages. This new wave of glossy widgets—and sometimes bizarre interaction models—often present many challenges to the user. If the user has a disability, the challenge is greater, because that user might not be able to access important widget functionality from the keyboard or content updates might be lost on the screen-reader user. Long before HTML5, many web designers started to really care about accessibility and look for ways to ensure their web sites and applications were usable by the widest audience. So grassroots movements like the Web Standards Project were born. An active and vibrant community arose that saw the challenges of improving the user experience and quality of design as a call to arms. If you are reading this, chances are you are a web designer or developer and you would like to know more about HTML5 and how it relates to accessibility. So you’re in the right place. This book assumes you have a decent level of knowledge of HTML 4, as well as some CSS experience and maybe some JavaScript experience. It also assumes you’re keen to learn about developing robust web sites and applications by using HTML5. If you’re not an expert CSS or JavaScript person and don’t even know much HTML, don’t worry! This book is designed to provide sufficient references to online materials and resources that will soon get
1
CHAPTER 1 INTRODUCTION TO HTML5 ACCESSIBILITY
you up to speed. The HTML5 spec is notoriously large (about 800 pages), so what this book tries to do is distill the parts that relate most to developing accessible web sites. This book (in tandem with some other more generic HTML5 resources) should help you come to terms with the game-changer that is HTML5, as well as accessibility. In this book, I will attempt to share with you what I know about both—as a web designer and developer and as someone who has worked with people with disabilities for nearly 10 years. I am also a member of the HTML5 working group, where my input has had particular emphasis on accessibility and on trying to ensure (with many others) that the HTML5 specification will best serve the needs of the broadest range of users, including people with disabilities.
HTML5 vs. HTML 4 So what’s new in HTML5, and how does it differ from HTML 4? First, HTML5 is designed to do an awful lot more than just mark up text or be a hypertext markup language. (You are forgiven if you thought it was.) Second, many new APIs are now contained within the new specification that might not seem, at first glance, to belong in a document markup language at all. These APIs are many and varied, and include Web Workers (an API for running scripts in the background independently of any user interface scripts), Web Storage (similar to HTTP session cookies, for storing structured data on the client side), and Web Sockets (for bidirectional communications with server-side processes). When you factor in native, “in the browser” support for video and audio via the
