Five Tips to Improve Web Accessibility Presenter — Laurie Quon Los Alamos National Laboratory 2003 InterLab Conference Stanford Linear Accelerator Center.

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

Questions?

Laurie Quon

(505) 665-8200

[email protected]