Demystifying Accessible Websites - WCUS 2015
-
Upload
nancy-thanki -
Category
Internet
-
view
1.616 -
download
0
Transcript of Demystifying Accessible Websites - WCUS 2015
![Page 1: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/1.jpg)
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 SBEST PRACTICES
@nancythanki
![Page 2: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/2.jpg)
![Page 3: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/3.jpg)
![Page 4: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/4.jpg)
![Page 5: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/5.jpg)
![Page 6: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/6.jpg)
![Page 7: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/7.jpg)
![Page 8: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/8.jpg)
![Page 9: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/9.jpg)
![Page 10: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/10.jpg)
![Page 11: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/11.jpg)
![Page 12: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/12.jpg)
![Page 13: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/13.jpg)
“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
![Page 14: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/14.jpg)
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
![Page 15: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/15.jpg)
potential clients + worldwide users
=
equal unprecedented access to information and equal opportunity
![Page 16: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/16.jpg)
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
![Page 17: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/17.jpg)
DeuteranopiaNormal
![Page 18: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/18.jpg)
T Y P E S O F D I S A B I L I T I E S
auditory
cognitive / neurological
physical
visual
![Page 19: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/19.jpg)
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
![Page 20: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/20.jpg)
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
![Page 21: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/21.jpg)
W H AT makes a website accessible?
H O W can you know if yours is accessible?
![Page 22: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/22.jpg)
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
![Page 23: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/23.jpg)
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
![Page 24: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/24.jpg)
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
![Page 25: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/25.jpg)
IMP
LE
ME
NT
AT
ION
![Page 26: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/26.jpg)
IMP
LE
ME
NT
AT
ION
![Page 27: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/27.jpg)
digital divide issues
mobile access
older users’ needs
low literacy/fluency
low bandwidth connections/older technology
new/infrequent usersB E N E F I T S
F O R O T H E R S
![Page 28: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/28.jpg)
W H AT ’ S I N I T F O R M E ?
![Page 29: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/29.jpg)
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 ?
![Page 30: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/30.jpg)
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
![Page 31: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/31.jpg)
WHAT WE SEE vs WHAT SEARCH ENGINES SEE
ALT TEXT = SEARCH ENGINES CAN “SEE” IMAGES
<img src=“grapes.jpg” alt=“A man holding a bundle of grapes.”/>
![Page 32: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/32.jpg)
C O N T E N T I S K I N G … B U T H E R E A R E S O M E O T H E R T H I N G S T O O
• 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
![Page 33: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/33.jpg)
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/
![Page 34: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/34.jpg)
![Page 35: Demystifying Accessible Websites - WCUS 2015](https://reader034.fdocuments.in/reader034/viewer/2022050614/589d38631a28abd17d8b5cdf/html5/thumbnails/35.jpg)
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