SlideShare a Scribd company logo
Rachel Cherry / @bamadesigner

bamadesigner.com
wpcampus.org
HOW TO CREATE
ACCESSIBLE
WEBSITES
Director, WPCampus

wpcampus.org

@wpcampusorg


Software engineer and 

accessibility/higher ed consultant 

bamadesigner.com

@bamadesigner
Visit the 

WPCampus 

Get Involved page 

to join our Slack
account!
Who am I?
#WPNYC #a11y @bamadesigner
• Intro to accessibility 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 session will cover:
#WPNYC #a11y @bamadesigner
Web accessibility refers to 

the inclusive practice of 

removing barriers that prevent
interaction with, or access to,
websites by people with disabilities.
#WPNYC #a11y @bamadesigner
Data shows 1 in 5 people have a disability. 

You could be excluding 20% of
your visitors from accessing your
information, products, and services.
Why is accessibility important?
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
#WPNYC #a11y @bamadesigner
The four principles of accessibility:
• Perceivable
• Operable
• Understandable
• Robust
#WPNYC #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.)
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
#WPNYC #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.
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
#WPNYC #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.

#WPNYC #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:
#WPNYC #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.
How do we create 

ACCESSIBLE 

websites?
#WPNYC #a11y
#WPNYC #a11y @bamadesigner
The foundation of good accessibility is
good design, markup, and UX
which creates a high quality experience
for EVERYONE.
#WPNYC #a11y @bamadesigner
To provide accessible technology, 

we have to consider diverse
needs during every step of a
project.
#WPNYC #a11y @bamadesigner
Working together during every step:
PLANNING CONTENT
DESIGN (UI/UX) ENGINEERING
MAINTENANCE
#WPNYC #a11y @bamadesigner
Much easier and cheaper 

to design for (and maintain)
accessibility during your project
than to handle after the fact.
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 2.1 was released June 2018.
Web accessibility standards:
#WPNYC #a11y @bamadesigner
WCAG 2.0 Quick Reference

https://www.w3.org/WAI/WCAG20/quickref/
Walks you through techniques and failures!
#WPNYC #a11y @bamadesigner
WCAG 2.0 Checklists:

• http://webaim.org/standards/wcag/checklist
• https://a11yproject.com/checklist
• https://www.wuhcag.com/wcag-checklist/
• Create your own!
#WPNYC #a11y @bamadesigner
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:
#WPNYC #a11y @bamadesigner
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:
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:
#WPNYC #a11y @bamadesigner
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:
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:
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;
}
}
#WPNYC #a11y @bamadesigner
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:
<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”:
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:
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:
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:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
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:
Then the link would become visible:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
Responsive web design is
important to ensure your site can be
viewed on assistive devices of
various sizes.
Other considerations:
Download speeds/order is
important to ensure access to those
who don’t have access to high
speed Internet.
Other considerations:
Be mindful of your language.
• Avoid statements like: 

“See our home page”.
• Instead, use non-sensory
language: “Visit our home page”.
#WPNYC #a11y @bamadesigner
Spec created to improve accessibility
of applications by providing extra
information to screen readers via
HTML attributes.
ARIA (Assistive Rich Internet Applications)
<div role="contentinfo">
<p>WordCamp NYC 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:
GOOD MARKUP
The foundation for good accessibility is
#WPNYC #a11y
Which also improves your SEO!
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 defined 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
WORDPRESS PLUGINS
BROWSER TOOLS
BROWSER TOOLS
BROWSER TOOLS
Take advantage of 

in-browser testing tools to
evaluate product demos
before you purchase.
ACCESSIBILITY PRO TIP:
#WPNYC #a11y
#WPNYC #a11y @bamadesigner
• 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.
General businesses and organizations are not required by law,
but still receive civil suits. To name a few:
What about general businesses?
#WPNYC #a11y @bamadesigner
• 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?
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:
#WPNYC #a11y @bamadesigner
When you plan for accessibility,
YOU WON’T WORK HARDER.
YOU’LL WORK SMARTER.
Rachel Cherry
@bamadesigner

bamadesigner.com
wpcampus.org
ANY
QUESTIONS?
#WPNYC #a11y
bamadesigner.com/wpnyc

More Related Content

What's hot

Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
Shivani Sachdeva
 
I Am the LAAW! (Lean Accessibility Audit Workshops)
I Am the LAAW! (Lean Accessibility Audit Workshops)I Am the LAAW! (Lean Accessibility Audit Workshops)
I Am the LAAW! (Lean Accessibility Audit Workshops)
Michael Ryan
 
Gavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility CentreGavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility Centre
Boilerhouse Communications
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
Joseph Dolson
 
Oct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility ConferenceOct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility Conference
Kevin Rydberg
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tips
Henny Swan
 
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability
mcongdon
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
Aparna A Gopalakrishnan
 
