Five Steps to Improve Website Accessibility

Speaker: Laurie Quon, LANL web developer

InterLab 2007

Use the arrow keys to move forward or backward through the presentation

The Steps

• Provide links to skip navigation (skipnavs)
• Communicate document structure
• Consider using CSS over client-side scripting
• Ensure logical order of content
• Label form elements ...

Provide skipnav links

• Don't make a user suffer repeatedly through all of your site's navigation links before reaching content

Provide skipnav links

HTML

<a href="#content" class="skipnav"></a>

<a name="content"></a>

Style:

a.skipnav { position: absolute; left: -9000px;}

Provide skipnav links

• Don't make a user suffer repeatedly through all of your site's navigation links before reaching content
• Making the link visible accommodates keyboard users and mobile devices

Provide skipnav links

• Don't make a user suffer repeatedly through all of your site's navigation links before reaching content
• Making the link visible accommodates keyboard users and mobile devices
• "Skip to" links can be used to jump to site navigation at the end of html (positioned visually at the top with css)

Communicate Document Structure

What's the big deal?

Communicate Document Structure

Lab Home  |  Phone   ABOUT LANL NEWS LIBRARY JOBS   Wednesday, October 03 02:46 am 51°F ES&H Environment, Health, Safety Orgs & Institution Counterintell, Goals/ Mission, Policy Science Awards, LDRD, History, Tech Transfer Security Badge Office, Cyber, Personnel, Protecting Info Services Computing, HR, Procurement WorkLife Benefits, EEO/ Diversity Resources for Admins Fellows International Guests New Employees Official Visitors Postdocs Students   LANL Newsletter | Bulletin Board | Readers' Forum Fall Festival has something for everyone Benefits open enrollment information sessions scheduled today and Wednesday Noted author Rhodes speaks Thursday at Laboratory Trinity Site tour set for this weekend   LANL in the News Events Calendar Community News All Clips by Subject Guv Bill Vs. Candidate Bill; Nuke Budget Cuts, Boost Both Endorsed (Albuquerque Journal) Oct 2, 2007 Weapons Behind LANL Fight (Albuquerque Journal) Oct 2, 2007 Laboratories to Share Supercomputer Design (Wall Street Journal) Oct 2, 2007 Livermore Lab's new boss takes the helm (Contra Costa Times) Oct 2, 2007 Dawn goes up like thunder (Los Alamos Monitor) Sep 27, 2007 Lab updates biggest construction project (Los Alamos Monitor) Sep 27, 2007 LANL device aboard spacecraft (KOAT Action 7 News) Sep 27, 2007 DAWN Spacecraft launched (KRQE News13) Sep 27, 2007 Dawn begins mission to explore asteroid belt (Associated Press) Sep 27, 2007 Nuclear Proliferation (Washington Post) Sep 27, 2007 Alerts Fire Danger Rating: Low SECON Alert Level: 3+ Spotlight Barrier Removal Fall Festival 2007 United Way Workforce Info Tools Resources Contractor Assurance System Concur Domestic Travel: Web | Enterprise Server Data Warehouse Enterprise Information Applications (EIA) Electronic Software Distribution (ESD) Issues & Corrective Actions Management Just-in-Time Orders (JIT) My LANL Network Registry Requirements Management System (RMS) Time & Effort System Photo of the Day The unusual, unique, silly, and serious sides of our world: expect the unexpected. See all photos Camera use at Lab (pdf) Announcements ESD - Absoft, Ardence, AutoCAD, Illustrator, IMSL, etc. DOE - Cutting Into Mis-Identified Fluorine Pipe (pdf) DOE - Caution When Using Snap Cap Vials (pdf) Interlab07 workshop -Bringing Science to the Web You can WEB submit your ColorBW print requests today More Announcements Los Alamos National Laboratory . Est. 1943 Operated by Los Alamos National Security, LLC for the U.S. Department of Energy's NNSA Outside | © Copyright 2006-7 Los Alamos National Security, LLC All rights reserved | Disclaimer/Privacy | Web Contact

Communicate Document Structure

• Use appropriate-level header tags
  • Rely upon CSS for styling

Communicate Document Structure

• Use appropriate-level header tags
  • Rely upon CSS for styling
  • The first header (as it appears in html) must always be an <h1>

Communicate Document Structure

• Use appropriate-level header tags
  • Rely upon CSS for styling
  • The first header (as it appears in html) must always be an <h1>
  • Never jump/omit header levels

Communicate Document Structure

• Use appropriate-level header tags
  • Rely upon CSS for styling
  • The first header (as it appears in html) must always be an <h1>
  • Never jump/omit header levels
• Use ordered, unordered, and definition lists as they were intended
  • Typically unordered for site navigation

Communicate Document Structure

• Use appropriate-level header tags
  • Rely upon CSS for styling
  • The first header (as it appears in html) must always be an <h1>
  • Never jump/omit header levels
• Use ordered, unordered, and definition lists as they were intended
  • Typically unordered for site navigation
  • Group list items under headings using nested lists

Communicate Document Structure

HTML, Nested List

<ul>
      <li class="listhead">First Header
         <ul>
               <li>Item One</li>
               <li>Item Two</li>
               <li>Item Three</li>
         </ul>
      </li>
</ul>

Use JavaScript carefully

• Never offer JavaScript as sole method to access content

Use JavaScript carefully

• Never offer JavaScript as sole method to access content
• Consider using CSS instead

Use JavaScript carefully

• Never offer JavaScript as sole method to access content
• Employ JavaScript to add convenience or even improve accessibility.

Check out
http://www.themaninblue.com/experiment/ResolutionLayout/

Use JavaScript carefully

• Never offer JavaScript as sole method to access content
• Employ JavaScript to add convenience or even improve accessibility.
• Consider using CSS instead
• Provide keyboard equivalent for JavaScript events/CSS hover states

Keyboard Equivalents

JavaScript

• onmouseover/onmouseout with onfocus/onblur
• onclick with onkeypress

CSS Pseudoclasses

• :hover with :focus (:active for IE 7)

Ensure Logical Order of Content

• Important for both table and tableless layouts
  • View in text browser
    Lynx simulator: http://www.delorie.com/web/lynxview.html

Ensure Logical Order of Content

• Important for both table and tableless layouts
  • View in text browser
    Lynx simulator: http://www.delorie.com/web/lynxview.html
  • Use the tab key to navigate from link to link on the page

Label All Form Elements

• To associate text with an input element

<label for="FirstName">First Name:</label>

<input type="text" size="30" name="FirstName" />

Resources

Education

• WebAim (helpful downloads and media available)
• W3C Accessibility Initiative
  • Developing a business case for accessibility
  • State policies related to web accessibility

Software

• Fangs Screen Reader Emulator (open source Firefox add-on)
• JAWS Screen Reader for Windows (demo available)

Questions?

Cyndi Roland, WebAIM

(435) 797-3381, Cyndi@cpd2.usu.edu

Laurie Quon, LANL

(505) 665-8200, lquon@lanl.gov