1. Rachel Cherry
@bamadesigner
bamadesigner.com
wpcampus.org
HOW TO CREATE
ACCESSIBLE
WEBSITES

2. #WCBOS #a11y @bamadesigner
• Intro to accessibility, universal design, and why it’s important
• WCAG accessibility standards and legal concerns
• How to add accessibility testing to your workflow
• Common accessibility issues and how to address them
• Easy accessibility fixes that make a big impact
This workshop will cover:

3. Everything from this workshop:
bamadesigner.com/wcbos

4. #WCBOS #a11y @bamadesigner
Web accessibility refers to
the inclusive practice of
removing barriers that prevent
interaction with, or access to,
websites by people with disabilities.

5. #WCBOS #a11y @bamadesigner
Data shows 1 in 5 people have a disability.
You could be excluding 20%
of your students (and humanity) from
access to education and information.
Why is accessibility important?

6. Information wants to be free
ACCESSIBLE
Information needs to be
#WCBOS #a11y

7. How do we ensure the
digital world is accessible?
VISUAL HEARING
MOTOR COGNITIVE
Deafness and hard-of-hearingBlindness, low vision, color-blindness
Inability to use a mouse,
slow response time,
limited fine motor control
Learning disabilities, inability to
remember or focus on large
amounts of information

8. #WCBOS #a11y @bamadesigner
The four principles of accessibility:
• Perceivable
• Operable
• Understandable
• Robust

9. #WCBOS #a11y @bamadesigner
Perceivable:
Information (and user interface components)
must be presentable to users in ways they can
perceive.
Must be available to the senses either through
the browser or through assistive technologies
(e.g. screen readers, screen enlargers, etc.)

10. Perceivable:
• Provide text alternatives for non-text
content, like images, video, and audio
• Offer captions, transcripts, and audio
descriptions for audio and video
• Design content to be easy to read and
listened to, e.g. good contrast, volume
control

11. #WCBOS #a11y @bamadesigner
Operable:
User interface components and navigation
cannot require interaction that a user cannot
perform.
Users can interact with all functionality using
either the mouse, keyboard, or an assistive
device.

12. Operable:
• All functionality should be available using a
keyboard
• There should be enough time to read
content and perform functionality
• Avoid designing content that might cause
seizures
• Help users navigate and find content

13. #WCBOS #a11y @bamadesigner
Understandable:
Users must be able to understand the
information as well as the operation of the user
interface.
Content is clear and limits confusion and
ambiguity.

14. #WCBOS #a11y @bamadesigner
• Write easy-to-read text with assistive
technologies in mind
• Design content and the interface to behave
in predictable ways
• Help users to avoid and correct mistakes
when entering input
Understandable:

15. #WCBOS #a11y @bamadesigner
Robust:
Content must be robust enough that it can be
interpreted reliably by as many web browsers
and agents as possible, including assistive
technologies.
Users must be able to access the content as
technologies advance.

16. How do we create
ACCESSIBLE
websites?
#WCBOS #a11y

18. The challenge:
Change your
perspective.

19. Universal design is the design of products and
environments to be usable by all people, to the
greatest extent possible, without the need for
adaptation or specialized design.
RONALD L. MACE, FOUNDER OF THE CENTER FOR UNIVERSAL DESIGN
UNIVERSAL DESIGN
New perspective:

20. #WCBOS #a11y @bamadesigner
Where accessible design considers
the needs of people with disabilities.
Universal design considers
the needs of a diverse human
population.

21. Everyone uses technology
DIFFERENTLY.
#WCBOS #a11y

24. #WCBOS #a11y @bamadesigner
To achieve universal design (and provide
accessible technology), we have to
consider diverse needs during
every step of a project.

25. #WCBOS #a11y @bamadesigner
Much easier and cheaper
to design for (and maintain)
accessibility during your project
than to handle after the fact.

26. #WCBOS #a11y @bamadesigner
Working together during every step:
PLANNING CONTENT
DESIGN (UI/UX) ENGINEERING
MAINTENANCE

