SlideShare a Scribd company logo
D E M Y S T I F Y I N G A C C E S S I B L E W E B S I T E S
BEST PRACTICES
@nancythanki
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
Demystifying Accessible Websites - WCUS 2015
“The power of the Web is in its universality.
Access by everyone regardless of disability is
an essential aspect.”
– T I M B E R N E R S -
L E E
W 3 C D I R E C T O R
A N D I N V E N T O R
O F T H E W O R L D
W I D E W E B
U N C O N V E N T I O N O F T H E R I G H T S O F P E R S O N S W I T H
D I S A B I L I T I E S
Article 21: Freedom of expression and opinion, and access to information
States Parties shall take all appropriate measures to ensure that persons with disabilities can exercise the right to
freedom of expression and opinion, including the freedom to seek, receive and impart information and ideas on an
equal basis with others and through all forms of communication of their choice, as defined in article 2 of the present
Convention, including by:
(a) Providing information intended for the general public to persons with disabilities in accessible formats
and technologies appropriate to different kinds of disabilities in a timely manner and without additional
cost;
(b) Accepting and facilitating the use of sign languages, Braille, augmentative and alternative
communication, and all other accessible means, modes and formats of communication of their choice by
persons with disabilities in official interactions;
(c) Urging private entities that provide services to the general public, including through the Internet, to
provide information and services in accessible and usable formats for persons with disabilities;
(d) Encouraging the mass media, including providers of information through the Internet, to make their
services accessible to persons with disabilities;
(e) Recognizing and promoting the use of sign languages.
aka the UN recognizes Web accessibility as a basic human right
it is essential that the Web be accessible in order to provide
equal access and equal opportunity to people with disabilities
potential clients + worldwide users
=
equal unprecedented access to information and equal
opportunity
20 million blind adults in the US
10% use screen readers
8% of men and 0.5% of women are color blind
FA C T S
DeuteranopiaNormal
T Y P E S O F
D I S A B I L I T I E S
auditory
cognitive / neurological
physical
visual
A S S I S T I V E
T E C H N O L O G Y
braille display
screen reader
text-to-speech
voice browser
voice recognition
keyboard navigation
S C R E E N
R E A D E R S
nvaccess’ NVDA reader (Microsoft Windows XP or later)
Chrome Vox
Mozilla’s Fangs Screen Reader Emulator
Apple’s VoiceOver
W H AT makes a website accessible?
H O W can you know if yours is accessible?
users spend more time
on your site consuming
your content and
engaging with your
brand
intuitive navigation
+
properly labeled links
and images
+
user friendly design
aesthetics
A D O P T I V E S T R AT E G I E S
• content formats: auditory, tactile, visual
• presentation: distinguishing visual content and
providing ways to understand audio content
• user interaction: typing, writing, and clicking
• design solutions: navigating and finding content
E VA L U AT I O N
T O O L S * * *
Color Oracle
Chrome Spectrum
WAVE-Web Accessibility Virtual
Evaluator
Web Accessibility Checker
AChecker
Accessibility Valet
Juicy Studio Accessibility Toolbar
***no tool can replace common sense; please keep that in mind
IMPLEMENTATION
IMPLEMENTATION
digital divide issues
mobile access
older users’ needs
low literacy/fluency
low bandwidth connections/
older technology
new/infrequent users
BENEFITS
FOR
OTHERS
W H AT ’ S I N
I T F O R
M E ?
D O E S I T M AT T E R H O W
A C C E S S I B L E Y O U R
C O N T E N T I S I F N O B O D Y
E V E R F I N D S I T ?
users spend more time
on your site consuming
your content and
engaging with your
brand
intuitive navigation
+
properly labeled links
and images
+
user friendly design
aesthetics
WHAT WE SEE vs WHAT SEARCH ENGINES SEE
ALTTEXT=SEARCHENGINESCAN“SEE”IMAGES
<img src=“grapes.jpg” alt=“A man
holding a bundle of grapes.”/>
CONTENT IS KING…
BUT HERE ARE SOME OTHER THINGS TOO
• Providing a clear and proper heading
structure and avoiding empty headings
• Providing descriptive link text (i.e., avoiding
“click here”)
• Ensuring page titles are descriptive, yet
succinct
• Not relying on JavaScript for things that
don’t need it
• Avoiding mouse dependent interaction
• Using standard web formats when possible
• Providing transcripts and captions for video
• Identifying the language of pages and page
content
• Allowing multiple ways of finding content
(e.g., search, a site map, table of contents,
clear navigation, etc.)
• Providing useful links to related and relevant
resources
• Ensuring URLs are human readable and
logical
• Presenting a clear and consistent navigation
and page structure
• Avoiding CSS and other stylistic markup to
present content or meaning*
• Defining abbreviations and acronyms
• Have unique and relevant titles and meta
descriptions
R E S O U R C E S T O C O N S I D E R
• WebAIM: web accessibility in mind: http://webaim.org/intro/
• Web Accessibility Initiative (WAI): http://www.w3.org/WAI/
• WAI Resources: http://www.w3.org/WAI/Resources/
• Quicktips: http://www.w3.org/WAI/quicktips/
• Implementation Plan for Web Accessibility: http://www.w3.org/WAI/impl/Overview
• Web Content Accessibility Guidelines: http://www.w3.org/WAI/intro/wcag.php
• Web Accessibility Evaluation Tools: Overview: http://www.w3.org/WAI/ER/tools/
• Accessibility Evaluation Resources: http://www.w3.org/WAI/eval/Overview.html
• Easy Checks - A First Review of Web Accessibility: http://www.w3.org/WAI/eval/preliminary
• Complete list of web accessibility evaluation tools: http://www.w3.org/WAI/ER/tools/complete
• Web Standards Project: http://www.webstandards.org/learn/faq/
Demystifying Accessible Websites - WCUS 2015
n a n c y t h a n k i . c o m
@ n a n c y t h a n k i

