Website Accessibility & WordPress

@roadwarriorwp | RoadWarriorCreative.com
Website Accessibility
& WordPress
Georgetown WordPress Meetup
August 21, 2018 | AMBER HINDS

Objective
Have a website that can be used by everyone -
people of all abilities and disabilities.

Today’s Agenda
● Why accessibility matters
● Accessibility laws - who needs to follow them
● Accessibility best practices
● How to test if your website is accessible or has any accessibility issues
● How to fix accessibility issues if they arise
● Noteworthy WordPress specific accessibility tools/themes

Why Accessibility Matters

>1 billion
of the world’s population have a disability.
World Health Organization 2018 World Report on Disability

15%
of the world’s population have a disability.
World Health Organization 2018 World Report on Disability

1 in 8
people in the United States have a disability.
U.S. Census Bureau's 2016 American Community Survey

$200 billion
spent annually by disabled Americans.
U.S. Department of Labor

Accessibility matters because...
● It’s good karma
● It’s good for SEO
● It increases revenue opportunities
● In some cases it’s legally required

Accessibility Laws*
*I am not a lawyer.

Accessibility is a Civil Right
● Equal access to information:
education, transit, voting, healthcare, employment, human services, etc.
● Equal ability to participate fully in our society

Rehabilitation Act of 1973
Section 504:
“No otherwise qualified individual with a disability in the United States... shall, solely
by reason of her or his disability, be excluded from participation in, be denied the
benefits of, or be subjected to discrimination under any program or activity
receiving Federal financial assistance.”
Applies to: Government agencies, federally-funded projects, K-12 schools,
postsecondary entities (state colleges, universities, and vocational training schools)

Section 508:
Bars the Federal government from procuring electronic and information technology
goods and services (including website design) that are not fully accessible to those
with disabilities.

When complaints arise, members of the public,
students, and employees with disabilities may:
1. File an administrative complaint with agencies they believe to be in violation of
Section 508.
2. File a private lawsuit in federal district court, or
3. File a formal complaint through the US DOJ Office of Civil Rights.
https://webaim.org/articles/laws/usa/rehab

Americans with Disabilities Act (ADA)
Title II
Communications with persons with disabilities must be "as effective as
communications with others" [28 C.F.R. ss 35.160 (a)].
Title III
Deals with public accommodation of people with disabilities.
https://webaim.org/articles/laws/usa/ada

Americans with Disabilities Act (ADA)
No clear laws on how ADA applies the the web -
no regulations - but increasing numbers of
lawsuits filed and won under ADA.
https://webaim.org/articles/laws/usa/ada

Telecommunications Act of 1996
“The Act requires manufacturers of telecommunications equipment and customer
premises equipment to ensure that the equipment is designed, developed, and
fabricated to be accessible to and usable by individuals with disabilities, if readily
achievable.”
Complaints
● Filed with FCC
● Lawsuits are not authorized and there is no provision for damages.
https://webaim.org/articles/laws/usa/telecomm

Don’t forget about your state...
● State funded IT laws
● State anti-discrimination laws
● Many states allow damages for ADA cases
+ Local governments
+ World laws
https://webaim.org/articles/laws/world/

Best Practices

Your website should be...
Perceivable
Operable
Understandable
Robust

Perceivable
Information needs to be
transformable from one form to
another.
Main content and message should be
separable from the way it is styled or
presented.

Operable
Not everyone uses a standard keyboard + mouse
to navigate the web.
● Multiple ways to interact with the website
● User control over time limits/timing
● Clear instructions
● Error recovery options

Understandable
● Appropriately targeted language/reading level
● Supplemental representation of information
○ Graphics, videos, audio players, graphs, etc.
○ Summaries or excerpts before long articles
● Understandable functionality
○ Navigation structure, form interactions, available tooltips etc.

Robust
● Functionality across current and future devices,
operating systems, and browsers
● Support some outdated versions
● Validate against technical standards for that
platform

When to start thinking about accessibility...

Accessibility Checklist

Accessibility in Content
● Images need appropriate alt text or empty alt
text if decorative
● Caption videos
● Provide transcripts for audio and video
● Be careful about reading level (8th grade)
● Avoid rapid flashing (no more than 3x/sec.)

Accessibility in Design
● Website must have consistent interface
● Check color contrast
● Beware of line length issues
● Keep related items close (proximity)
● Design focus states for links, buttons, etc.
● Design for error states

Accessibility in Development
● Follow Web Standards (W3C/WAI)
● Set page language
● Use semantics (headings, buttons, labels)
● Foreground images, please (with alt text)
● Hide informative text for screen readers with a CSS class
like: .screen-reader-text
● Mobile-first, responsive design navigable with keyboard
only (tab key)

Example: Fort Collins Montessori School

Guideline + Testing Resources
● P.O.U.R.: https://webaim.org/articles/pour
● Current web content accessibility guidelines (WCAG) 2.1:
https://www.w3.org/TR/WCAG21
● WCAG 2 implementation checklist:
https://webaim.org/standards/wcag/checklist
● Test your website: http://wave.webaim.org or get the Chrome extension
● Chrome Dev Tools > Audits
● Color contrast checker: https://webaim.org/resources/contrastchecker
● Screen readers:
○ ChromeVox
○ NVDA

Accessibility & WordPress Core
● Handbook on WordPress Accessibility
● Theme Developer’s Handbook Accessibility Guidelines
● Requirements for the accessibility-ready tag in the theme directory
● Make WordPress Accessible - you can help!
● Learn More: Accessibility talks on WordPress.tv

Accessibility Ready Themes
Free Themes
● 124 tagged “Accessibility ready” in the Theme Directory at
https://wordpress.org/themes/tags/accessibility-ready
Premium Themes
● Genesis by StudioPress - https://my.studiopress.com/themes
● 200 tagged “Accessible” on Themeforest -
https://themeforest.net/category/wordpress?term=accessible

Accessibility Plugin
Fix common accessibility
issues without changing your
theme.
https://wordpress.org/plugin
s/wp-accessibility

What if I just want to hire someone?
Ask yourself how much of an expert you want, and
how key accessibility is to your website’s success
and reputation (or legal compliance)...
● Knowability - Austin-based nonprofit
● Check with local agencies
● Find a freelancer
Is there anyone in the room today?

Amber Hinds
Creative Director
Road Warrior Creative
amber@roadwarriorcreative.com
@roadwarriorwp
on all the socials

Website Accessibility & WordPress

Recommended

Recommended

More Related Content

Similar to Website Accessibility & WordPress

Similar to Website Accessibility & WordPress (20)

Recently uploaded

Recently uploaded (20)

Website Accessibility & WordPress