As design practitioners, it's increasingly common for guidelines around accessibility to be mandated in our digital work. This shouldn't be viewed as a way of conforming creative work, but instead viewed as an opportunity to make inclusivity a guiding principle in the experiences we craft.
3. > Inclusive Design 101
Reframing accessibility
!3
It’s becoming more common for our clients to ask for accessibility guidelines to be
incorporated into digital work. And there are well-documented criteria and tools
available to ensure we’re meeting these standards.
However, this practice shouldn’t be about conforming our creative work or checking
items off a list. Thinking about design as being inclusive gives us a framework to create
experiences that are usable and open to everyone.
4. > Inclusive Design 101!4
!""#$$%&%'%()
guidelines ensure that users can
access content & functionality
regardless of physical or
developmental impairments
*$+&%'%()
principles ensure that interacting
with content & functionality is as
intuitive, efficient and enjoyable
as possible
,-"'.$%/%()
a methodology that ensures that
content & functionality are
designed for all people to have
the ability to engage
5. > Inclusive Design 101
0+(123'4#$51!.(6371
!"#$%&'()*+,-*./'01#",/*2(%34#*54#"6/
“An important distinction is
that accessibility is an attribute,
while inclusive design is a method.”
SOURCE: https://www.fastcompany.com/90243282/the-no-1-thing-youre-getting-wrong-about-inclusive-design!5
6. > Inclusive Design 101
Our mindset
!6
As designers, we have the power and responsibility to make sure that everyone has
access to what we create regardless of…
SOURCE: https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
! 8 , 9 , : ; < = > : ? @ : A , : * ! : , = >
disability: visual,
auditory, physical,
speech, neurological, or
cognitive; literacy level
cultural perceptions,
bright or low light, muted
audio, slow internet
connection
in transit or driving,
multitasking, broken arm
or finger, limited data,
older device or software
7. > Inclusive Design 101!7 SOURCE: https://www.microsoft.com/design/inclusive/
: = * < 2
one arm arm injury new parent
A ? ?
blind cataract distracted
driver
2 ? ! B
deaf ear infection bartender
A C ? ! 0
non-verbal laryngitis heavy
accent
+1$%/*0"$"&%&",/#*'%/*74*348$%/4/&9*&4$3,8%8:*,8*#"&1%&",/%0
8. > Inclusive Design 101
What this is not
!8
Barrier to Innovation
Monotonous
Repressive
Compromised Design
10. > Inclusive Design 101
Foundational guidelines
!10
While inclusivity is the ideal, we need to first understand what accessibility is all about.
The Web Content Accessibility Guidelines (WCAG 2.1), authored by the World Wide
Web Consortium, is the most comprehensive benchmark for accessibility standards.
(&&3#);;---<-=<,86;>?.;#&%/@%8@#A61"@40"/4#;-'%6;
11. > Inclusive Design 101
How this impacts digital process
!11
1
Affects how we use type,
craft page layouts and
employ animations and
transitions.
D?A,E>1E*,D?9,>?A <=>:?>:1E*,D?9,>?A <=D?1E*,D?9,>?A
Affects what’s captured in
copy decks and input into
a content management
system.
Affects HTML markup,
supporting alternate
navigation and how forms
are developed.
2 3
12. > Inclusive Design 101
Aim to satisfy AA standards
!12
WCAG 2.1 outlines success criteria for each accessibility guideline. These are stepped
out into several levels: A, AA and AAA.
9 = F ? A : 2 , E 2 ? A :
A AA AAA
minimum requirements to be
somewhat accessible to
audiences with impairments
acceptable level for desktop
and mobile that is usable and
supports assistive technology
highest level criteria that has
potential to incur additional
cost/scope to fully implement
14. > Inclusive Design 101!14
Our digital experiences should be intuitive, efficient and enjoyable
for all users. Intelligently applying guidelines around text size and
contrast, making calls to action differentiated, and identifying errors
and resolutions clearly help make sure that we’re designing for the
widest user audience.
15. > Inclusive Design 101!15
1 2 3 4
Maintain appropriate
contrast between text
and the background it
sits on
Make touch targets
large enough and create
adequate space
between them
Ensure the minimum
font size in text blocks
or paragraphs is
readable across devices
Be straightforward and
consistent with
language used in calls to
action
5 6 7 8
Use more than one
design factor to make
primary actions
apparent
Make navigation and
progress cues clear and
consistent to aid task
completion
Clearly communicate
when an error occurs
and tell the user how to
resolve it
Write concise and
useful alternative text
for images and other
non-text assets
16. > Inclusive Design 101!16
1 Maintain appropriate contrast between text and the
background it sits on
Adequate contrast is important not just for visually impaired audiences, but also
improves readability within a range of lighting conditions. Many design system
languages like Apple’s Human Interface Guidelines and Google’s Material Design
System align with WCAG 2.1 guidelines.
B4C40*??*D,/&8%#&*21''4##*D8"&48"%*E2D*F<G<=H)
The visual presentation of text and
images of text has a contrast ratio of at
least 4.5:1
A:!>D!BD1:?@:
Large-scale text (over 18pt) and images
of large-scale text have a contrast ratio of
at least 3:1
9!BE?1:?@:
SOURCE: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
17. > Inclusive Design 101!17 SOURCE: https://material.io/design/usability/accessibility.html#color-contrast
IJ%$304)*!%&48"%0*54#"6/*K1"@40"/4# IJ%$304)*!%8#(%00#*L8%/@*M"#*.5
While logos and “incidental” design elements are not required to meet contrast
standards, it’s smart to apply contrast guidelines to these items.
18. > Inclusive Design 101!18
N,,0#
(&&3#);;',/&8%#&'(4'O48<',$;
With a quick search of “contrast checker” online, tons of online tools are available to validate your color
usage. The most bulletproof method is to enter hex values for your foreground and background colors,
though some tools allow you to upload an image to test contrast.
In Photoshop, you can change your proof setup (under the “View” menu) to see what your layouts look like
for users with different types of color blindness.
(&&3);;%''4##"704A',0,8#<',$;
(&&3#);;$%&48"%0<",;&,,0#;',0,8;
(&&3);;---<78%/@-,,@<',$;%FF:;
19. > Inclusive Design 101!19
Make touch targets large enough and create adequate
space between them2
Mobile design has made 44 pixels the common standard for buttons. Our layouts
usually include many more active elements than just buttons. Touch targets refer to
parts of a screen that respond to user input. In addition to your designed element, a
target can include padding outside the visual bounds of that item.
44px
G,>,G*G1:!BE?: ,D?!91:!BE?: G,>,G*G1AC!<,>E
48px 8px
21. > Inclusive Design 101!21
Ensure the minimum font size in text blocks or
paragraphs is readable across devices3
All fonts inherently read differently due to characteristics like proportion and weight, so
it’s critical to test layouts across a range of screens. There are no hard and fast
standards around type size, though it’s a solid practice to not skew any smaller than
11pt — and this should be reserved for items like legal copy.
14pt
G,>,G*G18=D;1H=>: ,D?!918=D;1H=>: G,>,G*G19,>?12?,E2:
16-18pt 1.5
22. > Inclusive Design 101!22
Using live text is preferable to embedding copy in
graphic assets for major pieces of communication in
your digital layouts. This not only improves
accessibility, but is also beneficial for SEO practices.
There are situations when embedding text can make
sense. When your copy isn’t critical to understanding
context or taking a specific action, embedding is
acceptable.
B"C4*C<*I$74@@4@*N:34 .@4%0*B"/4*B4/6&(
Line length can also be a consideration to aid in
readability, especially at larger screen sizes. Wider
lines can make it more difficult to focus on text, while
narrow lines require the reader’s eye to move back
and forth more often.
Setting the width of text blocks at around 60-75
characters is considered ideal — and should not
exceed 80 characters.
23. > Inclusive Design 101!23
Be straightforward and consistent with language used
in calls to action4
Clearly communicating the actions that you’re allowing a user to take not only
promotes usability — this can also help with conversion goals. In addition to concise
and accurate button copy, also use other copy in proximity to offer context and
strengthen messaging.
Prioritize essential details
and use short, scannable
phrases.
Use active language to
tell the user what happens
when they interact.
Avoid general phrases like
“submit” and “click here.”
Use words that are direct
and can be understood
across reading levels.
Avoid brand-speak and
jargon.
8?1<=><,A? 8?1AC?<,H,< 8?1A,GC9?
25. > Inclusive Design 101!25
Write concise and useful alternative text for images and
other non-text assets5
B4C40*?*N4J&*?0&48/%&"C4#*21''4##*D8"&48"%*E2D*F<F<FH)
• All images should have appropriate and equivalent alternative text, particularly when
these images function as links.
• Images that are decorative or don’t convey content may be given empty alt text (alt=“”)
or coded as CSS backgrounds.
• Embedded multimedia should be identifiable via accessible text.
SOURCE: https://webaim.org/standards/wcag/checklist
For audio and video content to be accessible, it can require text transcripts or
synchronized captions. This is not required if these assets are considered “decorative,”
but should be considered when information is essential to task completion.
26. > Inclusive Design 101!26
Use more than one design factor to make actions
apparent6
SOURCE: https://material.io/design/usability/accessibility.html#color-contrast
A design can sometimes looker cleaner with only characteristic calling out an action,
like a color change to indicate a link, but isn’t the most usable approach. It’s smart to
use at least one additional indicator to convey that a user can interact with something
or highlight how to recover from an error.
Create variation using:
<3'37:#I(1F#%J6(
:#I(1A()'%-J
A6+K#
A%L# ,"3-3J7+K6)
27. > Inclusive Design 101!27
Make navigation and progress cues clear and
consistent to aid task completion7
Digital design has a lot in common with wayfinding practices for physical environments.
Users should always have a sense of where they are in a digital experience. They
should understand how they can move through this virtual space — and complete the
tasks they’re seeking to complete.
• Keep primary navigation consistent
• Avoid using brand-speak as navigation labels
• Mark the current location visually in the nav
• Also convey location through page titles,
breadcrumbs or in-page copy
9!>DG!B0A C!:2F!;A
• Show progress through linear flows by
visualizing steps completed, current status and
remaining steps for completion.
• Prior to starting a task flow, you may want to
inform your user about the steps required or
how long this flow may take to complete.
28. > Inclusive Design 101!28
IJ%$304)*P8,684##*2&43348#
SOURCE: https://material.io/archive/guidelines/components/steppers.html#
editable steps allow users to return to other items in the flow
feedback can be displayed upon completion of a step
mobile display of progress vertical orientation on mobile
29. > Inclusive Design 101!29
Clearly communicate when an error occurs and tell the
user how to resolve it8
Form design can be a unique UX challenge with its own set of best practices, though it
builds on other principles we’ve discussed. Our goal is to help users understand what
information we’re asking them to input before errors happen. But when errors do
occurs, it’s imperative to help correct them as easily as possible.
1. helper text
2. error message
3. icons
4. character counter
30. > Inclusive Design 101!30
IJ%$304)*Q,8$*54#"6/
SOURCE: https://material.io/design/components/text-fields.html#
• Labels stay present
when entering a
form field
• Helper text can
provide additional
instructions
• Fields can format
text like phone
numbers and dates
on entry
• An error is identified
by icon and color
change
• Copy explains the
requirement to
correct the error in
clear language
• Small animation
guide attention to
the error
31. > Inclusive Design 101!31
Accessibility standards can help guide many other
interactive elements towards being inclusive+
SOURCE: https://webaim.org/standards/wcag/checklist
WCAG 2.1 offers a viewpoint on many other digital features. And while the strictest
level of compliance takes a conservative view on interaction and motion are integrated,
these guidelines offer an opportunity to be reflective of our design decisions.
Additional considerations here include perspectives on use of automated carousels,
ability to engage of audio controls, how forms are designed, as well as integrating
animation and transitions.
33. > Inclusive Design 101
Everything we’ve discussed applies
!33
1
Contrast is important, as is
ensuring type sizes are large
enough to be legible. Line
height can help give
breathing room, as can
padding between elements.
B?!D!8,9,:; FB,:,>E ,>:?B!<:,=>
Email generally acts as a
driver prompting your user to
take an action, so be concise
in your messaging. Write in a
human tone with a balance
between brand and utility.
Ensure tap targets are
adequately sized and
appropriately placed. While
animations can grab
attention, make sure that
emails will still load quickly.
2 3
34. > Inclusive Design 101!34
IJ%$304
While the brand messaging remains with the
graphic area, the supporting content is pulled out
and set as live text. Not only will this text display
if images are not loaded, it can also scale easily
between different devices.
Setting buttons as with a color fill and live copy
also tends to improve email performance.
SOURCE: https://content.myemma.com/blog/why-does-email-accessibility-matter
1
2
1
2
1
Both the color contrast and size of this headline
are more legible on the revised design.
2
35. > Inclusive Design 101!35
IJ%$304
SOURCE: https://content.myemma.com/blog/why-does-email-accessibility-matter
3
4
3
4
The text size of the product information has been
increased to improve readability. The size also
helps make this info more scannable.
3
In addition to text sizes being increased here, the
brand mark contrast is improved to give this
proper visual priority.
Overall, the revised version is a slight bit longer
than the original email, but the edits improve the
ability to comprehend the message and desired
actions.
4
36. > Inclusive Design 101
The bottom line is mobile first
!36
We usually design emails at their largest breakpoint (somewhere around 600px wide),
and we should be building with their appearance and behavior on mobile devices at the
top of our minds. Content might scale, or it might break and stack responsively — or
you might swap content at different viewports.
No matter how we decide to code an email, some level of prototyping is key. You’re not
done designing until you’ve checked it out on a phone.
37. > Inclusive Design 101
Is image-only bulletproof?
!37 SOURCE: https://litmus.com/blog/why-you-shouldnt-send-image-only-emails
Designing emails that are composed only of images will maintain visual integrity, but
this approach comes with some considerations:
If your subscriber has images turned off, they won’t see your email.
The size of the email can cause it to load slowly. Or not at all, particularly when using retina display images.
Not including text hurts accessibility. And voice assistants like Alexa and Siri won’t read your content.
Your emails won’t be searchable in an email client.
38. > Inclusive Design 101
Design & code approaches
!38
G = 8 , 9 ? 1
! F ! B ?
B ? A C = > A , M ?
= B 1 2 ; 8 B , D
uses basic coding techniques to
create a single email rendering
that’s suitable for a range of
screen sizes, but is deferential to
smartphones
uses media queries or progressive
enhancement to control
formatting, layout and display of
email content based on the
subscriber’s screen size
SOURCE: https://litmus.com/blog/responsive-aware-and-mobile-aware-design-see-gains-as-marketers-focus-on-production-cost
39. > Inclusive Design 101!39
IJ%$304)*R1"*+,$$4
All images are designed to scale between
breakpoints. Styled type is embedded and
designed to be highly telegraphic on a mobile
phone.
1
Section headers are live copy on a solid-colored
background. This text scales down in size on
mobile slightly.
2
2
3
2
3
DESKTOP MOBILE
Body copy stays consistently sized between
breakpoints and wraps as the screen size
changes.
3
1 1
40. > Inclusive Design 101!40
IJ%$304)*S4&A%AP,8&48
The desktop menu exposes site categories, while
this is tucked into a functional menu on mobile
screens.
1
Feature blocks incorporate image and copy into
the asset. A different asset is displayed at large
and small breakpoints best take advantage of
screen aspect ratios.
2
1
2
3
1
2
3 The product grid breaks responsively on smaller
screens. The brand names and “Shop Now”
button are all live text.
3
DESKTOP MOBILE
41. > Inclusive Design 101!41
IJ%$304)*23%'4*ST
The product image is a unique asset, and both
headlines below this are cut as image assets. The
body copy that follows is live text set on a colored
background that wraps as the screen size
changes.
1
While the desktop view of this email staggers the
display of product images and descriptions, all
this information stacks responsively on mobile.
The brand, product name and price and cut as
image assets, and the description and link that
follow are live text.
Note that some of the text contrast ratios used in this
email don’t meet the guidelines we’ve discussed.
2
1
2
1
2
DESKTOP MOBILE
42. > Inclusive Design 101!42
IJ%$304)*K,,3
1
2
3
1
2
3
DESKTOP MOBILE
Multiple modules throughout this email follow the
behavior of this wellness asset by flattening all
info into the asset, while making sure that type
and buttons are large enough to be readable
across devices.
1
Content blocks behave responsively, using live
copy under images and stacking atop one another
on mobile.
2
While the 3-column grid setup stays consistent
across viewports for product highlights, the copy
and links are live, adjusting their orientation as
the screen size changes.
The “What We’re Wearing” headline atop this
section is cut as an image asset.
3
43. > Inclusive Design 101!43
IJ%$304)*?3304
1
2
1
2
DESKTOP MOBILE
This email uses the responsive stacking we’ve
seen in other examples. The headline is an image
asset, while the description and link are live copy.
1
The type in this block is consistent with the
behavior above. While the supporting illustration
looks similar on desktop and mobile, the smaller
viewport actually swaps in a different version of
this image.
Note that the “Find a session” link in the blue module
doesn’t follow the guideline of using more than one
visual factor to distinguish that it’s a link.
2
44. > Inclusive Design 101
#nofailmail
!44 SOURCE: https://litmus.com/blog/nofailmail-the-5-most-common-email-design-fails-and-how-to-avoid-them
Use a larger font size — a minimum of 14pt for body body and 22pt for headlines.
Make your call to action touch-friendly and give your messaging breathing room.
Slim down to one column to make your emails readable across more screen sizes.
Streamline your content.
Use alt text for images.
Use HTML and CSS to style buttons instead of image assets.
46. > Inclusive Design 101!46 SOURCE: https://instagram-press.com/blog/2018/11/28/creating-a-more-accessible-instagram/
Instagram launched enhancements for visually impaired users in late 2018.
While the platform is using image recognition to generate alternative text for
uploaded images, it also allows for custom alt text to be added when a photo
post is uploaded or edited. Video captions must be added before uploading.
47. > Inclusive Design 101!47 SOURCE: https://help.twitter.com/en/using-twitter/picture-descriptions
Twitter also allows for image descriptions to be added to posts. This option
can be enabled in the Accessibility settings under “Settings and Privacy.” Video
captions must be added before uploading.
48. > Inclusive Design 101!48 SOURCE: https://www.facebook.com/help/accessibility
Facebook uses automatic object recognition by default for alt text. When
editing a photo, the auto alt text can be overridden. It can also be helpful to
add descriptive copy within a photo’s caption. For video content, Facebook can
auto-generate subtitles or allow them to be custom uploaded.
49. > Inclusive Design 101!49 SOURCE: https://www.google.com/accessibility/products-features/
YouTube uses speech recognition technology to automatically caption videos,
which can be edited within the Creator Studio — or closed captions files can
be uploaded to support a video. A transcript can also be made available for
video content.
50. > Inclusive Design 101!50 SOURCE: https://newsroom.pinterest.com/en/post/making-pinterest-inclusive-for-all-levels-of-vision
Pinterest made a number of enhancements to their platform in 2018 to
support inclusive design, like screen reader support, contrast improvements to
their color scheme and bolder typography. Pinterest does not have any specific
accessibility settings for posting content, so it’s smart to include descriptive
copy to any pinned images.
L4U,84
?U&48
51. > Inclusive Design 101!51
Snapchat does not natively support accessibility features, so any accessible
enhancements should be made to assets that are shared on the platform.
Pay attention to font size and text contrast, especially when placed on top of
photographic images.
If using video captions, these need to be added prior to upload.
52. > Inclusive Design 101
Across social platforms…
!52 SOURCE: https://blog.hootsuite.com/inclusive-design-social-media/
Don’t overuse text in all caps.
Punctuation is read aloud by screen readers, so put hashtags and mentions at the end of your caption.
Emojis are also read by screen readers and voice assistants, so use them judiciously.
Make alt text meaningful by providing context and an adequate description, while being concise.
Use camel case to make hashtags more legible.
55. > Inclusive Design 101!55
V4U484/'4*2"&4#)*I$%"0
(&&3#);;4$%"0$,/O#<',$;/4-A%64A4$%"0A@4#"6/A74#&38%'&"'4#;"/U,68%3("'<(&$0Email Design Best Practices
(&&3#);;---<'%$3%"6/$,/"&,8<',$;70,6;4$%"0A$%8O4&"/6;XYFZ;YX;<<<The Really Good Guide to Email Design
(&&3#);;84%00:6,,@4$%"0#<',$;Really Good Emails