More Related Content

PDF
Accessible Websites: What are they and why should I care?
PPTX
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
PPTX
Online literacies
ODP
Digital Natives
PPT
Gov 2.0: Going Further with the Wikinomics Folks - Department of State
PPT
Social Networking
PPT
Social networking
PDF
What do they say the Social Web is?
Accessible Websites: What are they and why should I care?
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Online literacies
Digital Natives
Gov 2.0: Going Further with the Wikinomics Folks - Department of State
Social Networking
Social networking
What do they say the Social Web is?

Viewers also liked (14)

PDF
Let's Encrypt! Wait. Why? How? - WC Pune
PDF
The GPL: What It Means (And What It Doesn't) - WC Udaipur
PDF
Website Design with UX in Mind
PPTX
Creating a Promo Video using Your iPad and Editing with iMovie for iPad
PDF
Empathetc Development
PDF
SEO goes Local
PPTX
Resources and lessons for using WordPress in your business
PDF
The Goldilocks Zone: Finding the Perfect Length for Blog Posts
PDF
Staying Connected: Securing Your WordPress Website
PPTX
WordCamp Birmingham 2014: SEO Workshop: Best Practices for Better Website Tra...
PDF
Sanitizing, Validating and Escaping in WordPress Themes and Plugins
PDF
Typography and User Experience in Web Design
PDF
WordCamp Asheville 2015 - Connections
PDF
Why we publish -- WordCamp Birmingham 2014
Let's Encrypt! Wait. Why? How? - WC Pune
The GPL: What It Means (And What It Doesn't) - WC Udaipur
Website Design with UX in Mind
Creating a Promo Video using Your iPad and Editing with iMovie for iPad
Empathetc Development
SEO goes Local
Resources and lessons for using WordPress in your business
The Goldilocks Zone: Finding the Perfect Length for Blog Posts
Staying Connected: Securing Your WordPress Website
WordCamp Birmingham 2014: SEO Workshop: Best Practices for Better Website Tra...
Sanitizing, Validating and Escaping in WordPress Themes and Plugins
Typography and User Experience in Web Design
WordCamp Asheville 2015 - Connections
Why we publish -- WordCamp Birmingham 2014
Ad

Similar to Demystifying Accessible Websites - WCUS 2015 (20)

PPTX
Introduction To Web Accessibility
PPTX
Web Design Coursse ITECH2003-Lecture10.pptx
PDF
Accessibility Part 1
PDF
Icaweb402 a jenninecarlin
PPTX
Web Accessibility
PPTX
Web_Accessibility
PDF
Accessibility of Sport Organisation in online environment
PPTX
Web Accessibility
PDF
Access Not Denied: Accessible Websites for All
PPT
Designing 4 Disabilities
PDF
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
PPTX
Best Practices for Building Accessible Websites in Wordpress
PPT
Plan For Accessibility - TODCon 2008
PPTX
Web Accessibility Overview
PPT
Wordcamp Toronto 2013
ODP
Digital Divide And Accessibility
PPTX
Web Accessibility: MISSION POSSIBLE!
PPTX
Website accessibility presentation made at MWLUG 2017 in Washington DC
PPTX
Web accessibility workshop 1
ODP
Digital Divide And Accessibility
Introduction To Web Accessibility
Web Design Coursse ITECH2003-Lecture10.pptx
Accessibility Part 1
Icaweb402 a jenninecarlin
Web Accessibility
Web_Accessibility
Accessibility of Sport Organisation in online environment
Web Accessibility
Access Not Denied: Accessible Websites for All
Designing 4 Disabilities
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
Best Practices for Building Accessible Websites in Wordpress
Plan For Accessibility - TODCon 2008
Web Accessibility Overview
Wordcamp Toronto 2013
Digital Divide And Accessibility
Web Accessibility: MISSION POSSIBLE!
Website accessibility presentation made at MWLUG 2017 in Washington DC
Web accessibility workshop 1
Digital Divide And Accessibility
Ad

Recently uploaded (20)

PDF
Decoding a Decade: 10 Years of Applied CTI Discipline
PDF
Unit-1 introduction to cyber security discuss about how to secure a system
PDF
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
PPTX
Job_Card_System_Styled_lorem_ipsum_.pptx
PDF
RPKI Status Update, presented by Makito Lay at IDNOG 10
PDF
💰 𝐔𝐊𝐓𝐈 𝐊𝐄𝐌𝐄𝐍𝐀𝐍𝐆𝐀𝐍 𝐊𝐈𝐏𝐄𝐑𝟒𝐃 𝐇𝐀𝐑𝐈 𝐈𝐍𝐈 𝟐𝟎𝟐𝟓 💰
PPTX
artificial intelligence overview of it and more
PPTX
Funds Management Learning Material for Beg
PDF
Cloud-Scale Log Monitoring _ Datadog.pdf
PPTX
Internet___Basics___Styled_ presentation
PPTX
presentation_pfe-universite-molay-seltan.pptx
PPT
tcp ip networks nd ip layering assotred slides
PPT
isotopes_sddsadsaadasdasdasdasdsa1213.ppt
PPTX
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
PPTX
Slides PPTX World Game (s) Eco Economic Epochs.pptx
PDF
Automated vs Manual WooCommerce to Shopify Migration_ Pros & Cons.pdf
PDF
FINAL CALL-6th International Conference on Networks & IOT (NeTIOT 2025)
PDF
An introduction to the IFRS (ISSB) Stndards.pdf
DOCX
Unit-3 cyber security network security of internet system
PDF
The Internet -By the Numbers, Sri Lanka Edition
Decoding a Decade: 10 Years of Applied CTI Discipline
Unit-1 introduction to cyber security discuss about how to secure a system
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
Job_Card_System_Styled_lorem_ipsum_.pptx
RPKI Status Update, presented by Makito Lay at IDNOG 10
💰 𝐔𝐊𝐓𝐈 𝐊𝐄𝐌𝐄𝐍𝐀𝐍𝐆𝐀𝐍 𝐊𝐈𝐏𝐄𝐑𝟒𝐃 𝐇𝐀𝐑𝐈 𝐈𝐍𝐈 𝟐𝟎𝟐𝟓 💰
artificial intelligence overview of it and more
Funds Management Learning Material for Beg
Cloud-Scale Log Monitoring _ Datadog.pdf
Internet___Basics___Styled_ presentation
presentation_pfe-universite-molay-seltan.pptx
tcp ip networks nd ip layering assotred slides
isotopes_sddsadsaadasdasdasdasdsa1213.ppt
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
Slides PPTX World Game (s) Eco Economic Epochs.pptx
Automated vs Manual WooCommerce to Shopify Migration_ Pros & Cons.pdf
FINAL CALL-6th International Conference on Networks & IOT (NeTIOT 2025)
An introduction to the IFRS (ISSB) Stndards.pdf
Unit-3 cyber security network security of internet system
The Internet -By the Numbers, Sri Lanka Edition

Demystifying Accessible Websites - WCUS 2015

  • 1. D E M Y S T I F Y I N G A C C E S S I B L E W E B S I T E S BEST PRACTICES @nancythanki
  • 13. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – T I M B E R N E R S - L E E W 3 C D I R E C T O R A N D I N V E N T O R O F T H E W O R L D W I D E W E B
  • 14. U N C O N V E N T I O N O F T H E R I G H T S O F P E R S O N S W I T H D I S A B I L I T I E S Article 21: Freedom of expression and opinion, and access to information States Parties shall take all appropriate measures to ensure that persons with disabilities can exercise the right to freedom of expression and opinion, including the freedom to seek, receive and impart information and ideas on an equal basis with others and through all forms of communication of their choice, as defined in article 2 of the present Convention, including by: (a) Providing information intended for the general public to persons with disabilities in accessible formats and technologies appropriate to different kinds of disabilities in a timely manner and without additional cost; (b) Accepting and facilitating the use of sign languages, Braille, augmentative and alternative communication, and all other accessible means, modes and formats of communication of their choice by persons with disabilities in official interactions; (c) Urging private entities that provide services to the general public, including through the Internet, to provide information and services in accessible and usable formats for persons with disabilities; (d) Encouraging the mass media, including providers of information through the Internet, to make their services accessible to persons with disabilities; (e) Recognizing and promoting the use of sign languages. aka the UN recognizes Web accessibility as a basic human right it is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities
  • 15. potential clients + worldwide users = equal unprecedented access to information and equal opportunity
  • 16. 20 million blind adults in the US 10% use screen readers 8% of men and 0.5% of women are color blind FA C T S
  • 18. T Y P E S O F D I S A B I L I T I E S auditory cognitive / neurological physical visual
  • 19. A S S I S T I V E T E C H N O L O G Y braille display screen reader text-to-speech voice browser voice recognition keyboard navigation
  • 20. S C R E E N R E A D E R S nvaccess’ NVDA reader (Microsoft Windows XP or later) Chrome Vox Mozilla’s Fangs Screen Reader Emulator Apple’s VoiceOver
  • 21. W H AT makes a website accessible? H O W can you know if yours is accessible?
  • 22. users spend more time on your site consuming your content and engaging with your brand intuitive navigation + properly labeled links and images + user friendly design aesthetics
  • 23. A D O P T I V E S T R AT E G I E S • content formats: auditory, tactile, visual • presentation: distinguishing visual content and providing ways to understand audio content • user interaction: typing, writing, and clicking • design solutions: navigating and finding content
  • 24. E VA L U AT I O N T O O L S * * * Color Oracle Chrome Spectrum WAVE-Web Accessibility Virtual Evaluator Web Accessibility Checker AChecker Accessibility Valet Juicy Studio Accessibility Toolbar ***no tool can replace common sense; please keep that in mind
  • 27. digital divide issues mobile access older users’ needs low literacy/fluency low bandwidth connections/ older technology new/infrequent users BENEFITS FOR OTHERS
  • 28. W H AT ’ S I N I T F O R M E ?
  • 29. D O E S I T M AT T E R H O W A C C E S S I B L E Y O U R C O N T E N T I S I F N O B O D Y E V E R F I N D S I T ?
  • 30. users spend more time on your site consuming your content and engaging with your brand intuitive navigation + properly labeled links and images + user friendly design aesthetics
  • 31. WHAT WE SEE vs WHAT SEARCH ENGINES SEE ALTTEXT=SEARCHENGINESCAN“SEE”IMAGES <img src=“grapes.jpg” alt=“A man holding a bundle of grapes.”/>
  • 32. CONTENT IS KING… BUT HERE ARE SOME OTHER THINGS TOO • Providing a clear and proper heading structure and avoiding empty headings • Providing descriptive link text (i.e., avoiding “click here”) • Ensuring page titles are descriptive, yet succinct • Not relying on JavaScript for things that don’t need it • Avoiding mouse dependent interaction • Using standard web formats when possible • Providing transcripts and captions for video • Identifying the language of pages and page content • Allowing multiple ways of finding content (e.g., search, a site map, table of contents, clear navigation, etc.) • Providing useful links to related and relevant resources • Ensuring URLs are human readable and logical • Presenting a clear and consistent navigation and page structure • Avoiding CSS and other stylistic markup to present content or meaning* • Defining abbreviations and acronyms • Have unique and relevant titles and meta descriptions
  • 33. R E S O U R C E S T O C O N S I D E R • WebAIM: web accessibility in mind: http://webaim.org/intro/ • Web Accessibility Initiative (WAI): http://www.w3.org/WAI/ • WAI Resources: http://www.w3.org/WAI/Resources/ • Quicktips: http://www.w3.org/WAI/quicktips/ • Implementation Plan for Web Accessibility: http://www.w3.org/WAI/impl/Overview • Web Content Accessibility Guidelines: http://www.w3.org/WAI/intro/wcag.php • Web Accessibility Evaluation Tools: Overview: http://www.w3.org/WAI/ER/tools/ • Accessibility Evaluation Resources: http://www.w3.org/WAI/eval/Overview.html • Easy Checks - A First Review of Web Accessibility: http://www.w3.org/WAI/eval/preliminary • Complete list of web accessibility evaluation tools: http://www.w3.org/WAI/ER/tools/complete • Web Standards Project: http://www.webstandards.org/learn/faq/
  • 35. n a n c y t h a n k i . c o m @ n a n c y t h a n k i