Date post: | 27-Dec-2015 |
Category: |
Documents |
Upload: | malcolm-arnold |
View: | 221 times |
Download: | 0 times |
Is Your Website Accessible?
Stephanie M. BrownSchool of Health, Physical Education, and RecreationIndiana University
Session Outline
What is web accessibility? Web accessibility guidelines Evaluating your own website Resources
Web Accessibility - What it is Everyone, regardless of ability, can
use the web Navigate Understand Interact Contribute
If you are conveying information, everybody should have equal access to it
Disabilities to Keep In Mind
Visual Blindness Low vision Color blindness
Auditory Deafness Hard of hearing
Physical Motor disabilities
Speech Speech disabilities
Cognitive/neurological Dyslexia/dyscalculia Attention deficit Intellectual disabilities Memory impairments Seizure disorders
Web Accessibility - Why is it so Important? It’s the right thing to do
It’s easy to do
It’s the law Section 508 ADA
It can increase your market
It can improve the experience for those without disabilities
What are the guidelines for evaluating accessibility? World Wide Web Consortium (W3C)
Web Accessibility Initiative (WAI). Web Content Accessibility Guidelines Current version 1.0 2.0 due out soon WCAG 1.0 versus WCAG 2.0
Applies more broadly to different technologies More comprehensive Testable Organized differently (guidelines and checkpoints
versus principles and success criteria) If you conform to 1.0, you will probably conform
to 2.0
Alternative Text
“Provide equivalent alternatives to auditory and visual content”
Be as descriptive but succinct as possible
Use longdesc="my_description.txt“ if necessary Caption video and multi-media (
http://www.hper.indiana.edu/advancement/Carlson%20Lecture%20February%202008.qt.smil)
Alt Text turned off (http://www.brucelawson.co.uk/2008/is-alt-text-necessary-for-photo-sharing-sites)
Not So Good – wedding photoGood – a bride feeds wedding cake to the groom
Color
“Don’t rely on color alone” Information conveyed in color
should also be available without color
Provide sufficient color contrast http://www.angelfire.com/super/badwebs/
Style Sheets
“Use markup and style sheets and do so properly”
Pages should be readable without a style sheet Separate structure from
presentation HTML and CSS (
http://www.brucelawson.co.uk/2008/is-alt-text-necessary-for-photo-sharing-sites/)
Use the right DOCTYPE HTML 4.01 Transitional
Natural Language
“Clarify natural language usage” Identify primary language – EN Avoid abbreviations and acronyms
or write them out the first time
Tables
“Create tables that transform gracefully”
Avoid using tables for layouts Use CSS for style AND positioning
Identify row and column headers <TH id="header1"> and <TD
headers="header1">
Newer Technologies
“Ensure that pages featuring new technologies transform gracefully” Check to make sure that pages which
use scripts work when scripts are turned off (http://www.w3schools.com/js/tryit.asp?filename=tryjs_text)
NOSCRIPT elements <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> <noscript>Your browser does not support JavaScript!</noscript>
Time-Sensitive Content Changes
“Ensure user control of time-sensitive content changes”
Avoid screen flicker, scrolling and text blink (http://www.angelfire.com/super/badwebs/)
Embedded User Interfaces
“Ensure direct accessibility of embedded user interfaces”
Javascripts, applets, embedded video Event-handlers
Use onmousedown with onkeydown
Device Independence
“Design for device-independence”
Input/output devices Mouse, keyboard, voice, head wand
Tab indexes and access keys (http://www.ncaonline.org/) (http://www.alistapart.com/articles/accesskeys/)
Interim Solutions
“Use interim accessibility solutions”
No pop-ups or new windows without alerting user
Don’t use auto refresh
Accessible Technologies
“Use W3C technologies and guidelines”
HTML, XHTML and XML for structure CSS and XSL for style Avoid deprecated tags Provide alternatives to non-
accessible technologies (PDF’s, etc.)
Context and Orientation Info
“Provide context and orientation information”
Helps users understand complex pages Group blocks of information
appropriately
Navigation
“Provide clear navigation mechanisms”
Site map, understandable navigation, skip over navigation
<a href="#content" accesskey="2" title="Skip to content">content</a>
http://www.w3.org/WAI/
Not So Good – for a description of our program, click hereGood – for a description of our program, please visit our program info page.
How Do I Evaluate My Website? Review guidelines and plan ahead! Examine pages using graphical browsers
Use different types and versions Turn off style sheets, images, etc.
Examine pages using specialized browsers Text-only Screen readers
Screen Reader Simulator (http://www.webaim.org/simulations/screenreader.php)
Check PDF’s and other technologies PDF Read Out Loud Feature (
http://www.webaim.org/resources/reader/#outloud) Validate site for accessibility when doing other validation
checks Have actual users test it out
http://www.indiana.edu/~iuadapts/index.html
Browser ChecksIE7 Firefox 1.5 Opera 9.2
Zoom -lower right hand side of screen-magnifying glass-up to 1000%
Needs add-on -upper right hand side of screen-magnifying glass-up to 1000%
Change colors -Tools, Internet Options, Accessibility, Ignore Colors
-Tools, Options, Content, Colors
-Tools, Preferences, Web Pages-Or User Mode
Change text size
-Page, Text Size, largest – smallest
-View, Text Size, Increase/Decrease
-Author/User Mode, A++, A+ or A
Choose font -Tools, Internet Options, Fonts (webpage and plain text)
-Tools, Options, Content, Fonts and Colors
-Tools, Preferences, Web pages
Turn off style sheets
-Tools, Internet Options, Accessibility, Formatting (check all 3)
-View, Page Style, No Style -User Mode
Turn off images
-Tools, Internet Options, Advanced, Multi-media, uncheck Show Pictures
-Tools, Options, Content, uncheck Load Images
-Show Images
Turn off scripting
-Tools, Internet Options, Security, Custom Level, Scripting, disable all
-Tools, Options, Content, uncheck Enable Java and Enable Javascript
-Tools, Quick Preferences, uncheck Enable Java and Javascript
Resources Web Accessibility
Web Accessibility Initiative (http://www.w3.org/WAI/)
WebAIM (http://www.webaim.org/) Dive Into Accessibility (http://
diveintoaccessibility.org/) Web Axe (http://webaxe.blogspot.com/) IU Standards (http://visualidentity.iu.edu/media/
standards.shtml) Section 508
Section508.gov (http://www.section508.gov) Validation Tools
Accessify.com (http://accessify.com/tools-and-wizards/)
ATRC Web Accessibility Checker (http://checker.atrc.utoronto.ca/index.html)
Hermish (http://www.hermish.com/) Cynthia Says (http://www.cynthiasays.com/)
Resources Browsers
Lynx (http://www.vordweb.co.uk/standards/download_lynx.htm)
JAWS (http://www.freedomscientific.com/fs_products/software_jaws.asp)
Screen Reader Simulator (http://www.webaim.org/simulations/screenreader.php)
Opera (http://www.opera.com/) Firefox Add-ons (https://addons.mozilla.org/en-US/firefox/)
Other Colorblind Web Page Filter (http://colorfilter.wickline.org/) Anybrowser.com (http://www.anybrowser.com/siteviewer.html) Using Opera to check accessibility
(http://www.webaim.org/resources/opera/) Magpie (http://ncam.wgbh.org/webaccess/magpie/) Adobe Accessibility Resource Center
(http://www.adobe.com/accessibility/) Flash (http://www.webaim.org/techniques/flash/) RIA (http://webaim.org/techniques/aria/) PDF Read Out Loud
(http://www.webaim.org/resources/reader/#outloud)