Website Accessibility Workshop by Roy Rumaner and Bob Kadrie, with support from Devin S. Olson at Collabsphere 2018

1. First, Thank You!
What Do I Need to Ensure
My Website is Accessible to the
Visually Challenged?

2. CollabSphere 2018 Sponsors

3. Roy Rumaner
• Christian Brothers
Services
• Bank of America
• Canal Barge Company
• PNC Bank
• ABN-AMRO
• Teledyne
• Sierra Nevada Corp
• Morey Corp
• 4C Technologies
• Kimball Hill Homes
• TeamSpace
• Uline
• Abbott Labs
• Tenneco
• YMCA
• McDonald’s
Owner, Rumaner Consulting

4. • 3Com
• AT&T
• Apple
• Delta Air Lines
• Expedia
• The Center for Civil and
Human Rights
• Emory University
• General Motors
• The Woodruff Center
• The Poynter Institute
• J.M. Huber
• Rinnai Corporation
• Worldspan/Travelport/CitiGroup
• The Salvation Army
• Designed the first, fully ADA
compliant website for The Center
for the Visually Impaired
Chief Creative Officer, Red Pill Now
Bob Kadrie

5. • MicroAge, Inc
• MicroTech
• Sierra Nevada Corporation
• Honeywell
• Allied Signal
• Red Bull
• US Air
• The Salvation Army
• Bureau of Land Management
• US Fish & Wildlife Service
Master Solutioneer, Red Pill Now
Devin Olson

6. Grab These Files
bit.ly/collabsphere

7. A Word About Design Thinking
The concept of matching people's needs
with a viable business case and
technology solution – assuring customer
value AND market opportunity.

8. Accessibility Matters
Unplug your mouse for a day.

9. Accessibility Matters

10. Accessibility Matters
Contrast

11. Accessibility Matters
28% of all images on the web
have no meaningful <alt> attribute.

12. Accessibility Matters
81% of buttons have no useful attribute.

13. Accessibility Matters
ARIA “role” attributes, when used,
are likely to be used wrong.

14. Accessibility Matters
BEYOND THE NUMBERS
This is a civil rights issue
that’s actually easy to solve!

15. Accessibility Matters

16. Accessibility Matters
LEADERSHIP
POLICY
IMPLEMENTATION

17. Accessibility Matters

18. Remember This:
Inclusive design is better for business –
and it’s the right thing to do.

19. Five Simple Concepts for Screen Readers
One
Describe images in the <alt> tag,
provide transcripts for video.

20. Five Simple Concepts for Screen Readers

21. Five Simple Concepts for Screen Readers
TWO
Follow a logical, linear layout.

22. Five Simple Concepts for Screen Readers
THREE
Structure content using HTML5

23. Five Simple Concepts for Screen Readers
FOUR
Build for keyboard use.

24. Five Simple Concepts for Screen Readers
FIVE
Add descriptions to links
and headings.

25. Five Simple Concepts for Screen Readers

26. Five Simple Concepts for Low Vision Visitors
ONE
Add controls for contrast
and font size.

27. Five Simple Concepts for Low Vision Visitors

28. Five Simple Concepts for Low Vision Visitors
TWO
Publish all information on Web pages.

29. Five Simple Concepts for Low Vision Visitors
THREE
Use a combination of “safe” colors,
shapes, and text.

30. Five Simple Concepts for Low Vision Visitors
FOUR
Follow a logical, linear layout.

31. Five Simple Concepts for Low Vision Visitors
FIVE
Put buttons and notifications
in context.

32. Color Matters
COLOR BLINDNESS
Red-Green Blue-Yellow Monochromacy

33. Color Matters

34. Color Matters
https://coolors.co

35. Color Matters
https://coolors.co

36. Color Matters
https://coolors.co

37. Remember This:
UNIVERSITY OF WASHINGTON
“If you can develop a website,
you can develop an accessible one.”

38. WCAG Guidelines
The Web Content Accessibility Guidelines are a set of technical standards, not
legal ones.
• The WCAG has 4 Principles (P-O-U-R) that are broken down into 12 Guidelines
• Those 12 Guidelines are further broken down into Success Criteria
• For each Success Criteria there are 3 levels of Conformance
Each of the guidelines in WCAG have measurable success criteria divided into the levels of A
(lowest), AA and AAA (highest). More A’s equals more demands, but better accessibility
when met. A, AA, AAA

39. POUR: Four Principles of Accessibility
1. Content must be Perceivable
2. Interface components in the content must be Operable
3. Content and controls must be Understandable
4. Content should be Robust enough to work with current
and future assistive technologies (AT)

