SlideShare a Scribd company logo
1 of 81
Download to read offline
Rachel Cherry
@bamadesigner

bamadesigner.com
wpcampus.org
HOW TO CREATE
ACCESSIBLE
WEBSITES
#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:
Everything from this workshop:
bamadesigner.com/wcbos
#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.
#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?
Information wants to be free
ACCESSIBLE
Information needs to be
#WCBOS #a11y
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
#WCBOS #a11y @bamadesigner
The four principles of accessibility:
• Perceivable
• Operable
• Understandable
• Robust
#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.)
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
#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.
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
#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.

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

ACCESSIBLE 

websites?
#WCBOS #a11y
The challenge:
Change your
perspective.
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:
#WCBOS #a11y @bamadesigner
Where accessible design considers 

the needs of people with disabilities.
Universal design considers 

the needs of a diverse human
population.
Everyone uses technology

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

to design for (and maintain)
accessibility during your project
than to handle after the fact.
#WCBOS #a11y @bamadesigner
Working together during every step:
PLANNING CONTENT
DESIGN (UI/UX) ENGINEERING
MAINTENANCE
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:
• Web accessibility is more prominent in higher education 

because the only laws that exist are for
organizations that receive federal funding.
Legal implications/standards
The only laws that exist are for
organizations that receive federal funding.
• 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
General businesses and organizations are not required by law,
but still receive civil suits. To name a few:
What about general 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
• Current version was published in December 2008
• WCAG is drafting version 2.1 was released 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!
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
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:
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;
}
}
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.
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.
Other considerations:
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:
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 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:
GOOD MARKUP
The foundation for good accessibility is
#WCBOS #a11y
Which also improves your SEO!
CHALLENGE!
It’s time for a good ole’ fashioned
#WCBOS #a11y #youbetterwork
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
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
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: Section 508 and WCAG 2.0 A/AA/AAA
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:
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:
#WCBOS #a11y
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
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:
#WCBOS #a11y @bamadesigner
The foundation of good accessibility is
good design, markup, and UX
which creates a high quality experience
for everyone.
#WCBOS #a11y @bamadesigner
Where accessible design considers 

the needs of people with disabilities.
Universal design considers 

the needs of a diverse human
population.
#WCBOS #a11y @bamadesigner
When you plan for accessibility,
YOU WON’T WORK HARDER.
YOU’LL WORK SMARTER.
Everything from this workshop:
bamadesigner.com/wcbos
Rachel Cherry
@bamadesigner

bamadesigner.com
wpcampus.org
ANY
QUESTIONS?
#WCBOS #a11y

More Related Content

What's hot

Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityRachel Cherry
 
Selfish Accessibility: Presented at Google
Selfish Accessibility: Presented at GoogleSelfish Accessibility: Presented at Google
Selfish Accessibility: Presented at GoogleAdrian Roselli
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitRachel Cherry
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it mattersMargarida Sousa
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web AccessibilityAndrea Dubravsky
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websitesRachel Cherry
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibilityJoseph McLarty
 
Web a11y beyond guidelines
Web a11y beyond guidelinesWeb a11y beyond guidelines
Web a11y beyond guidelinesrach123
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web DevelopersAlexander Loechel
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and ProfitMike Wilcox
 
Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014Gareth Hall
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkRachel Cherry
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsMedia Access Australia
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibilityYogeshDaphane
 
Skills needed-for-a-job-in-accessibility
Skills needed-for-a-job-in-accessibilitySkills needed-for-a-job-in-accessibility
Skills needed-for-a-job-in-accessibilityelianna james
 

What's hot (20)

Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web Accessibility
 
Selfish Accessibility: Presented at Google
Selfish Accessibility: Presented at GoogleSelfish Accessibility: Presented at Google
Selfish Accessibility: Presented at Google
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
Web a11y beyond guidelines
Web a11y beyond guidelinesWeb a11y beyond guidelines
Web a11y beyond guidelines
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
 
Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick Wins
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
 
Skills needed-for-a-job-in-accessibility
Skills needed-for-a-job-in-accessibilitySkills needed-for-a-job-in-accessibility
Skills needed-for-a-job-in-accessibility
 

Similar to How to create accessible websites - WordCamp Boston

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
 
Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityRachel Cherry
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101Eric Malcolm
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
 
Designing, Developing & Testing for Accessibility
Designing, Developing & Testing for AccessibilityDesigning, Developing & Testing for Accessibility
Designing, Developing & Testing for AccessibilityEric Malcolm
 
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 resourcesMichael Ryan
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's jobRemya Ramesh
 
Digital accessibility intro-a11ycle_2020-01-15
Digital accessibility intro-a11ycle_2020-01-15Digital accessibility intro-a11ycle_2020-01-15
Digital accessibility intro-a11ycle_2020-01-15Joshua Randall
 
Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Intopia
 
Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Charity Dynamics
 
UX Akron Global Accessibility Awareness Day 2019
UX Akron Global Accessibility Awareness Day 2019UX Akron Global Accessibility Awareness Day 2019
UX Akron Global Accessibility Awareness Day 2019Joshua Randall
 
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
 
Make Your Website Accessible to Everyone
Make Your Website Accessible to EveryoneMake Your Website Accessible to Everyone
Make Your Website Accessible to EveryoneAria Williams
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?Devin Olson
 
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...GreeceJS
 
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 Corporationhannonhill
 

Similar to How to create accessible websites - WordCamp Boston (20)

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...
 
Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
 
Designing, Developing & Testing for Accessibility
Designing, Developing & Testing for AccessibilityDesigning, Developing & Testing for Accessibility
Designing, Developing & Testing for Accessibility
 
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
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's job
 
Digital accessibility intro-a11ycle_2020-01-15
Digital accessibility intro-a11ycle_2020-01-15Digital accessibility intro-a11ycle_2020-01-15
Digital accessibility intro-a11ycle_2020-01-15
 
Week 3 Lecture: Accessibility
Week 3 Lecture: AccessibilityWeek 3 Lecture: Accessibility
Week 3 Lecture: Accessibility
 
Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101'
 
Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!Web Accessibility: MISSION POSSIBLE!
Web Accessibility: MISSION POSSIBLE!
 
UX Akron Global Accessibility Awareness Day 2019
UX Akron Global Accessibility Awareness Day 2019UX Akron Global Accessibility Awareness Day 2019
UX Akron Global Accessibility Awareness Day 2019
 
Gavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility CentreGavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility Centre
 
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.
 
Siegman "Creating Accessible Content"
Siegman "Creating Accessible Content"Siegman "Creating Accessible Content"
Siegman "Creating Accessible Content"
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
Make Your Website Accessible to Everyone
Make Your Website Accessible to EveryoneMake Your Website Accessible to Everyone
Make Your Website Accessible to Everyone
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?
 
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
 
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
 

Recently uploaded

Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)Wonjun Hwang
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistandanishmna97
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 

Recently uploaded (20)

Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 

How to create accessible websites - WordCamp Boston

  • 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
  • 17.
  • 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.
  • 22.
  • 23.
  • 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!
  • 35.
  • 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!
  • 60.
  • 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
  • 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