![Page 1: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/1.jpg)
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
![Page 2: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/2.jpg)
Obstacles to Web Accessibility
• Elements invisible to assistive technology or add confusion/disorientation
• Disjointed flow of content
• No elements to communicate page structure
![Page 3: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/3.jpg)
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
![Page 4: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/4.jpg)
Tip 1 — Test Your Site
Look for
• Missing alt attributes in image tags
• Links do not appear in the intended order
![Page 5: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/5.jpg)
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”>
![Page 6: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/6.jpg)
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=“ ”>
![Page 7: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/7.jpg)
Tip 2 — Add “Skip Nav” Links
• To skip repeating content
• To jump directly to secondary site navigation
• To jump directly to page content
![Page 8: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/8.jpg)
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>
![Page 9: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/9.jpg)
Tip 3 — Use Header Tags
• Communicates page structure
• Assists in page navigation
• Important to use appropriate-level headers — <H1> for Level 1 headers, etc.
![Page 10: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/10.jpg)
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
![Page 11: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/11.jpg)
Table — BAD
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
![Page 12: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/12.jpg)
Table — GOOD
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
![Page 13: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/13.jpg)
Tip 5 — Just Say “NO”
• NO image maps
• NO frames
• NO pop-up windows
![Page 14: Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649d445503460f94a20be0/html5/thumbnails/14.jpg)
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