How to engineer accessible websites

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

#heweb18 @bamadesigner
• Intro to accessibility and why it’s important
• Overview of WCAG accessibility standards
• ARIA and how to best implement for assistive technology
• How to add accessibility testing to your development workflow
• Common markup errors and how they affect users
• Easy accessibility fixes that make a big impact
This workshop will cover:

Everything from this workshop:
https://bamadesigner.com/heweb18

Web accessibility refers to  
the inclusive practice of  
removing barriers that prevent
interaction with, or access to,
websites by people with disabilities.

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?

Indifference:
- lack of interest, concern, or sympathy. unimportance.
Ignorance:
- lack of knowledge or information
Why do we publish inaccessible websites?

The web, by default, is accessible.

The web, by default, is accessible.
If your web site is inaccessible,
its because you made it that way.

Accessibility is not add-on functionality.

Accessibility is an inclusive practice  
which creates a high quality UX for all.

Accessibility is:

Accessibility is:
understanding diverse needs

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

Everyone uses technology 
DIFFERENTLY.
#heweb18

Accessibility is:
thoughtful design/UX

To provide accessible technology,  
we have to consider diverse
needs during every step of a
project.

Working together during every step:
PLANNING CONTENT
DESIGN (UI/UX) ENGINEERING
MAINTENANCE
DEAN DECIDES THEY  
WANT A SLIDER

Much easier and cheaper  
to design for (and maintain)
accessibility during your project
than to handle after the fact.

Accessibility is:
thoughtful design/UX
building with valid markup

• Study how the web works
• Learn web standards, valid HTML
• Learn WCAG, find accessibility courses
Will help you understand common barriers, 
which will help you unlearn poor practices
Most important for engineers?
Education
Quality 
Assurance

• Use tools to validate HTML markup
• Test for keyboard only, screen readers, etc.
• User testing is better than software
•Test constantly while in development
•Test often once its published
Most important steps for engineers?
Education
Quality 
Assurance

<body>
<h1>How to engineer accessible websites</h1>
<p>When your website is accessible, everyone can consume your information
freely. Visually-impaired users can visit your website using a screen reader.</p>
<h3>This workshop will cover:</h3>
<ul>
<li>Intro to accessibility, universal design, and why it’s important</li>
<li>Overview of WCAG accessibility standards</li>
</ul>
</body>

<body>
<p>When your website is accessible, everyone can consume your information
freely. Visually-impaired users can visit your website using a screen reader.</p>
<h2>This workshop will cover:</h2>
<ul>
<li>Intro to accessibility, universal design, and why it’s important</li>
<li>Overview of WCAG accessibility standards</li>
</ul>
</body>

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

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

Requires all electronic and information technology developed,
procured, maintained, or used by federal agencies to be accessible.
• Including computer hardware and software, websites, phone
systems, and copiers.
• From 2000 to 2018, Section 508 had its own standards.
Federal law: Section 508

As of January 2018, Section 508 said “nevermind” and
declared that websites have to meet WCAG 2.0 AA.
• Much less confusing!
Federal law: Section 508

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

• 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?

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
• Version 2.0 was published in December 2008
• WCAG released version 2.1 in June 2018
Web accessibility standards:

WCAG 2.0 Quick Reference

https://www.w3.org/WAI/WCAG20/quickref/
Walks you through techniques and failures!

WCAG 2.0 Checklists:

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

The four principles of accessibility:
• Perceivable
• Operable
• Understandable
• Robust

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.)

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

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.

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

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.

•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:

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.

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:

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

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

.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:

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:

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?

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?

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:

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

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?

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

Actions without deﬁned 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?

Using color to convey information / insufﬁcient 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?

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:

The link is invisible to those who can’t see blue:
the Web.

the Web.
If a different color AND an underline is used:

Then the link would become visible:
the Web.

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:

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

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”.

<body>
<p>When your website is accessible, everyone can consume
your information freely.</p>
<frame src=“ad.html" style="border:none;"></frame>
</body>

CHALLENGE!
It’s time for a good ole’ fashioned
#heweb18 #youbetterwork

1.Open your web pages
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

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

Defines what an element is or does.
Main features in ARIA: Roles
•role=“navigation” (<nav>)
•role=“complementary” (<aside>)
•role=“banner”
•role=“search”
•role=“tabgroup"

<form role=“search”></form>
Main features in ARIA: Roles

Define properties of elements, which can be
used to give them extra meaning or semantics.
Main features in ARIA: Properties
• aria-required=“true"
• aria-labelledby=“label"
• aria-current=“page”

ARIA can add extra labels and descriptive text that  
is only exposed to assistive technology APIs.
<button aria-label=“Conﬁrm your membership">Conﬁrm</button>
Main features in ARIA: Properties

Special properties that define the current
conditions of elements.
3 main features in ARIA: States
• aria-hidden=“true"
• aria-disabled=“true”
• aria-live=“true"

ARIA can make parts of your page "live", so they
inform assistive technology when they change.
<div aria-live="true">
<p>I’m a live feed of alerts for an event that  
needs to update every 30 seconds.
</div>
3 main features in ARIA: States

ARIA example:
<div role="contentinfo">
<p>HighEdWeb 2018 is the annual conference of the Higher Education
Web Professionals Association, created by and for higher education
professionals exploring the unique digital issues facing colleges and
universities.</p>
</div>
<div role="alert">
<p>It’s a day ending in “y” so the weather is beautiful outside.</p>
</div>

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

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

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

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

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

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

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

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

1.Open https://bamadesigner.com/heweb18
2.Install at least 2 different tools
3.Use them to test your web pages
4.Document common and surprising issues
Challenge #2

1.Fix at least one accessibility issue.
2.Add at least one ARIA role, property, and state.
Challenge #3

So what’s required  
to engineer accessible
websites?
#a11y

#1: 
Learn/follow web standards.
Learn/follow WCAG.
#a11y

#2: 
Understand user needs
and common barriers.
#a11y

#3: 
Use valid HTML markup.
#a11y

#4: 
Learn/use ARIA to ﬁll gaps.
#a11y

#5: 
Test constantly while building.
Test often once published.
#a11y

#6: 
Priority on user testing.
#a11y

When you plan for accessibility,
YOU WON’T WORK HARDER.
YOU’LL WORK SMARTER.

A community and conference for web
professionals, educators and people
dedicated to the confluence of
WordPress in higher education.
https://wpcampus.org 
@wpcampusorg / #WPCampus
I HAVE
SWAG!

ANY
QUESTIONS?
#heweb18
Rachel Cherry
@bamadesigner 
bamadesigner.com
wpcampus.org

How to engineer accessible websites

More Related Content

What's hot

Similar to How to engineer accessible websites

Recently uploaded

How to engineer accessible websites