SlideShare a Scribd company logo
Howto Improve
Your Website’s Accessibility
Without Going Crazy
Eric Eggert
ee@w3.org • yatil
W3C/Web Accessibility Initiative
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
– w3.org/accessibility
The Web is fundamentally designed to work for
all  people, whatever their hardware, software,
language, culture, location, or physical or mental
ability. When the Web meets this goal, it is
accessible to people with a diverse range of
hearing, movement, sight, and cognitive ability.
Accessibility:
Make sure that People with disabilities
can effectively interact with the Web
– Aaron Gustafson (Foreword in: Sarah Horton. “A Web for Everyone.”)
“On the web, every decision I make can have a
profound effect on hundreds of thousands (if not
millions) of people’s lives. I can make checking into
a flight a breeze, or I can make it a living hell.
That’s a lot of power. And to quote Stan Lee: ‘With
great power comes great responsibility.’”
>1 billion
Persons with some form
of disability
— WHO Report 2011
15%
Persons with some form
of disability
— WHO Report 2011
@dstorey
People
Accessibility
Usability
People
users is People
Q: How do
People With Disabilities
Use the web?
Browser Web
Content
Browser Web
Content
Assistive
tech
Zoom
Pinch Out by Julie Muckensturm from the Noun Project
How to improve your website’s accessibility without going crazy
Single Switch
Braille
customizations
Captions
Resource:
How People with
Disabilities Use the Web
w3.org/WAI/intro/people-use-web/
Q: Accessibility sounds
complicated.
Q: How do I start with
Accessibility?
Designers
Content creators
Developers
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
Resource:
Tips for getting started
with web accessibility
w3.org/WAI/gettingstarted/tips/
Q: How do I make sure my
website is accessible?
Resource:
Web Content
Accessibility Guidelines
(WCAG) 2.0
w3.org/TR/WCAG/
Principles:
Perceivable
Operable
Understandable
Robust
Perceivable:
Meaningful Sequence
Perceivable:
TextAlternatives
<button>
<span class="icon icon-pencil">
</span>
</button>
<button title="Edit">
<span class="icon icon-pencil">
</span>
</button>
<button title="Edit">
<span class="icon icon-pencil-kaput“>
</span>
</button>
How to improve your website’s accessibility without going crazy
ImageS
<button>
<img src="pencil.png" alt="Edit">
</button>
<button>
<img src="pencil.svg" alt="Edit">
</button>
Resource:
Image Tutorial
w3.org/WAI/tutorials/images/
Resource:
Web Accessibility
Tutorials
w3.org/WAI/tutorials/
<aside>
Page structure (Draft)
Menus (Draft)
images
Tables
forms
carousels (Draft)
</aside>
Visible text labels
<button>
<span class="icon icon-pencil">
</span>
Edit
</button>
Perceivable:
Color Contrast
Operable:
usable with a Keyboard
Operable:
Ability to bypass
blocks
Operable:
Proper headings
F labels
Understandable:
Page language
Understandable:
Consistent Navigation
Understandable:
Indicate errors
Robust:
Compatibility
Q: How do I make sure
that the
user experience is
accessible?
You achiEve the best
results when…
Accessibility is
not an afterthought
Smooth use of your
product
Everything feels
coherent
No compromises
No need to rebuild
Accessibility is
an opportunity
Reach more people
makes your web project
easy to understand
consistent layout H
Navigation
Accessibility is
A creative outlet
Produce the best
video player UI
Consider the order of the
content
Take the available data
and do something no one
expects
How to improve your website’s accessibility without going crazy
thankyou.
Eric Eggert
W3C/Web accessibility initiative
ee@w3.org & @yatil

More Related Content

