A beginner's guide to - Wipfli LLP
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
A beginner’s
guide to
designing for
accessibility
A beginner’s guide to designing for accessibility 1 © 2021 Wipfli LLP
In a mobile-first, digital world, everyone uses Did you know?
their phones and computers to accomplish …
well, most everything. 40.3M
adults in the U.S. report having
Whether you’re a user experience No product owner would intentionally
hearing trouble
designer, product owner, business leave out or otherwise alienate 15%
Source: CDC
owner, marketer — or really anyone of their potential audience, but that’s
with some responsibility for a digital what we risk doing when we don’t
21.7M
product — it’s important that what you take accessibility web design and app
create be accessible by all of your users. design into consideration. Designing
for accessibility improves your user
Designing for UX accessibility means experience not only for disabled users adults in the U.S. report having
creating products that are able to be but also for everyone. vision issues
used by everyone.
Source: CDC
At Wipfli, here’s how we do
And developing just to meet legal
accessible website and app
requirements isn’t a good enough
15%
design and why.
reason to be designing for accessibility.
In an ideal world, we view those
requirements as minimums for
of the world’s population has
universal usability.
a disability
Source: UN
A beginner’s guide to designing for accessibility 2 © 2021 Wipfli LLP
2,258 277% 80%
lawsuits alleging websites violated the increase in ADA lawsuits against of users with impairments will not
Americans for Disabilities Act (ADA) websites from 2017 trust a service provided because of
Source: LA Times Source: LA Times accessibility barriers
Source: Toptal
The designing for accessibility We’ve now grown far beyond that, and We should all be proactively designing
movement formal guidelines are only recently for accessibility. Making something
catching up, which can cause a lot unavailable, unusable or difficult to
The accessibility movement has been of anxiety for key decision makers use to a huge portion of your potential
gaining steam for some time, and behind websites and apps. Will audience is deeply alienating. And
rightfully so. The A11y Project does their efforts meet ADA-compliant the percentage of your user base that
great work in attempting to web design standards? Meanwhile, likely has some type of disability only
make accessible design easier to countless companies continue building increases as users age. Of the U.S.
understand. Furthermore, major class products without consideration for UX population over 80, for example, 72%
action lawsuits over accessibility accessibility and later find themselves in report having some type of disability.
design are on the rise. the difficult spot of needing to update As our generation of digital natives
their products for compliance. ages, accessibility will only become
Originally, ADA guidelines were created
increasingly important.
for a World Wide Web full of static web
pages with static images.
A beginner’s guide to designing for accessibility 3 © 2021 Wipfli LLP
Alienating users — any users — is bad
design. Everyone should be able to
use any digital product, regardless of
disabled status or other factors.
A beginner’s
beginner’s guide
guide to
to designing
designing for
foraccessibility
accessibility 4 ©
© 2021
2021 Wipfli LLP
How to design for accessibility
Designing to meet the needs of disabled If you’re just getting started with
audiences does not make the experience WCAG, there are four core elements
worse for the nondisabled user. The to consider in your accessibility web
opposite is true. It gets better for development process: “People with
everyone (Schmutz, et al). Sites designed
for high levels of accessibility rate better
■ Perceivable: Anyone can distinguish disabilities are the
for things like time to complete a task content regardless of how they largest minority
and have higher perceived aesthetics. perceive it.
Website users also say that accessible ■ Operable: Responsive to user
group in America,
sites feel more trustworthy. interactions, including accessibility and anyone can
technologies.
This is where the Web Content
■ Understandable: Clear instructions
become a member at
Accessibility Guidelines (WCAG)
come into play. Created by W3C,
and messaging help users correct any time.”
errors.
the international World Wide Web
Disability Funders Network
Consortium, WCAG is simply a range of ■ Robust: Flexible and adapts to
recommendations meant to make the a variety of mediums and input
web more accessible and user-friendly methods.
to all.
A beginner’s guide to designing for accessibility 5 © 2021 Wipfli LLP
Accessible UX, not just UI It’s important to distinguish between user experience and user Perceivable Operable interface design when developing for accessibility. User interface Anyone can distinguish Responsive to user interactions, design describes a tool to facilitate content regardless of how they including accessibility interaction. It’s the means of perceive it. technologies. communication between the user and the system. User experience design is concerned with making a product more efficient and usable — the user interface is a component of the user experience. We discussed that the four core Understandable Robust elements for WCAG are that a design is perceivable, operable, understandable Clear instructions and Flexible and adapts to a and robust. Here are a few examples of messaging help users correct variety of mediums and input how that looks. errors. methods. A beginner’s guide to designing for accessibility 6 © 2021 Wipfli LLP
Perceivable means dynamic The design should adjust for user- specified perception settings. For example, in the accessibility settings on iOS, you can choose to enable bold text. Everything functions as expected, except that the text is now bold and more legible for those with vision impairments. But just because an OS offers Enabling bold text in iOS accessibility settings doesn’t mean 12 creates a more visually your app or website will support them accessible user experience. without some legwork and testing on the part of your developers. In short, your UI shouldn’t break just because a user needs to change the text size. A beginner’s guide to designing for accessibility 7 © 2021 Wipfli LLP
Operable means navigable
A clean user interface should minimize
the number of interactions it takes
to accomplish a task. Navigation
paradigms on a website, for instance,
should be obvious and reduce the
number of clicks needed to get to any
particular web page.
This menu paradigm is
In mobile apps, touch targets should more universally accessible
be large, intuitive and forgiving. For because it requires fewer
taps to navigate than
example, the bottom row of icons in the
commonly used collapsible
iOS Health app is more intuitive than hamburger menus.
the commonly-used hamburger button,
which creates friction for the user by
hiding available options under an icon.
(A fun example: Touch targets on words
in iOS are larger below the word than
they are above because they assume
you’re reaching up from the bottom
with a finger, and therefore might tap
slightly below your actual target.)
A beginner’s guide to designing for accessibility 8 © 2021 Wipfli LLP
Understandable means discoverable
A great example of understandability
in accessible website design involves
the use of forms. Asking someone to fill
out a form is a common function across
both websites and apps. Errors in forms
should be indicated by more than just
color. Further, help text, onboarding
content and tooltips should also be
accessible.
Gestures and advanced UI functionality
should be either secondary or optional.
Don’t make an app with a creative,
unusual interface that can’t be made to
How the registration form
function for everyone. on our website displays form
field errors.
A beginner’s guide to designing for accessibility 9 © 2021 Wipfli LLPRobust means compatible
Objects that cursors or fingers can tap
should be made to be accessible by
keyboards as well. Not everyone has the
ability to navigate a mouse effectively,
trackpads aren’t all that useful for a lot
of users, and many with limited motor
abilities in their hands navigate the web
through only their keyboard.
Because of this, UI elements should
be labeled to support screen readers,
including detailed image alt tags. UI
elements should be compatible with
popular accessibility tools like Switch
Control for iOS and Switch Access for
Android.
Tools like VoiceOver and Switch These will actually read or describe
Control for iOS and TalkBack and elements of the screen to you, and also
Switch Access for Android are mobile allow users with limited mobility to
technologies specifically designed for cycle through the elements displayed
the needs of disabled users. on the screen and choose which to
interact with.
A beginner’s guide to designing for accessibility 10 © 2021 Wipfli LLPContrast ratios in
accessible design
WCAG gets pretty specific on a Ratio: 3.14:1 Body text:
Read me
multitude of best practices in accessible Large text:
website design. One of the graphic
design principles that extends to the
web and mobile apps is contrast ratios. Ratio: 5.5:1 Body text:
Read me
Large text:
Their ideal minimums in contrast ratios
for various types of text and calls to
Ratio: 2.47:1 Body text:
action are: Read me
Large text:
Body text: 4.5:1
Large text: 3:1 Ratio: 5.84:1 Body text:
Read me
Black and white text: 21:1 Large text:
To the right are some examples using
Ratio: 5.77:1 Body text:
our brand colors. We use the second, Read me
Large text:
fourth and fifth combinations within
this e-book. The WebAIM color contrast
checker is a very handy tool to learn
about and test these ratios yourself.
A beginner’s guide to designing for accessibility 11 © 2021 Wipfli LLPAccessible design for
forms and media
Among the most important ways to Option 1 may look the
most minimally pleasing,
ensure that your website or app is but Option 4 provides the
accessible is to make sure that forms, most universally accessible
CTAs and media are optimized for users experience.
with disabilities.
Forms
When designing forms, always add field
labels that exist outside of the fields
themselves. This way, even when a field
is populated with content, it’s easy to see Form errors are a critical part of a For all of these reasons, Option 4 above
which field is which. form’s UX. Errors should be augmented is the most universally accessible. It also
with actual words. A user with color has the smoothest user experience for
This is particularly important on longer blindness, for example, might not see everyone.
forms with multiple fields. You’ll see this a box highlighted with red, as is the
difference illustrated between Option case in Option 2 above. A visual marker It may not look as minimally pretty as
1 and Option 2 in the example on this where the error is only visible on a the first, but it does create the most
page. hover state isn’t necessarily accessible, widely approachable design, whereas the
either, because it requires using a mouse first form potentially alienates a large
(Option 3). subset of your audience.
A beginner’s guide to designing for accessibility 12 © 2021 Wipfli LLPMaking images and videos accessible
Images and videos should feature alt
tags, descriptions and captions for users
with screen readers.
When a user posts an
Just about every CMS makes this image on LinkedIn, they’re
extremely easy to do, although many given the option of adding
alt text, which makes a
content producers skip this step when
Wipfli’s more universal LinkedIn
publishing web content. experience for those who
might be using screen
When you upload an image in readers.
WordPress, for example, you’re
presented with fields for title, alt text
and description. All of them should be
filled out for every image used.
Some other platforms have taken steps
to encourage users to fill out these
fields in interesting ways. On LinkedIn, With videos, it’s important to always $1 per minute of video, which is quite
for example, all image posts have a generate captions. While YouTube reasonable. And as with SEO, a YouTube
pretty prominent “Add alt text” CTA that does have automatic captions, the video with complete metadata that
allows you to enter alt text for an image, technology is still pretty rough. You includes captions will rank better than
making it more accessible to everyone can use a program like Rev.com to one that’s missing captions.
who might see your post. generate captions for video files for just
A beginner’s guide to designing for accessibility 13 © 2021 Wipfli LLPTesting for accessibility web design
and why it matters
Accessibility should not be limited There are legal considerations to be
merely to legal compliance. Accessibility sure, but designing for accessibility is
should be about catering to all users. also important because it’s the right
thing to do. And you only know that your
Accessible design is really just inclusive ADA-compliant website design work
design. has been done well after an accessibility
design audit.
A specific example of accessible
functionality that has become On the next page, we provide a few ways
universally enjoyable is voicemail to get that done.
transcription. Voicemail transcription is
a beautiful universal design because it
benefits both disabled and nondisabled
users.
Designing for accessibility is great,
but as we know from user research
and the surge of lawsuits around ADA
compliance, intentions aren’t enough.
A beginner’s guide to designing for accessibility 14 © 2021 Wipfli LLPGOOD BETTER BEST
Code scan for Accessibility Usability testing for
accessible design design audits accessible design
Automated code scans can draw An accessibility audit by an The best, most comprehensive form
attention to clear accessibility expert well-versed in developing of testing will always be usability
design violations, like missing alt accessible websites can help testing. In-person user testing can
tags for images or missing field identify accessibility issues. Get uncover usability gaps on any type
labels. Online assessment tools in touch with us to get started. of product, including how users
can also analyze contrast ratios with disabilities interact with a
and markup. The A11y Project product. In-person testing where
has a great set of accessibility you literally, physically observe
code scan resources. and take notes on how users with
various disabilities interact with
your product is about as thorough
as you can get in designing a
powerful and universally accessible
user experience. Click here to learn
more about Wipfli’s usability testing.
A beginner’s guide to designing for accessibility 15 © 2021 Wipfli LLPHow digital gets done
Build for everyone Design for maximum impact
with Wipfli. We deliver strategies
Remember, accessibility web development is not just about that drive opportunity, digital
legal compliance. Certainly, leveraging the rise in lawsuits over that works for you and tech for a
compliance in mobile apps and web sites is a great reason to stronger tomorrow.
dedicate resources to improving your digital user experiences,
but ultimately, we at Wipfli care about this because it’s the right Ready to get started?
thing to do for your users.
Our digital services cover the scope of
A more accessible user experience is a more universal accessibility design. We offer usability
user experience. testing, UX design audits, UX and UI
guidance, web marketing and more.
Click here to learn more.
A beginner’s guide to designing for accessibility 16 © 2021 Wipfli LLPYou can also read
