planning an accessible website: beyond alt tags
DESCRIPTION
Planning an Accessible Website: Beyond Alt Tags. Stephanie M. Randolph School of Health, Physical Education, and Recreation Indiana University. Session Outline. What is web accessibility? Why is accessibility important? What are the guidelines for evaluating accessibility? - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/1.jpg)
Planning an Accessible Website:Beyond Alt TagsStephanie M. RandolphSchool of Health, Physical Education, and RecreationIndiana University
![Page 2: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/2.jpg)
Session Outline
What is web accessibility? Why is accessibility
important? What are the guidelines for
evaluating accessibility? How do I evaluate my
website? Resources
![Page 3: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/3.jpg)
What is Web Accessibility? Anyone regardless of ability can
use the web. People can understand, navigate,
interact and contribute to the web.
Accessibility benefits everyone, not just individuals with disabilities.
![Page 4: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/4.jpg)
Why is Accessibility Important? The Web is becoming a bigger
part of everyone’s lives The Web can make many tasks
easier for individuals with disabilities
Accessibility is good for business Some websites are required by
law to be accessible (Section 508) Web accessibility benefits
everyone
![Page 5: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/5.jpg)
Different Disabilities That Can Affect Web Accessibility Visual disabilities
Blindness Low vision Color blindness
Hearing impairments Deafness Hard of hearing
Physical disabilities Speech disabilities Cognitive and neurological disabilities
Dyslexia and dyscalculia Attention deficit disorder Intellectual disabilities Memory impairments Mental health disabilities Seizure disorders
Multiple Disabilities Aging-related conditions
![Page 6: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/6.jpg)
Other Considerations
There are a wide array of different browsers to consider when designing accessible websites Internet Explorer, Firefox, Opera,
text only, screen readers Different versions
Many individuals still use a dial-up modem to connect to the internet
Some people may only use one type of input devise
![Page 7: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/7.jpg)
Section 508 1998 Amendment to the
Rehabilitation Act Federal agencies are required to
make their electronic and information technology accessible to employees and the public
Criteria for web-based applications based on the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).
![Page 8: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/8.jpg)
What are the guidelines for evaluating accessibility? 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
![Page 9: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/9.jpg)
Themes of Accessible Design Ensure graceful transformation
Guidelines 1-11 Separate structure from
presentation Provide text alternatives Provide info that serves the same
purpose as audio or visual in ways suited for alternate sensory channels
Create documents that do not rely on one type of hardware
![Page 10: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/10.jpg)
Themes of Accessible Design Make content understandable
and navigable Guidelines 12-14 Make language clean and simple Provide navigation tools and
orientation info that is understandable
![Page 11: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/11.jpg)
Priorities
Priority 1: Must satisfy this checkpoint
Priority 2: Should satisfy this checkpoint
Priority 3: May address this checkpoint
![Page 12: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/12.jpg)
Guideline 1
1. Provide equivalent alternatives to auditory and visual content Be as descriptive but succinct as
possible
Long descriptions <IMG src="97sales.gif"
alt="Sales for 1997" longdesc="sales97.html"> Caption video and multi-media
http://www.ncaonline.org/monographs/19inclusion.shtml
Not So Good – wedding photoGood – a bride feeds wedding cake to the groom
![Page 13: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/13.jpg)
Guideline 2
2. Don’t rely on color alone Examine with colors turned off Provide sufficient color contrast
Not So Good – Our school is the best in the nation.Good – Our school is the best in the nation.
![Page 14: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/14.jpg)
Guideline 3 and 4
3. Use markup and style sheets and do so properly Separate structure from
presentation HTML and CSS
Use the right DOCTYPE HTML 4.01 Transitional
4. Clarify natural language usage Identify primary language – EN Write out abbreviations the first
time they occur in a document
![Page 15: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/15.jpg)
Guideline 5 and 6
5. Create tables that transform gracefully Avoid using tables for layouts Identify row and column headers
<TH id="header1"> and <TD headers="header1">
6. Ensure that pages featuring new technologies transform gracefully Test pages without style sheets and
scripting
![Page 16: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/16.jpg)
Guideline 7 and 8
7. Ensure user control of time-sensitive content changes Avoid screen flicker and text blink
8. Ensure direct accessibility of embedded user interfaces http://www.indiana.edu/~hperdev/
webrequest/index.php
![Page 17: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/17.jpg)
Guideline 9 and 10
9. Design for device-independence Tab indexes and access keys
http://www.ncaonline.org/index.shtml
10. Use interim solutions No pop-ups without alerting user Don’t use auto refresh
![Page 18: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/18.jpg)
Guideline 11 and 12
11. Use W3C technologies and guidelines HTML, XHTML and XML for structure SMIL for multi-media CSS and XSL for style PNG for graphics Avoid deprecated tags
12. Provide context and orientation information Identify frames (or don’t use them)
![Page 19: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/19.jpg)
Guideline 13 and 14
13. Provide clear navigation mechanisms
Skip over navigation <a href="#content" accesskey="2"
title="Skip to content">content</a>
14. Ensure that documents are clear and simple
Simple language and grammar
Not So Good – for a description of our program, click hereGood – for a description of our program, please visit our program info page.
![Page 20: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/20.jpg)
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
Check PDF’s and other technologies Validate site for accessibility when
doing other validation checks Have actual users test it out
![Page 21: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/21.jpg)
Browser ChecksIE7 Firefox 1.5 Opera 9.2 Netscape
8.1
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, Colors
-Tools, Options, Content, Colors
-Tools, Preferences, Web Pages-Or User Mode
-Tools, Options, General, Fonts and Colors
Change text size
-Page, Text Size, largest – smallest
-View, Text Size, Increase/Decrease
-Author/User Mode, A++, A+ or A
-View, Text Size, Increase/Decrease
Choose font
-Tools, Internet Options, Fonts (webpage and plain text)
-Tools, Options, Content, Fonts and Colors
-Tools, Preferences, Web pages
-Tools, Options, General, Fonts and Colors
Turn off style sheets
-Tools, Internet Options, Accessibility, Formatting (check all 3)
-View, Page Style, No Style
-User Mode -View, Page Style, No Style
Turn off images
-Tools, Internet Options, Advanced, Multi-media, uncheck Show Pictures
-Tools, Options, Content, uncheck Load Images
-Show Images -Tools, Options, Site Controls, uncheck Allow Images to be displayed
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
-Tools, Options, Site Controls, uncheck Enable Java and Javascript
![Page 22: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/22.jpg)
Resources Web Accessibility
Web Accessibility Initiative (http://www.w3.org/WAI/) WebAIM (http://www.webaim.org/) Accessibility Forum (http://
www.accessibilityforum.org/) Dive Into Accessibility (http://diveintoaccessibility.org/) Web Axe (http://webaxe.blogspot.com/)
Section 508 Section508.gov (http://www.section508.gov)
Validation Tools Accessify.com (http://accessify.com/tools-and-
wizards/) Watchfire (http://webxact.watchfire.com/) ATRC Web Accessibility Checker (http://
checker.atrc.utoronto.ca/index.html) Hermish (http://www.hermish.com/) Cynthia Says (http://www.cynthiasays.com/) Anybrowser.com
(http://www.anybrowser.com/siteviewer.html)
![Page 23: Planning an Accessible Website: Beyond Alt Tags](https://reader036.vdocument.in/reader036/viewer/2022062407/56812a76550346895d8dfcec/html5/thumbnails/23.jpg)
Resources Browsers
Lynx (http://www.vordweb.co.uk/standards/download_lynx.htm)
JAWS (http://www.freedomscientific.com/fs_products/software_jaws.asp)
Opera (http://www.opera.com/) Other
Colorblind Web Page Filter (http://colorfilter.wickline.org/)
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/) Web developer toolbar
(http://chrispederick.com/work/web-developer/) Flash (http://www.webaim.org/techniques/flash/)