27. 1. Focus on high quality UX and valid HTML markup
• Follow web standards to provide robust experience
2. Learn web accessibility standards and understand
common barriers
• Adopt checklists into every step of your workflow
3. Use tools to test for violations, priority on user testing
• Software really helps, but human experience is king
How to create accessible websites:

28. • Web accessibility is more prominent in higher education
because the only laws that exist are for
organizations that receive federal funding.
Legal implications/standards

29. The only laws that exist are for
organizations that receive federal funding.

30. • Web accessibility is more prominent in higher education
because the only laws that exist are for
organizations that receive federal funding.
• There is now (thankfully) only one set of web
standards for accessibility: WCAG 2.0.
• There used to be two.
Legal implications/standards

31. General businesses and organizations are not required by law,
but still receive civil suits. To name a few:
What about general businesses?

32. • Web Accessibility Laws & Policies
• https://www.w3.org/WAI/policies/
• Introduction to Laws Throughout the World
• https://webaim.org/articles/laws/world/
What about other countries?

33. The Web Content Accessibility Guidelines (WCAG) are
published by the Web Accessibility Initiative (WAI) of the
World Wide Web Consortium (W3C).
• WCAG has 3 levels: A, AA, and AAA
• WCAG version 2.0 AA is the industry standard
• Current version was published in December 2008
• WCAG is drafting version 2.1 was released June 2018
Web accessibility standards:

34. WCAG 2.0 Quick Reference
https://www.w3.org/WAI/WCAG20/quickref/
Walks you through techniques and failures!

36. WCAG 2.0 Checklists:
• http://webaim.org/standards/wcag/checklist
• https://a11yproject.com/checklist
• https://www.wuhcag.com/wcag-checklist/
• Create your own!

37. Pages without proper heading structure/order
• Are your headers in order? h1, h2, h3, etc.
• Allows content to be readable without a stylesheet, for
those who do not navigate visually.
Common website barriers:

38. Non-text content without a text equivalent
• Provide alt attributes or captions for images
• Provide captions and audio descriptions for videos
• Provide transcripts for audio recordings
Common website barriers:

39. Without alternative text, life-saving information in this
graphic is not available to visually impaired users.

40. .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
position: absolute !important;
white-space: nowrap;
height: 1px;
width: 1px;
overflow: hidden;
}
How to hide content visually:

41. The point of providing a text
equivalent is to convey the same
information and context as people
who can see the image.
DO NOT: Simply write “red car”.
DO: Ask yourself “why is this picture
of a red car on the page?
PRO TIP for writing image alt text:

42. Being unable to access functionality by keyboard
• Can you access all actions, functionality and content?
• Can you open “popups”, interact with them, close them?
• Does any functionality have keyboard trap?
Common website barriers:

43. Unable to visually determine if an element has focus
• If someone is navigating your site by keyboard, could they
determine where they are on the page?
• Could they determine which form field has focus?
• Could they determine if a button can be pressed?
Common website barriers:

44. NEVER: Remove :focus CSS styles
EASY FIX:
Search your CSS for usage of :hover.
Test those elements on your site and
make sure there are equivalent :focus
styles.
PRO TIP to ensure element focus:

45. PRO TIP to ensure element focus:
button {
background-color: #d8d8d8;
color: #222;
&:focus,
&:hover {
background: #222;
color: #fff;
}
}

46. Unable to skip large blocks of repeatable content
• The most common barriers for guests are having to tab
through the header and menu on every page.
• Do you use ARIA to help label sections of your page?
Common website barriers:

47. <a id=“skip” href="#content">Skip to Main Content</a>
#skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip:focus {
position: static;
width: auto;
height: auto;
}
How to provide “Skip to content”:

48. Actions without defined purpose or context
• Do your actions (links and buttons) provide clear context
about what’s going to happen? Never use “click here”.
• Is the HTML markup for your actions valid?
• Are you using a link when you should be using a button?
Common website barriers:

49. Using color to convey information / insufficient contrast
• Is there clear contrast between the color of your text
and its background color? Minimum: 4.5:1
• If a guest is color blind, would they have the same
experience as any other guest?
Common website barriers:

50. Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
If color is the only method for conveying a link:

51. The link is invisible to those who can’t see blue:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.

52. Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
If a different color AND an underline is used:

