Optimizing Your Website for Accessibility

Optimizing Your
Website for
Accessibility
#a11y
Rebecca Gill | Web Savvy Marketing | diySEOcourses.com
Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM

Rebecca Gill | Web Savvy Marketing | diySEOcourses.com
Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM
Accessibility matters to both humans and SEO.

-Wikipedia entry for “Web Accessibility”
Web accessibility refers to the inclusive
practice of removing barriers that prevent
access to websites by people with disabilities.
When sites are correctly designed, developed
and edited, all users have equal access to
information and functionality.

Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM
Web Savvy Marketing Copyright © 2018, All Rights Reserved
4 Principles of Accessibility
1. Perceivable
2. Operable
3. Understandable
4. Robust
P O U R

1. Perceivable
2. Operable
3. Understandable
4. Robust
Any discussion of web accessibility is
based upon the assumption that
people need to be able to perceive web
content.
They need to be able to input the
information into their brain so that
they can process it.
If the information cannot get into the
brain, it is inaccessible.
-https://webaim.org/articles/pour/perceivable

Examples: Perceivable
Remove titles from your links
Bad: <a href=“/contact/” title=“Contact Us”>Contact Us</a>
Good: <a href=“/contact/”>Contact Us</a>
Add meaningful “alt” text to images
Bad: <img src=“/img1249438743.jpg” alt=“img1249438743” />
Still bad: <img src=“/img1249438743.jpg” alt=“” />
Good: <img src=“/red-balloon.jpg” alt=“smiling kid holding a red balloon” />
Use form labels (hide with CSS if you want, but make it visible in the HTML output)
<form>
<label class=“hide-this-if-you-want”>First Name</label>
<input type=“text” name=“first-name” />
</form>

Color blindness
Normal MonochromaticTritanopia
https://www.toptal.com/designers/colorfilter

Color contrast
• Foreground and background color need to be
sufficiently different so that text is
comfortably easy to read.
• 3:1 ratio for large scale text (18pt or 14pt bold)
• 4.5:1 ratio for other text
https://contrastchecker.com/

1. Perceivable
2. Operable
3. Understandable
4. Robust
Not everyone uses a standard
keyboard and mouse to access the
web. Some people use adaptive
devices or alternative devices that
accommodate their disabilities.
Keyboard accessibility is one of the
most important principles of Web
accessibility because it cuts across
disability types and technologies.
- https://webaim.org/articles/pour/operable

Give users enough time to read and use content
Bad: Moving/blinking content that can’t be paused or stopped.
Bad: Alerts that can’t be suppressed or postponed.
Bad: Authentication session expires and data is lost when user re-authenticates
Examples: Operable
Make all functionality available from a keyboard
Bad: Using the tab button to move through a form and jumping from a
form field focus to some other spot on the page.
Good: Using the tab button to move sequentially through navigation.
Use skip links

Examples: Operable
Keyboard Nav &
Skiplinks Demo

Examples: Operable
Don’t cause
seizures.

The Worst Website Ever

1. Perceivable
2. Operable
3. Understandable
4. Robust
Most web content contains
information communicated through
language. The language should be as
easy to understand as possible and
appropriate for the intended audience.
The functionality of web content
must also be understandable. Users
must be able to understand all
navigation and other forms of
interaction.
- https://webaim.org/articles/pour/understandable

Examples: Understandable
Use the language attribute on HTML
Bad: Using the tab button to move through a form and jumping from a
form field focus to some other spot on the page.
Good: Using the tab button to move sequentially through navigation.
Give users enough time to read and use content
Bad: Moving/blinking content that can’t be paused or stopped.
Bad: Alerts that can’t be suppressed or postponed.
Bad: Authentication session expires and data is lost when user re-authenticates
Don’t use carousels (sliders) - http://shouldiuseacarousel.com/

1. Perceivable
2. Operable
3. Understandable
4. Robust
Strive to maximize compatibility with
current and future user agents,
including assistive technologies.
Make your HTML as valid as possible.
Programmatically name interface
components correctly (i.e. buttons,
forms, navigation)

Examples: Robust
• Code parses without error
• Use online validators
• Use code linters
• For all user-interface components, the name and role can be
programmatically determined (use HTML5 and ARIA)
• ARIA is a way to provide additional information about the
semantics of the various elements to assistive technologies
like screen readers
https://validator.w3.org/
https://www.w3.org/TR/html-aria/
<button>This is an HTML5 button</button> 
<a href=“” role=“button”>This is a link with an ARIA role of button</a>

Chrome Accessibility Audit
1. Install Chrome Developer Tools (https://developers.google.com/web/tools/lighthouse/)
2. Right-click > Inspect > Audit tab

WAVE (wave.webaim.org)

Dynomapper

Improve your site based on your role
• Designer
• Developer
• Content Creator
• Consultant

Designers
• Color contrast checker – https://webaim.org/resources/
contrastchecker/
• Identifying good contrast color schemes - https://
material.io/collections/color/
• Avoid tiny fonts – https://wordpress.org/plugins/wp-
accessibility/
• Clear and consistent navigation

Developers
• Skip Links – https://carriedils.com/add-skip-nav-wordpress-
theme/
• Keyboard Navigation – https://www.nngroup.com/articles/
keyboard-accessibility/ & Logical tabbing order (tab index) 
 
 
 
 
• ARIA roles (Accessible Rich Internet Applications) – https://
developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Image credits

Developers: Semantic HTML5
• Semantic HTML5 helps search engines better understand the
components of a web page and it helps them “see” content like a
human  
• While Google won’t penalize anyone who fails to use HTML5 and it
isn’t a direct ranking factor, the usage does assist with SEO efforts
and helps prepare the website for usage of Structured Data and
Schema 
• When used properly, semantic HTML5 will provide a content outline 
• Semantic HTML5 is also used by screen readers, which means it is
important for accessibility 
• Google is essentially blind, so accessibility-related HTML5 that
helps a screen reader will in turn also help Google 
• HTML5 header tags are used for search engines and accessibility,
so they should not be used for styling of content

Content Creators
• Alt Text for images
• Proper heading structure (H1, H2, etc)
• Contextual link text (click here!)

Consultant
• Accessibility matters to both humans and SEO
• You have to consider accessibility in modern
SEO efforts
• Review each page template as a minimum
• Scan the entire website to make sure user
content isn’t causing issues as well
• Fix everything associated with template coding
• Educate your client on user generated issues
• Communicate plugin issues to the developer
• Client content

Accessibility doesn't have to be all or nothing.
Start with small steps in the right direction.

Additional Resources
Web Content Accessibility Guidelines (WCAG 2.0) 
https://www.w3.org/TR/WCAG20/
Google resources for accessibility (includes links to Chrome
add-ons) 
https://www.google.com/accessibility/
Links to various accessibility tools 
https://wpcampus.org/resources/accessibility/
Dynomapper 
https://dynomapper.com/blog/27-accessibility-testing
Semantic HTML5 for Content Writers 
https://www.semrush.com/blog/best-practices-in-semantic-html5-for-
content-writers/

Rebecca Gill
SEO Consultant and Instructor
@rebeccagill 
RebeccaGill.com
Carrie Dils
Web Developer and Consultant
@cdils
CarrieDils.com
CARRIE
DILS

Optimizing Your Website for Accessibility

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Optimizing Your Website for Accessibility

Similar to Optimizing Your Website for Accessibility (20)

More from Rebecca Gill

More from Rebecca Gill (12)

Recently uploaded

Recently uploaded (20)

Optimizing Your Website for Accessibility