Learn best practices for creating accessible information architecture and web experience.

1. @annaecook
World IA Day 2020 - Denver
Accessible Thinking
in your IA
1

2. @annaecook
Hi, I’m Anna (she/her/hers)
! Senior Product Designer at Recurly
🎓 Master's Student in Design at CU ATLAS
♿ Dedicated to building inclusive experiences
🎨 Artist, gamer, cat mom to Felix and Onyx
WHO AM I?
2

3. @annaecook
The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.
“
– Tim Berners-Lee, Director of the World Wide Web Consortium
3

4. @annaecook
The basics of web
accessibility
4

5. @annaecook
Web Accessibility
Web accessibility means that websites, tools, and
technologies are designed and developed so that
people with disabilities can use them.
WHAT IS WEB ACCESSIBILITY?
5

6. @annaecook
The Americans with Disabilities
Act (ADA) of 1990
The ADA is a broad civil rights law that prohibits
discrimination against people with disabilities in
employment, architectural design, transportation,
examinations and courses, and other services
offering public accommodation.
WCAG Guidelines
6

7. @annaecook7
Vision
TYPES OF DISABILITIES
• Blindness
• Low vision
• Degenerative vision loss
• Colorblindness

8. @annaecook8
Auditory
TYPES OF DISABILITIES
• Cognitive hearing loss
• Neural hearing loss
• Deafness

9. @annaecook9
Speech
TYPES OF DISABILITIES
• Muteness
• Cognitive disorders which
affect speech

10. @annaecook10
Motor
TYPES OF DISABILITIES
• Paralysis
• Muscular and joint conditions
• Reduced dexterity
• Nerve injury

11. @annaecook11
Cognitive
TYPES OF DISABILITIES
• Memory impairments
• Learning disabilities
• Attention disorders
• Seizure disorders
• Reading disorders

12. @annaecook
Permanent Temporary Situational
Touch
One arm Arm injury New parent
See
Blind Cataract Distracted driver
Hear
Deaf Ear infection Bartender
Speak
Non-verbal Laryngitis Heavy accent
Source: “Inclusive: A Microsoft Design Toolkit” by Microsoft
12

13. @annaecook
THE BUSINESS VALUE
15%
of people across the globe
have disabilities
$6 trillion
global purchase power of
the disabled community
81%
of users pay more for
products on accessible sites
2,258
federal web accessibility
lawsuits were filed in 2018
3x
than the number of web
accessibility lawsuits in 2017
20%
of components made
without accessibility in mind
have to be remade
13

14. @annaecook
A well-built information
architecture inherently
makes your content
more accessible.
GOOD NEWS EVERYBODY
14

15. @annaecook
• Relating to disabled users
• Navigation & Skip Links
• Page Titles & Header Structure
• Language
• Semantic Code & Landmarks
• Links
• Reading Order & Focus
WHAT WE WILL DISCUSS:
15

16. @annaecook
How do we make our
information
architecture even
more accessible?
16

17. @annaecook
Relate to users with disabilities
• Watch videos showing disabled users
interacting with common products to
see consistent hurdles/positives
• Build personas that have disabilities
baked-in
• Take time to interview people with
disabilities, in the same way you
would interview your user base
• Conduct testing with disabled users
to verify that your work is effective
"The single best thing
you can do to improve
your site's accessibility
is to test it often, and
continually smooth out
the parts that confuse
everyone."
Steve Krug, Don’t Make
Me Think
17

18. @annaecook
www.w3.org/WAI/people-use-web/user-stories/
18

19. @annaecook
Global Navigation
• Navs should use <nav> element or role=“navigation”
• Navs should always appear at the same location in the same order
• Navs should show what page is currently active/visible both visibly and
to screen readers (use aria-label, aria-labelaria-labelledby, or aria-
describedby)
19

20. @annaecook
Skip Navigation
• A keyboard-functional "skip" link should be provided to allow keyboard
users to navigate directly to the main content.
•The "skip link" should be the first focusable element on the page.
• A skip link must be either visible at all times or visible on keyboard focus.
20

21. @annaecook
Page Titles
• Should inform users what is on the page
• Should be concise, yet unique to each page (if possible)
• Should match (or be very similar to) the top heading in the main content.
• If a page is the result of a user action or scripted change, the text of the
<title> should describe the result or change to the user
(for example, if a user is searching, it should show the search term)
21

22. @annaecook
Page Title - Site Title
Best practice:
Harry Potter™ | LEGO
Example:
Harry Potter™ - Search Results | LEGO
Example of page changed from user input:
22

23. @annaecook
Header Structure
• Headings should outline the content of the page
• Headings should be accurate, informative, and concise
• Any text that acts as a heading visually/structurally should be tagged
•Do not use header tags for items that aren’t actually headers
• Avoid skipping levels, for example going from an <H1> to <H3>
• The beginning of the main content should start with <H1>
• Most web pages should have only one <H1>
23

24. @annaecook24

25. @annaecook
Semantic Code & Landmarks
• Landmarks should be used to designate pre-defined parts of the layout
(<header>, <nav>, <main>, <footer>, etc.)
• Use HTML5 to integrate landmarks in your page rather than <div>
• Everything should live in a landmark region
• Try to keep the number of landmarks on a page low
• If the same landmark is used more than once, use the aria labels to make
them distinct to screenreader (except banner, main and content info)
25

26. @annaecook
What is Aria?
• Accessible Rich Internet Applications (ARIA) is a set of attributes that
define ways to make web content and web applications (especially those
developed with JavaScript) more accessible to people with disabilities.
• It supplements HTML so that interactions and widgets commonly used in
applications can be passed to assistive technologies when there is not
otherwise a mechanism.
• For example, ARIA enables accessible navigation landmarks in HTML4,
JavaScript widgets, form hints and error messages, live content updates,
and more.
26

27. @annaecook27

28. @annaecook28

29. @annaecook
Links & Buttons
• Links have to be marked using the <a> element
• Links should have labels that clearly indicate their purpose
• Don’t use "click here," “more," or other repetitive phrases as links.
• Link labels should be consistent if the same link is used
• Screen reader users are informed whether something is a button or a
link so links and buttons should be marked differently
•
29

30. @annaecook
Links & Buttons
• A link that opens in a new window or tab should indicate that it opens in
a new window or tab
• A link to a non-web file should indicate the file or destination type.
30

31. @annaecook
Reading Order & Focus
•The document object model (DOM)
order determines the reading order
and focus placement
• Reading order must be logical and
intuitive
•The navigation order of focusable
elements MUST be logical and
intuitive.
31

32. @annaecook
IN CONCLUSION:
• Accessibility is a human right, and competitive
advantage when done well
• Relating to your disabled users is key to building
any work that can be accessible
• Accessibility is a key consideration from the
beginning to the end of any project
• The tools we discussed today are one step
forward, but more can always be done!
32

33. @annaecook
www.annaecook.com
linkedin.com/in/annaecook
twitter.com/annaecook
Questions?
33

34. @annaecook
Quick Resources
•WCAG Guidelines
•WCAG Quickref
•Deque Axe
•Deque University
•A11Y Project
•Teach Access Careers
•Tools and Techniques
34