ebook img

Inclusive Design Patterns: Coding Accessibility Into Web Design PDF

313 Pages·2016·5.45 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Inclusive Design Patterns: Coding Accessibility Into Web Design

For my wife, Fan, who has the power to make me smile, in spite of the world. Published 2016 by Smashing Magazine GmbH, Freiburg, Germany. ISBN: 978-3-945749-43-2. Cover and illustrations created by Heydon Pickering. Editing & proofreading: Owen Gregory. Print layout: Markus Seyfferth. eBook production: Cosima Mielke. Typefaces used: Elena by Nicole Dotin and Mija by Miguel Hernández. Inclusive Design Patterns was written by Heydon Pickering and reviewed by Rodney Rehm and Steve Faulkner. Table Of Contents Introduction 08 The Document 20 A Paragraph 46 A Blog Post 70 Evaluation By Pattern 108 Navigation Regions 124 A Menu Button 154 Inclusive Prototyping 180 A List Of Products 190 A Filter Widget 224 A Registration Form 260 Test-Driven Markup 290 Further Reading 308 About The Author Heydon Pickering is a utilitarian designer, writer and public speaker, the accessibility editor for Smashing Magazine,1 and a consultant working with the Paciello Group.2 He’s interested in new and innovative ways to make the web an inclusive place. User research, systems thinking, and plain old semantic HTML all play their part. When Heydon isn’t writing, coding or illustrating, he does some mental health campaigning, experiments with sound design, and thrashes out doom metal riffs on his detuned SG copy. He’s almost entirely fueled by original recipe Guinness and Naga chillies. About The Reviewers Rodney Rehm is a web developer based in southern Germany. After being a full-stack freelancer for a decade, he moved on to working on the front-ends of Qivicon, Deutsche Tele- kom’s Smart Home platform. He created URI.js3 and the ally.js4 accessibility library, made libsass run in the browser,5 and wrote the world’s first buggyfill.6 1 https://www.smashingmagazine.com/tag/accessibility/ 2 https://www.paciellogroup.com/ 3 http://medialize.github.io/URI.js/ 4 http://allyjs.io/ 5 https://github.com/medialize/sass.js/ 6 https://github.com/rodneyrehm/viewport-units-buggyfill Steve Faulkner is the senior web accessibility consultant and technical director of TPG Europe. He joined the Paciello Group in 2006 and was previously a senior web accessibility consultant at Vision Australia.7 He is the creator and lead developer of the Web Accessibility Toolbar8 accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C9 including: • HTML 5.1,10 • ARIA in HTML,11 • Notes on Using ARIA in HTML,12 • HTML5: Techniques for useful text alternatives.13 He also develops and maintains HTML5accessibility.com. 7 https://www.visionaustralia.org/ 8 https://www.paciellogroup.com/resources/wat/ 9 http://w3.org 10 http://w3c.github.io/html/ 11 http://w3c.github.io/html-aria/ 12 http://w3c.github.io/aria-in-html/ 13 http://www.w3.org/TR/2014/WD-html-alt-techniques-20141023/ Foreword I’ve always had a good word for Heydon Pickering. However, laws of libel prevent me from writing it here, so instead let me tell you about this book: it’s very good. Heydon clearly and comprehensively shows you how to use the web prop- erly; that is, how to take advantage of its built-in powers of reach, inclusivity and accessibility, so you don’t lock out any potential customer or visitor, regardless of how they choose to (or need to) access your content. I’ve been writing about the same for many years, but I’ve still picked up a number of useful tips and tricks when read- ing through the drafts. It’s a little unfortunate that Heydon didn’t accept some of my amendments to make his musical taste less — what’s the word? — embarrassing, but don’t let that put you off reading. There’s a load of useful advice con- tained in this book, and it would be really good if you were to follow it and make your corner of the web a better place for all. Just tweet me if you want music suggestions. Bruce Lawson,14 Deputy CTO, Opera 14 http://www.brucelawson.co.uk 8 Inclusive Design Patterns Introduction Imagine we meet at a party. Not long into conversation you ask me what I do. I simply say, “I’m a designer.” Before you have the chance to ask me what type of designer I am, our mutual friend, the host, taps me on the elbow. “Can I borrow you a moment?” They make their apologies and usher me away. You’re rather relieved, actually, since the sort of person who proudly pronounces themselves “a designer” is probably a bit of a self-regarding bore. Nonetheless, you’re left briefly won- dering what I actually do to pay the bills. Perhaps he makes designer egg cups? Sews postmodernist swimwear? Builds helicopter missile systems? He could have meant anything. By the end of the party we’re not reacquainted, but in a conversation with our mutual friend over the phone the following day, they apologize to you again for the previous night’s interruption. After a moment, you recall. “Oh, your friend the designer. Well, never mind. What does he actu- ally design anyway?” “Oh, he's a web designer.” Introduction 9 “Oh, right.” “Yeah.” Now, the way you might react to this new information is really going to depend on your relationship to the sprawl- ing, amorphous public information matrix we call “The Web.” If you’re more a consumer of the web than a producer for the web, web designer is probably sufficient: “OK, so they design web stuff. Websites and the like.” But I’m willing to bet this isn’t you, otherwise you wouldn’t be reading this book. In which case, you’re no doubt aware just how controversial, contested, and frequently contrary the term design is in the context of the web. The number of people contributing to the web at any given moment is unfathomable, and so is the variety of their talents and skills. So which ones are the designers, and what do they do? For a long time, we’ve been getting the answers to these questions epically, tragicomically wrong. We’ve miscon- ceived and mistreated the medium, both making hard work for ourselves and shortchanging our audiences as a result.

See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.