PDF
DrupalCamp Vienna 2015
PPTX
Asm cmppo sm_artprize
PPT
Community 2.0
PDF
Web Accessibility
PPT
Library Expo08 Social Networks 4 15 08
PPTX
DACC 2011
PPSX
Social Networking In Extension
PPT
Libraryexpo08 Blogs 4 15 08
DrupalCamp Vienna 2015
Asm cmppo sm_artprize
Community 2.0
Web Accessibility
Library Expo08 Social Networks 4 15 08
DACC 2011
Social Networking In Extension
Libraryexpo08 Blogs 4 15 08

What's hot (14)

PPTX
Building Better Web Pages
PPTX
Strategies for ensuring the accessibility of online content
PPTX
Pros and cons of social networking cfs
PPTX
Academy workshops social media and disability
PDF
The New Ethos: Media & Information Literacies Part I
PPT
Podcasts, Wikis, and Blogs, Oh My!
PPT
Finding the Balance
PDF
Building a Networked Identity: How to Become a Connected Educator
PDF
Community Engagement Online
PDF
Twitter as Scholarship: How Not To Get Fired (Much)
PPTX
Essential e-competencies for diplomats
PDF
Beyond Alt-Metrics: Identities & Influence Online
PPT
Wikimedia 2009 Redux Bay Chi
PDF
Web20
Building Better Web Pages
Strategies for ensuring the accessibility of online content
Pros and cons of social networking cfs
Academy workshops social media and disability
The New Ethos: Media & Information Literacies Part I
Podcasts, Wikis, and Blogs, Oh My!
Finding the Balance
Building a Networked Identity: How to Become a Connected Educator
Community Engagement Online
Twitter as Scholarship: How Not To Get Fired (Much)
Essential e-competencies for diplomats
Beyond Alt-Metrics: Identities & Influence Online
Wikimedia 2009 Redux Bay Chi
Web20
Ad

Viewers also liked (19)

PPTX
Practical SharePoint Accessibility
PDF
Writing for Engagement [TechReady 22]
PDF
Acl nanjing 151013
PPT
XmlBlackBox English Presentation
PDF
Grafico diario del dax perfomance index para el 13 04-2012 (1)
PPT
第弐回天下一カウボーイ大会
PDF
Course leaflet thessaloniki
PDF
Health Insurance Consumer Protections
PPTX
How effective is the combination between our music
PDF
¡Play makes H(e)y!
PDF
Landscapes of Love
PPS
Test flogisteano1
PPTX
Online marketing by Irene Matveeva
PDF
Avis de Course Flying Phantom Series Cannes 2016
PDF
Predictions for 2014 - NetApp CTO Jay Kidd
PPT
Guitar Self Teaching Lessons
PDF
Daily Newsletter: 16th February, 2011
PPS
專訪李光耀
PDF
Asynsis-Constructal @ ARUP 030513
Practical SharePoint Accessibility
Writing for Engagement [TechReady 22]
Acl nanjing 151013
XmlBlackBox English Presentation
Grafico diario del dax perfomance index para el 13 04-2012 (1)
第弐回天下一カウボーイ大会
Course leaflet thessaloniki
Health Insurance Consumer Protections
How effective is the combination between our music
¡Play makes H(e)y!
Landscapes of Love
Test flogisteano1
Online marketing by Irene Matveeva
Avis de Course Flying Phantom Series Cannes 2016
Predictions for 2014 - NetApp CTO Jay Kidd
Guitar Self Teaching Lessons
Daily Newsletter: 16th February, 2011
專訪李光耀
Asynsis-Constructal @ ARUP 030513
Ad

Similar to How to improve your website’s accessibility without going crazy (20)