Designing, Developing & Testing for Accessibility
Designing, Developing & Testing for AccessibilityDesigning, Developing & Testing for Accessibility
Designing, Developing & Testing for Accessibility
Eric Malcolm
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Radek Pavlíček
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
Eric Malcolm
 
Accessibility Testing 101
Accessibility Testing 101Accessibility Testing 101
Accessibility Testing 101
Patrick Dunphy
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
Michael Ryan
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web Accessibility
Steven Swafford
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyone
Chris Mills
 
Accessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflowsAccessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflows
Robert Jolly
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
Atos_Worldline
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
filirom1
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
Margarida Sousa
 
The power of accessibility (November, 2018)
The power of accessibility (November, 2018)The power of accessibility (November, 2018)
The power of accessibility (November, 2018)
Rachel M. Carmena
 

What's hot (20)

Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
 
I Am the LAAW! (Lean Accessibility Audit Workshops)
I Am the LAAW! (Lean Accessibility Audit Workshops)I Am the LAAW! (Lean Accessibility Audit Workshops)
I Am the LAAW! (Lean Accessibility Audit Workshops)
 
Gavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility CentreGavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility Centre
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
Oct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility ConferenceOct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility Conference
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tips
 
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
 
Designing, Developing & Testing for Accessibility
Designing, Developing & Testing for AccessibilityDesigning, Developing & Testing for Accessibility
Designing, Developing & Testing for Accessibility
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
Accessibility Testing 101
Accessibility Testing 101Accessibility Testing 101
Accessibility Testing 101
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web Accessibility
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyone
 
Accessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflowsAccessibility: Proven, easy integration into design and development workflows
Accessibility: Proven, easy integration into design and development workflows
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
The power of accessibility (November, 2018)
The power of accessibility (November, 2018)The power of accessibility (November, 2018)
The power of accessibility (November, 2018)
 

Similar to How to create accessible websites - WordCamp New York

Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
Rachel Cherry
 
Access by Default
Access by DefaultAccess by Default
Access by Default
Kendra Skeene
 
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill CorporationWeb Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
hannonhill
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
Emagination ®
 
Access by Default
Access by DefaultAccess by Default
Access by Default
Great Wide Open
 
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion RateseCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
Cyber-Duck
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
Devin Olson
 
Webpage and ict
Webpage and ictWebpage and ict
Webpage and ict
JohnCaesarCagalawan
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Whole Brain Group, LLC
 
2012-07-24: Accessibility On The Web
2012-07-24: Accessibility On The Web2012-07-24: Accessibility On The Web
2012-07-24: Accessibility On The Web
Baltimore Lean Startup
 
What's This? Another Introduction to Web Accessibility? PSEWeb 2014
What's This? Another Introduction to Web Accessibility? PSEWeb 2014What's This? Another Introduction to Web Accessibility? PSEWeb 2014
What's This? Another Introduction to Web Accessibility? PSEWeb 2014
Kevin Rydberg
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
Joseph McLarty
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's job
Remya Ramesh
 
Lab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversLab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rollovers
Yaowaluck Promdee
 
Accessible thinking in your IA
Accessible thinking in your IAAccessible thinking in your IA
Accessible thinking in your IA
Anna Cook (she/her)
 
Tips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptxTips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptx
Inclusivea11y
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)
cspin
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
Peter Rozek
 
Web accessibility webinar 53017
Web accessibility webinar 53017Web accessibility webinar 53017
Web accessibility webinar 53017
Dee Moradi
 
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
Evolve The Adobe Digital Marketing Community
 

Similar to How to create accessible websites - WordCamp New York (20)

Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill CorporationWeb Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion RateseCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
 
Webpage and ict
Webpage and ictWebpage and ict
Webpage and ict
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
2012-07-24: Accessibility On The Web
2012-07-24: Accessibility On The Web2012-07-24: Accessibility On The Web
2012-07-24: Accessibility On The Web
 
What's This? Another Introduction to Web Accessibility? PSEWeb 2014
What's This? Another Introduction to Web Accessibility? PSEWeb 2014What's This? Another Introduction to Web Accessibility? PSEWeb 2014
What's This? Another Introduction to Web Accessibility? PSEWeb 2014
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's job
 
Lab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversLab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rollovers
 
Accessible thinking in your IA
Accessible thinking in your IAAccessible thinking in your IA
Accessible thinking in your IA
 
Tips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptxTips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptx
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Web accessibility webinar 53017
Web accessibility webinar 53017Web accessibility webinar 53017
Web accessibility webinar 53017
 
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
 

Recently uploaded

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 

Recently uploaded (20)

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 

