Title: Designing Web Pages for Accessibility
1Designing Web Pages for Accessibility
- Mary Henthorn
- Technology Investigation Center
2AccessibleMeans the ability to receive, use,
and manipulate data and operate controls included
in information technology Convey
Information Provide Functionality By
Nonvisual Means
3Why Build Accessible Websites?
- Reach a Wider Audience
- Clearer Information and Functionality
- Its the Law
4The Essence of the Internet
- "The power of the Web is in its universality.
Access by everyone regardless of disability is an
essential aspect." - Tim Berners-Lee, W3C Director and Inventor of the
World Wide Web
5How are Computers Made Accessible?
- Hardware or operating systems
- Features in software
- Assistive technology
- Specialized software
6Assistive Technology
- Software program reads text on the screen using
speech synthesizer. - Identifies graphics like buttons or icons
- Control computer using keyboard instead of mouse
- Refreshable Braille display
Braille display
7How Browsers Work
- Hypertext Markup Language (HTML)
- NOT a programming language
- Markup instructions for print/display
- Tags are standard HTML markup messages
- IE/Netscape/Opera interpret HTML
- Linear language
8How Screenreaders Work
- Finds text content within HTML tags
- Ignores HTML tags for appearance
- Reads content
- Reads HTML tag messages
- Cant read pictures
- Linear language!
9JAWS Example
10Information Technology Access for the Blind
Law(Act 1227 of 1999)
11Arkansas Standards
- Effective, interactive control and use readily
achievable by nonvisual means. - Compatible with information technology used by
other individuals with whom the blind or visually
impaired individual must interact. - Integrated into networks used to share
communications
12IT Access for the Blind Law (Act 1227)
- Equivalent access by nonvisual means.
- Exceptions
- (a) there is no available means by which the
product can be made accessible and there is no
alternate product - (b) its meaning cannot be conveyed nonvisually.
13Section 508Part 1194 Electronic and
Information Technology Accessibility Standards
14Who is Covered in Section 508?
- Federal department and agencies including the US
Postal Service - Contractors providing services or products to
Federal agencies must provide Section 508
compliant deliverables. - Agencies or business receiving any type of
federal funds.
15Types of Impairments
- Visual
- Motor
- Hearing
- Cognitive, Speech, and Neurological
16Visual Impairments
- Low vision
- Color blindness
- Blindness
Marla Runyan First legally blind person to
compete in the Olympics - 2000 Sydney
Stevie Wonder Singer and song writer
17Color Blindness
- Imagine if you were colored blind and faced with
the following - Click on the Green button to continue, the Yellow
button if you need help, or the Red button if you
want to quit.
18Color Blindness
19Color Contrasts
20How To Make An Accessible Webpage
- (a) A text equivalent for every graphic
- (b) Equivalent alternatives for any multimedia
presentation - (c) information conveyed with color is also
available without color - (d) Documents shall be organized so they are
readable without requiring an associated style
sheet.
21Make That Page Accessible
- (e) Redundant text links for server-side image
map - (f) Client-side image maps preferred
- (g) Identify row and column headers for data
tables. - (h) Use markup to name cells in complex tables
22How To Make It Accessible
- (i) Title Frames
- (j) Avoid causing the screen to flicker with a
frequency greater than 2 Hz and lower than 55
Hz. - (k) A text-only page, with equivalent information
or functionality, if needed
23You Can Do It!
- (l) Provide descriptive text with scripts
- (m) Provide alternatives to applets and other
imbedded objects
24Rest of the 508 Standards
- (n) Forms must allow all functionality including
directions and cues - (o) Permit users to skip repetitive navigation
links - (p) When a timed response is required use alerts
and given sufficient time to indicate more time
is required.
25Checklist for Testing Your Web Pages for
Accessibility
- Turn off graphics, make sure the ALT text
displayed makes the page usable. - Turn off sounds, make sure no important
instructions are lost. - Use the High Contrast option in the Accessibility
Options section of Control Panel, restart the
browser, make sure the page is still readable.
26Checklist for Testing Your Web Pages for
Accessibility
- Use Custom Font Sizes in the Display section of
Control Panel. - Use the largest font size supported by the
browser (the largest is only available when High
Contrast mode is turned on). - Resize the browser window larger and smaller.
27Checklist for Testing Your Web Pages for
Accessibility
- Navigate using the keyboard, make sure TAB
traverses all links in reasonable order and that
CTRLTAB moves between panes or sections. - Use an analysis tool, to examine your pages.
- If you have access to a screen reader (many can
be downloaded for free) run your pages through it
to make sure it reads correctly.
28Bobby Will Check Your Page
- Center for Applied Special Technology
- http//www.cast.org/bobby/
- http//crowleys.crsc.k12.ar.us
29Free Web Page Check
- Welcome to Bobby WorldWide
- About Bobby Terms of Use Advanced Options
FAQ Support Approved Sites Online
Discussions - URLhttp//crowleys.crsc.k12.ar.us
- Web Content Accessibility Guidelines 1.0
- U.S. Section 508 Guidelines
30Results of Bobby Test
- Section 508 Accessibility
- This page does not meet the requirements for
Section 508 Approved status. Below is a list of 1
Section 508 accessibility error(s) found - Provide alternative text for all images. (5
instances) Lines 19, 23, 31, 65, 68
31Text Equivalent for Graphics
- A text equivalent for every graphic
- Look at Crowley's Ridge page source
- Look at correct source
32Alt Tags
- Most authoring tools provide a space for you to
enter this information - Or put insert the Alt tag with a text editor
- ltimg border"0" src"main.jpg" altCrowleys
Ridge Coop graphic width"650" height"65"gt
33Use Column Headers
- ltTABLE border1gt
- ltTRgt
- ltTDgtlt/TDgt
- ltTHgtCol. 1 headerlt/THgt
- ltTHgtCol. 2 headerlt/THgt
- lt/TRgt
34Use Row Headers
- ltTRgt
- ltTHgtRow 1 headerlt/THgt
- ltTDgtC1R1lt/TDgt
- ltTDgtC1R2lt/TDgt
- lt/TRgt
35Specify the Language
- ltHTML lang"it"gt
- ltHEADgtlt/HEADgt
- ltBODYgt
- ltPgtVolete sapere l'origine della parola
cappuccino, il popolare caffelatte
all'italiana?lt/Pgt - lt/BODYgt
- lt/HTMLgt
36Acronyms
- TIC - read like tic
- CRC - read like CRC
- C R C says each letter
37Tab Order
- ltFORM METHOD"POST"gtltINPUT TYPE"SUBMIT"
VALUE"Enter" tabindex2"gtWhat's your favorite
color?ltBRgtRed ltINPUT TYPE"CHECKBOX"
NAME"CBVar1" VALUE"CB1" tabindex1"gtltBRgt - lt/FORMgt
38Tab Order
- There is a 90 chance of snow later this evening
- Classes at all elementary schools will start 1
hour late tomorrow
There is a 90 Classes at all chance of snow
elementary schools later this evening will start
1 hour late tomorrow
39Pop-ups
- Visit The Wonderful World of Sponge (Please note
this link will open the page in a new browser
window.)
40Background Color
- ltBODY BGCOLOR"FFFFFF"gtThe above example
provides a white background.
41Portable Document Files (PDF)
- Convert to Adobe 5.0 format
- Save as Accessible PDF
42Accessible Web Pages
- Convey your website message clearly
- Pave the way for new technologies
- Expand your audience
- Comply with state and federal law
43Beyond Web Pages
- Laws apply to all Information Technology, not
just Web pages - Off-the-shelf and Custom Software
- Applications developed with Visual Basic, Java
and any other language - Hardware
44Prepare for Wireless Application Protocol Devices
- Prepare websites for on-the-fly conversion to WAP
devices
45Prepare for Foreign Language Translation
- Tools are available for automatic translation
- Opportunities for foreign language studies
- Reach non-English speaking parents and others
with interests in your school
46Improve Organizational Image
- An accessible web site promotes a favorable image
in the community
47Reduce Legal Uncertainties
- Federal Section 508 of ADA
- Information Technology Access for the Blind Law
(Act 1227 of 1999). - AOL, HR Block, Intuit, Bank of America, and
Wells Fargo have had legal action brought against
them because of inaccessible web sites. - In Arkansas the Directors of DHS, DIS, and DFA
have been named in a lawsuit over an
applications accessibility.
48Section 508
- Federal IT Accessibility Initiative
- http//www.section508.gov
49W3C
- Web Accessibility Initiative,
- World Wide Web Consortium
- http//www.w3.org/WAI/
50Tutorials
- Curriculum for Web Content Accessibility
- http//www.w3.org/WAI/wcag-curric/
- Webaim Web Accessibility In Mind
- http//www.webaim.org
- Web Developers Virtual Library
- http//www.wdvl.com/Authoring/HTML/
51Testers
- Bobby Web page tester
- http//www.cast.org/bobby/
- The Wave page tester
- http//www.temple.edu/inst_disabilities/piat/wave/
index.html
52PDFs
- Adobes Accessibility Resource
- http//access.adobe.com/
53Language Codes
- http//www.oasis-open.org/cover/nisoLang3-1994.htm
l
54Beyond HTML
- Java Accessibility and Usability Work
- http//trace.wisc.edu/world/java/java.htm
- Microsoft Accessibility
- http//www.msdn.microsoft.com/library/default.asp?
url/nhp/Default.asp?contentid28000544
55HELP!!!
- TIC Standards for Equivalent Access Ongoing
Project - http//www.oit.state.ar.us/TIC/SpecTopics/SEA/SEA_
Home.asp - David.McMahon_at_mail.state.ar.us