five tips to improve web accessibility presenter — laurie quon los alamos national laboratory 2003...
Post on 20-Dec-2015
218 views
TRANSCRIPT
Five Tips to Improve Web Accessibility
Presenter — Laurie Quon
Los Alamos National Laboratory
2003 InterLab Conference
Stanford Linear Accelerator Center
November 6, 2003
UNCLASSIFIED
UNCLASSIFIED
Obstacles to Web Accessibility
• Elements invisible to assistive technology or add confusion/disorientation
• Disjointed flow of content
• No elements to communicate page structure
Tip 1 — Test Your Site
• Tab through links on site pages
• View pages on text browser such as Lynx
• Read pages using assistive technology such as JAWS or IBM Homepage Reader
Tip 1 — Test Your Site
Look for
• Missing alt attributes in image tags
• Links do not appear in the intended order
HTML for Image Alt attribute
• For graphic images or graphic links
<IMG SRC=“keyboard.gif” alt=“Photo of hands typing on a computer keyboard”>
<IMG SRC=“LANLHome.gif” alt=“Go to Los Alamos National Laboratory Homepage”>
HTML for Image Alt attribute
• For spacer images or design images that do not communicate information
<IMG SRC=“shim.gif” alt=“ ”>
<IMG SRC=“GoldBar.gif” alt=“ ”>
Tip 2 — Add “Skip Nav” Links
• To skip repeating content
• To jump directly to secondary site navigation
• To jump directly to page content
HTML for “Skip Nav” Links
• Skip Nav link using transparent gif
<A href="#5Tips"><IMG src="shim.gif" alt=”Skip to 5 web accessibility tips" width="1" height="1” border="0"></A>
• Named Anchor
<A name=”5Tips"></A><H1>Five Tips to Improve Web Accessibility</H1>
Tip 3 — Use Header Tags
• Communicates page structure
• Assists in page navigation
• Important to use appropriate-level headers — <H1> for Level 1 headers, etc.
Tip 4 — Clear and Logical Flow of Content
• Tables used for layout must not disrupt
• Place elements positioned with CSS in consecutive order
• Descriptive headers and links
Table — BAD
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Table — GOOD
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Tip 5 — Just Say “NO”
• NO image maps
• NO frames
• NO pop-up windows
Accessibility Resources
• World Wide Web Consortiumhttp://www.w3c.org/WAI/Resources/
• WebAIM — accessibility project at Utah State Universityhttp://www.webaim.org/
• Lynx Viewerhttp://www.delorie.com/web/lynxview.html
• Lynx Install Downloadshttp://lynx.browser.org/
• JAWShttp://www.freedomscientific.com/fs_products/software_jaws.asp
• IBM Homepage Readerhttp://www-3.ibm.com/able/solution_offerings/hpr.html