How to create accessible websites - WordCamp New York

  • 1. Rachel Cherry / @bamadesigner
 bamadesigner.com wpcampus.org HOW TO CREATE ACCESSIBLE WEBSITES
  • 2. Director, WPCampus
 wpcampus.org
 @wpcampusorg 
 Software engineer and 
 accessibility/higher ed consultant 
 bamadesigner.com
 @bamadesigner Visit the 
 WPCampus 
 Get Involved page 
 to join our Slack account! Who am I?
  • 3. #WPNYC #a11y @bamadesigner • Intro to accessibility 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 session will cover:
  • 4. #WPNYC #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. #WPNYC #a11y @bamadesigner Data shows 1 in 5 people have a disability. 
 You could be excluding 20% of your visitors from accessing your information, products, and services. Why is accessibility important?
  • 6. 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
  • 7. #WPNYC #a11y @bamadesigner The four principles of accessibility: • Perceivable • Operable • Understandable • Robust
  • 8. #WPNYC #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.)
  • 9. 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
  • 10. #WPNYC #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.
  • 11. 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
  • 12. #WPNYC #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.

  • 13. #WPNYC #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:
  • 14. #WPNYC #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.
  • 15. How do we create 
 ACCESSIBLE 
 websites? #WPNYC #a11y
  • 16. #WPNYC #a11y @bamadesigner The foundation of good accessibility is good design, markup, and UX which creates a high quality experience for EVERYONE.
  • 17. #WPNYC #a11y @bamadesigner To provide accessible technology, 
 we have to consider diverse needs during every step of a project.
  • 18. #WPNYC #a11y @bamadesigner Working together during every step: PLANNING CONTENT DESIGN (UI/UX) ENGINEERING MAINTENANCE
  • 19.
  • 20.
  • 21.
  • 22. #WPNYC #a11y @bamadesigner Much easier and cheaper 
 to design for (and maintain) accessibility during your project than to handle after the fact.
  • 23. 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 2.1 was released June 2018. Web accessibility standards:
  • 24. #WPNYC #a11y @bamadesigner WCAG 2.0 Quick Reference https://www.w3.org/WAI/WCAG20/quickref/ Walks you through techniques and failures!
  • 25.
  • 26. #WPNYC #a11y @bamadesigner WCAG 2.0 Checklists: • http://webaim.org/standards/wcag/checklist • https://a11yproject.com/checklist • https://www.wuhcag.com/wcag-checklist/ • Create your own!
  • 27. #WPNYC #a11y @bamadesigner 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:
  • 28. #WPNYC #a11y @bamadesigner 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:
  • 29. Without alternative text, life-saving information in this 
 graphic is not available to visually impaired users.
  • 30. .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:
  • 31. 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:
  • 32. #WPNYC #a11y @bamadesigner 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:
  • 33. 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:
  • 34. 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:
  • 35. PRO TIP to ensure element focus: button { background-color: #d8d8d8; color: #222; &:focus, &:hover { background: #222; color: #fff; } }
  • 36. #WPNYC #a11y @bamadesigner 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:
  • 37. <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”:
  • 38. 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:
  • 39. 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:
  • 40. 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:
  • 41. 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.
  • 42. 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:
  • 43. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  • 44. Responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. Other considerations:
  • 45. Download speeds/order is important to ensure access to those who don’t have access to high speed Internet. Other considerations:
  • 46. Be mindful of your language. • Avoid statements like: 
 “See our home page”. • Instead, use non-sensory language: “Visit our home page”.
  • 47. #WPNYC #a11y @bamadesigner Spec created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. ARIA (Assistive Rich Internet Applications)
  • 48. <div role="contentinfo"> <p>WordCamp NYC 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:
  • 49. GOOD MARKUP The foundation for good accessibility is #WPNYC #a11y Which also improves your SEO!
  • 50. 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
  • 51. 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
  • 52. 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: WCAG 2.0 A/AA/AAA
  • 53. an automated accessibility testing library http://pa11y.org • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:
  • 54. 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
  • 55. Material Design:
 Color Tool https://material.io/color/ Allows you to measure 
 the accessibility level of 
 any color combination.
  • 56. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/ WORDPRESS PLUGINS
  • 61. Take advantage of 
 in-browser testing tools to evaluate product demos before you purchase. ACCESSIBILITY PRO TIP: #WPNYC #a11y
  • 62. #WPNYC #a11y @bamadesigner • Web accessibility is more prominent in higher education 
 because the only laws that exist are for organizations that receive federal funding. Legal implications
  • 63. The only laws that exist are for organizations that receive federal funding.
  • 64. General businesses and organizations are not required by law, but still receive civil suits. To name a few: What about general businesses?
  • 65. #WPNYC #a11y @bamadesigner • 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?
  • 66. 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:
  • 67. #WPNYC #a11y @bamadesigner When you plan for accessibility, YOU WON’T WORK HARDER. YOU’LL WORK SMARTER.
  • 68.