Accessibility : Designing the Interface and Navigation The Non-Designer’s Web Book Chapter 7 Robin 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 Styles Keep primary navigation together in a compact package (top, bottom, or side) Top and bottom if long scrolling page Keep 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 508 Using W3C technologies- Web Content Accessibility Guidelines

“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 Thomason Senior 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. Misinterpretation of tables in HTML

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 navigation Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone Divide 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 link Provide metadata to add semantic information to pages and sites Proved 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 collections Provide 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. Validate syntax Validate style sheets Use a text-only browser or emulator. Use multiple graphic browsers Invite 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.

References dstudents.html 5/accessibility_no1.htm /en/index.jsp