Accessibility: Designing the Interfaceand Navigation

The Non-Designer’s Web BookChapter 7Robin Williams and John Tollett

Presented by Sherie Loika

Interface and Navigation Design

Interface- how the pages look and how the pages work and interact with the viewer

Navigation- the way people get around your site and know where to go

Generally inseparable elements

Navigation design

Find the way home?Clear and simple?Accessible?

Navigational StylesKeep primary navigation together in a compact package (top, bottom, or side)Top and bottom if long scrolling pageKeep accessibility in mind

Accessibility

The ability of a Web page to be viewed by everyone, especially people with disabilities who use various assistive technologies.Section 508Using W3C technologies- Web Content Accessibility Guidelines http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

“The flashiest, most flamboyant navigation systems are often

inaccessible to disabled visitors, hard for all visitors to understand,

and all but invisible to search engines.”

Larisa ThomasonSenior Web Analyst

NetMechanic, Inc.January 2002

Accessible Design and the Visually Impaired

Buttons, graphic navigation bars, and image maps (hot spots) are invisible to screen reading software. http://trace.wisc.edu/docs/navtools2001/index.html

Misinterpretation of tables in HTML http://www.w3.org/WAI/Resources/Tablin/

More Accessible Design Issues

Using video or audio that does not include captions or a transcript is inaccessible to deaf and/or hearing impaired.Complicated and inconsistent navigation systems or complex language can be inaccessible to those with cognitive or learning impairments.Website navigation that does not accommodate the need for alternative input devices excludes people with motor impairments

Web Content Accessibility Guidelines

Provide context and orientation information. See guideline 12

Provide clear navigation mechanisms. See guideline 13

Ensure that documents are clear and simple. See guideline 14

Validate accessibility Automatic tools and human review

Guideline 12: Provide context and orientation information

Title each frame to facilitate frame identification and navigationDescribe the purpose of frames and how frames relate to each other if it is not obvious by frame titles aloneDivide large blocks of information into more manageable groups where natural and appropriate.Associate labels explicitly with their controls.

Back

Guideline 13: Provide clear navigation mechanisms.

Clearly identify the target of each linkProvide metadata to add semantic information to pages and sitesProved information about the general layout of a site (site map or table of contents.)Use navigation mechanisms in a consistent manner.

Guideline 13 (cont.)

Provide navigation bars to highlight and give access to the navigation mechanism.Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.If search functions are provided, enable different types of searches for different skill levels and preferences.

Guideline 13 (cont.)

Place distinguishing information at the beginning of headings, paragraphs, lists, etc. (front-loading)Provide information about document collectionsProvide a means to skip over multi-line ASCII art. Back

Guideline 14: Ensure that documents are clear and simple

Use the clearest and simplest language appropriate for a site’s content.Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page.Create a style of presentation that is consistent across pages.

Back

Validation

Automated accessibility tool and browser validation tool. http://bobby.watchfire.com/bobby/html/en/index.jsp

Validate syntaxValidate style sheetsUse a text-only browser or emulator.Use multiple graphic browsersInvite people with disabilities to review documents.

Work for the disabled= least technically challenging

“The Centre for Teaching and Learning recommends the web editor Dreamweaver, by Macromedia. While perfectly capable of lumbering pages with code and foreign data, Dreamweaver can be easily constrained to stick to the lowest common denominator and will even automatically strip obfuscating code out of pages made with other tools.”

(UNBC, 2000)

Remember…

Keep it simple.Remember your audience.

Referenceshttp://www.mcu.org.uk/articles/disabledstudents.htmlhttp://www.netmechanic.com/news/vol5/accessibility_no1.htmhttp://www3.orghttp://bobby.watchfire.com/bobby/html/en/index.jsphttp://ctl.unbc.ca/disabilities.html