PPTX
Introduction To Web Accessibility
PPT
Accessibility Nonprofits Live
PPT
Corporate Web Accessibility Implementation Strategies
PDF
Comrade Web Accessibility 101
PPTX
UX Akron Global Accessibility Awareness Day 2019
PPT
Engineering Web Accessibility for Older People
PPTX
Developing Accessible Experiences
PDF
How accessible is your website?
PDF
Usability ≠ Accessibility. An intro to web accessibility for agencies.
PDF
Accessibility and why it matters
PPT
2009: Social inclusion in a Digital Age
PDF
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
PDF
Lesson-1.0 etech empowerment Technologies
PPTX
Accessibility
PDF
Intro to accessibility workshop slides
PDF
How to create accessible websites - WordCamp Boston
PPT
V.Mancev Pristapnost En
PPTX
Victoria Miller SMART-OUR
PPT
BrailleSC.org Presentation
PDF
A Web for Everyone
Introduction To Web Accessibility
Accessibility Nonprofits Live
Corporate Web Accessibility Implementation Strategies
Comrade Web Accessibility 101
UX Akron Global Accessibility Awareness Day 2019
Engineering Web Accessibility for Older People
Developing Accessible Experiences
How accessible is your website?
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Accessibility and why it matters
2009: Social inclusion in a Digital Age
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
Lesson-1.0 etech empowerment Technologies
Accessibility
Intro to accessibility workshop slides
How to create accessible websites - WordCamp Boston
V.Mancev Pristapnost En
Victoria Miller SMART-OUR
BrailleSC.org Presentation
A Web for Everyone

More from Eric Eggert (20)

PDF
ARIA Serious
PDF
What is EOWG?
PDF
What is EOWG?
PDF
Github introduction for W3C WCAG WG and EOWG
PDF
Neue Infos rund um WCAG 2.0
PDF
How to Learn about accessibility without going crazy #fronteers15
PDF
New developments in Web Accessibility
PPT
Internet und Webdesign (Historisches Dokument)
PPT
Vorteile von Webstandards (Historisches Dokument)
PPT
Internet-Geschichte und Webtechnologie (Historisches Dokument)
PPT
Fehler im Webdesign (Historisches Dokument)
PDF
How I stopped worrying and learned to love with defaults – with Notes
PDF
How I stopped worrying and learned to love with defaults — Without notes
PDF
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
PDF
Fronteers Jam Session: Principles of Accessible Web Design
PDF
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
PDF
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
PDF
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
PDF
Nutze die Macht @ IKT-Forum 09 Linz
PDF
Das Web besteht nicht (nur) aus Pixeln
ARIA Serious
What is EOWG?
What is EOWG?
Github introduction for W3C WCAG WG and EOWG
Neue Infos rund um WCAG 2.0
How to Learn about accessibility without going crazy #fronteers15
New developments in Web Accessibility
Internet und Webdesign (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults — Without notes
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Fronteers Jam Session: Principles of Accessible Web Design
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Nutze die Macht @ IKT-Forum 09 Linz
Das Web besteht nicht (nur) aus Pixeln

Recently uploaded (20)

PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Anesthesia in Laparoscopic Surgery in India
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PPTX
GDM (1) (1).pptx small presentation for students
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
PDF
Trump Administration's workforce development strategy
PPTX
Lesson notes of climatology university.
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PPTX
master seminar digital applications in india
PPTX
Orientation - ARALprogram of Deped to the Parents.pptx
PDF
A GUIDE TO GENETICS FOR UNDERGRADUATE MEDICAL STUDENTS
PDF
Computing-Curriculum for Schools in Ghana
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Anesthesia in Laparoscopic Surgery in India
human mycosis Human fungal infections are called human mycosis..pptx
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
GDM (1) (1).pptx small presentation for students
Pharmacology of Heart Failure /Pharmacotherapy of CHF
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
Trump Administration's workforce development strategy
Lesson notes of climatology university.
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
master seminar digital applications in india
Orientation - ARALprogram of Deped to the Parents.pptx
A GUIDE TO GENETICS FOR UNDERGRADUATE MEDICAL STUDENTS
Computing-Curriculum for Schools in Ghana
Module 4: Burden of Disease Tutorial Slides S2 2025
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Supply Chain Operations Speaking Notes -ICLT Program
FourierSeries-QuestionsWithAnswers(Part-A).pdf

How to improve your website’s accessibility without going crazy