53. Then the link would become visible:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.

54. While not an official standard, responsive
web design is important to ensure your site
can be viewed on assistive devices of
various sizes.
Other considerations:

55. Another important consideration is
download speeds/order to ensure access
to those who don’t have access to high
speed Internet.
Other considerations:

56. Be mindful of your language. Avoid
sentences like “See our home page for
more information”. Use non-sensory
language instead, e.g. “Visit our home
page”.
Other considerations:

57. Spec created to improve accessibility of
applications by providing extra information
to screen readers via HTML attributes.
ARIA (Assistive Rich Internet Applications)

58. <div role="contentinfo">
<p>WordCamp Boston is an annual conference
celebrating WordPress, the open source software that
powers over 28% of the internet.</p>
</div>
<div role="alert">
<p>Have you said “Hi Roy” today? Go to hiroy.club
to greet Roy and make Rachel happy.</p>
</div>
ARIA example:

59. GOOD MARKUP
The foundation for good accessibility is
#WCBOS #a11y
Which also improves your SEO!

61. CHALLENGE!
It’s time for a good ole’ fashioned
#WCBOS #a11y #youbetterwork

62. 1.Open your website’s home page
2.Navigate to every action element on the page
3.Interact with all functionality on the page
4.BUT YOU CAN’T USE YOUR MOUSE
5.Document any issues.
Challenge #1

63. an accessibility evaluation tool from WebAIM
http://wave.webaim.org
• Free in-browser testing
• Free Chrome extension
• Premium API
TESTS FOR: Section 508 and WCAG 2.0 A/AA

64. an accessibility visualization toolkit
http://khan.github.io/tota11y
• Alt text and confusing link text
• Color contrast
• Heading structure
• Form labels
• ARIA landmarks
TESTS FOR:
• Javascript file that
places button on site
• Free Chrome
extension

65. client-side script that checks HTML source code
and detects violations of a defined coding standard
http://squizlabs.github.io/HTML_CodeSniffer
• Copy/paste code for quick testing
• Free bookmarklet for in-browser testing
TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA

66. an automated accessibility testing library
http://pa11y.org
• Section508
• WCAG 2.0 A/AA/AAA
TESTS FOR:
• Web dashboard
• JSON web service
• Command line
PROVIDES:

67. Javascript library that executes automated accessibility
testing inside your testing framework or browser of choice
http://www.deque.com/products/axe
• Free Javascript library
• Free Chrome extension

68. Material Design:
Color Tool
https://material.io/color/
Allows you to measure
the accessibility level of
any color combination.

69. wA11y - The Web Accessibility Toolbox
https://wordpress.org/plugins/wa11y/
WORDPRESS PLUGINS

70. WORDPRESS PLUGINS

71. BROWSER TOOLS

72. BROWSER TOOLS

73. BROWSER TOOLS

74. Take advantage of
in-browser testing tools to
evaluate product demos
before you purchase.
ACCESSIBILITY PRO TIP:
#WCBOS #a11y

75. 1. Open https://bamadesigner.com/wcbos/
2. Install at least 2 different tools
3. Use them to test your website’s home page
4. Document common and surprising issues
Challenge #2

76. 1. Focus on high quality UX and valid HTML markup
• Follow web standards to provide robust experience
2. Learn web accessibility standards and understand
common barriers
• Adopt checklists into every step of your workflow
3. Use tools to test for violations, priority on user testing
• Software really helps, but human experience is king
How to create accessible websites:

77. #WCBOS #a11y @bamadesigner
The foundation of good accessibility is
good design, markup, and UX
which creates a high quality experience
for everyone.

78. #WCBOS #a11y @bamadesigner
Where accessible design considers
the needs of people with disabilities.
Universal design considers
the needs of a diverse human
population.

79. #WCBOS #a11y @bamadesigner
When you plan for accessibility,
YOU WON’T WORK HARDER.
YOU’LL WORK SMARTER.

80. Everything from this workshop:
bamadesigner.com/wcbos

81. Rachel Cherry
@bamadesigner
bamadesigner.com
wpcampus.org
ANY
QUESTIONS?
#WCBOS #a11y