40. POUR: Four Principles of Accessibility
• 1. Perceivable
• 1.1 Provide text alternatives for non-text content like images
• 1.2 Offer captions or text summaries for audio and video
• 1.3 Structure content to be programmatically identified and write it to be presented
in different ways
• 1.4 Design content to be easy to read and listened to (good contrast, volume control)
• 2. Operable
• 2.1 All functionality should be available just using a keyboard
• 2.2 There should be enough time to read content and perform wanted tasks
• 2.3 Avoid designing content that might cause seizures
• 2.4 Help users navigate and find content as much as possible
• 3. Understandable
• 3.1Write easy-to-read text with assistive technologies in mind
• 3.2 Design content and the interface to behave in predictable ways
• 3.3 Help users to avoid and correct mistakes when entering input
• 4. Robust
• 4.1 Provide maximum compatibility with as many web browsers as possible

41. Levels of Conformance
Level A
We must satisfy these requirements, otherwise it will be impossible
for one or more groups to access the web content
Level AA
We should satisfy these requirements, otherwise some groups
will find it difficult to access the web content
Level AAA
We may satisfy these requirements, in order to make it easier for some
groups to access the web content

44. What’s New for WCAG 2.1
In the Summer of 2018, WCAG 2.1 is set to be released with
seventeen new guidelines that focus on improving accessibility for users
with cognitive disabilities and for users who browse websites
on mobile devices like tablets and smartphones.

45. What’s New for WCAG 2.1
Before explaining the new guidelines in WCAG 2.1, you should know that
WCAG 2.1 is backward compatible with WCAG 2.0. This means that:
• The previous categories and guidelines still apply
• The numbering still applies
• The basic principles still apply
• The three levels of success criteria (A, AA, AAA) still apply

46. What’s New for WCAG 2.1
1.3.4 Identify Common Purpose (AA)
For the following this guideline, the meaning of each input field must be able to be determined
programmatically. In other words, a piece of code must be able to tell what is expected to be entered by a
user or what’s the meaning of a piece of entered information.
Doing this correctly will make it possible for a user’s browser to autofill input fields based on data previously
entered by the user. Great! Having to enter less input is always nice.
Technically, this has to be true if:
• The implementation is done using technologies for identifying expected meaning of input data.
• The input field uses the Autofill markup like in the following code snippet
<form>
<label for="input-email">Email address</label>
<input id="input-email" autocomplete="email" type="email">
<label for="input-password">Password</label>
<input id="input-password" autocomplete="current-password" type="password">
<button name="button-sign-in">Sign in</button>
</form>

47. What’s New for WCAG 2.1
1.3.5 Identify Purpose (AAA)
This guideline says that the purpose of interface components, icons and certain sections must be able to be
identified programmatically.
For example: The user should not just understand that a button is a button. He or she should understand
what the button does, what its purpose is.
HTML should always be written correctly, so that assistive technologies like screen readers can do things like:
• Identify sections like header, navigation, main content area and so on for easier navigation.
• Provide text alternatives to icons, which otherwise can sound weird when being read to users.
• Differentiate between different subheadings like H2, H3 and H3 subheadings for finding wanted
content faster.
Following this guideline will improve accessibility for users of assistive technologies like screen readers.

48. What’s New for WCAG 2.1
1.3.5 Identify Purpose (AAA)
This guideline says that the purpose of interface components, icons and certain sections must be able to be
identified programmatically.
For example: The user should not just understand that a button is a button. He or she should understand
what the button does, what its purpose is.
HTML should always be written correctly, so that assistive technologies like screen readers can do things like:
•Identify sections like header, navigation, main content area and so on for easier navigation.
•Provide text alternatives to icons, which otherwise can sound weird when being read to users.
•Differentiate between different subheadings like H2, H3 and H3 subheadings for finding wanted
content faster.
Following this guideline will improve accessibility for users of assistive technologies like screen readers.

49. What’s New for WCAG 2.1
1.4.10 Reflow (AA)
This guideline states that users must be able to browse a website using a 320 pixel wide screen without
having to scroll horizontally. In other words, your website must be responsive.
Why a width of 320 pixels? Probably because this is the smallest device width of a lot of popular
smartphones.
Following this guideline will improve accessibility for all users visiting your website on a smartphone. It
will also benefit users with visual impairment who definitely will zoom in (up to 400 % ) on desktop
browsers.
Note: It’s acceptable to allow horizontal scrolling for content that often requires it like maps, data tables
with many columns and wide diagrams.

50. What’s New for WCAG 2.1
1.4.11 Non-text contrast (AA)
Having high contrast between pieces of text and their backgrounds is one of the best and most
important things you can do to ensure great accessibility on your website.
In this guideline the requirement for high contrast extends from regular page text, to text on interface
components (buttons) as well as for colors used in non-text content (infographics and diagrams).
Tip: For measuring contrast, I recommend Lea Verou’s excellent tool at:
leaverou.github.io/contrast-ratio
Following this guideline will improve accessibility for all users with different kinds of visual impairment.

51. Get These Files
10 MINUTE BREAK
bit.ly/collabsphere

52. Workshop
Let’s look at a few examples.

53. Workshop
Dummy Website Files
bit.ly/collabsphere

54. Questions
How may we help you?