Inclusive design patterns : coding accessibility into web design

313 Pages·2016·18.838 MB·English

by  Heydon Pickering

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.