2005 Web Access Awards
Presented by: Lori Bailey
Web Accessibility Center
Speaker Notes:
Presenting the 2005 Web Access Awards.
Sponsored by: The ADA Coordinator's Office, the Office for Disability Services, and the Web Accessibility Center.
The Web Access Awards were initiated as a way to recognize faculty, departments, colleges and programs that meet the university's standards for accessible web design () while demonstrating excellence in design and communication.
To be considered, nominated web pages must meet or exceed the accessibility standards as described in "," and provide ease of access for individuals with disabilities (image description and compatability with voice output for users who are blind, transcripts for audio tracks for users who are deaf, etc.).
Pages considered for review will also be judged on how well they:
fulfill the purpose of the site for the intended audience (e.g. delivering course materials to students or promoting a department or program);
incorporate usable design techniques and standards along with accessible design to create user-friendly, creative, aesthetically appealling, yet fully accessible sites;
demonstrate application of the accessiblity standards beyond simple compliance, through considered use of accessibility techniques (e.g., intelligent use of alt tags, carefully structured data tables, and well-designed forms); and
meet or exceed accessibility standards using cutting-edge or advanced accessible design techniques (e.g. use of style sheets for layout and positioning).
Ohio Watershed Network.
http://evolution.ag.ohio-state.edu/~own/
Speaker Notes:
1st Winner: Ohio Watershed Network
Scalable Text
Even the menus increase when text size increases.
Speaker Notes:
Designing to allow text size to be increased without causing left-right scrolling is a must for usable and accessible design. The Ohio Watershed Network also insures that menus can be increased with text size -- a feature many designers forget about.
Fluid
Layout
Text adjusts to available screen size, even when text size is increased.
No horizontal scrolling.
Speaker Notes:
Another good example of fluid design, this site allows users with smaller window areas (either reduced size window or lower resolution screens) to see all the page content without horizontal scrolling.
Strong Contrast
Strong contrast when menu items selected.
Helps identify links.
Speaker Notes:
And menus and text "pops" against dark backgrounds, allowing low-vision users to see content clearly.
Descriptions and Images
ALT tags provide short descriptions
Text offers more detail.
Speaker Notes:
The Ohio Watershed Network includes an extensive "Photo Gallery" section. But rather than simply posting a bunch of images (even with ALT tags), they take the design one step further and provide descriptive paragraphs of activities and events pictured. Plus, they add unique short descriptions to each image file. Users have access to both the short-hand description and the longer paragraph.
Other Features
Skip Navigation Links.
Clearly marked contact information.
Valid HTML and CSS.
Speaker Notes:
Other features of the Ohio Watershed Network site include a "Skip Navigation" link that allows users to skip-over repeated navigation menus and jump directly to the unique content on the page, a clearly identified contact person for reporting accessibility issues, and valid HTML and CSS to insure the best possible browser support.
Congratulations!
Speaker Notes:
The ADA Coordinator, ODS, and the WAC offer our congratulations to Robyn Ness, the Ohio Watershed Network webmaster.
The Graduate School.
http://gradsch.osu.edu/
Speaker Notes:
2nd Winner: The Graduate School
The WAC is particularly proud of the new Graduate School site, because . . .
The Dysfunctional Site
How much of the page dedicated to information?
Is navigation simple and intuitive?
Is navigation simple and intuitive?
Don't break navigation with pop-ups or other techniques.
Speaker Notes:
Before the update, the WAC used the Graduate school site as an example for other designers in what NOT to do. We focused on the navigation issues with a flash-based site and the limitations for scalability and usability.
Through its dedication and commitment, the Graduate School has revised their site to include a number of accessibility features . . .
New & Improved
Clean, consistent design using simple three-column layout.
Scalable text that uses all available screen space (no Frames)
Speaker Notes:
Simple three-column layout incorporates all the desired navigation, content, and features, without relying on Flash. In addition, text is scalable within the columns and wraps to fit the available column width.
Additional Features
Clearly marked links to non-HTML documents
Accessible Search form on every page.
Speaker Notes:
Other features include clearly identifying non-HTML links (links that require additional plug-ins beyond the basic Web browser to view) and a search form on every page to facilitate quick access to the myriad of information available on this site.
Flash is Fun!
Flash for added design, not for content management or navigation.
Speaker Notes:
Unlike the earlier version, Flash is used as an added design element, not as a required feature of the site. No more need for a "text-only" version for those who can't use Flash and no more Flash constraints on printing, navigation, and scalability.
Congratulations!
Speaker Notes:
The ADA Coordinator, ODS, and the WAC offer our congratulations to David Sugar, the Graduate School webmaster.
Buckeye Link
http://buckeyelink.osu.edu/
Speaker Notes:
3rd Winner: Buckeye Link (Student Services web site).
Powerful Site, Simple Design
Just this section required lots of work to make all the forms and reports work seamlessly.
Speaker Notes:
We want to emphasize how expansive this site is: encompassing course planning, grades and advising, and billing and financial aid information. The currently highlighted section, Course Planning, alone encompasses online registration, the online master schedule, and the online course bulletin.
Complex Tables
Speaker Notes:
And the site must deal with a number of complex elements, like tables that describe detailed information for every course in the master schedule. The designers had to come up with unique solutions to solve the problem of repeated link phrases and complex table design, so that screen reader users could successfully navigate the site.
More Complex Forms
Multiple subsections of forms divided using option groups and field sets.
Speaker Notes:
The site relies on interactivity and customization using complex forms that must have different options for all contingencies of student needs and issues. Designers worked to divide forms into demarcated sections that allow users to follow the logic of the forms.
Still Maintains Fluid Design
Text size increased.
Layout adjusts to fit available screen.
With styles disabled, layout becomes simple text view.
Speaker Notes:
Even with the complexity of the site, fluidity of design allows students to customize to meet their needs.
Congratulations!
Speaker Notes:
The ADA Coordinator, ODS, and the WAC offer our congratulations to the Buckeye Link web design team, including Glenn Donaldson, Rich Graham, Carol Larrimer, and Peter McMeen.
2005 Web Access Awards
/evolution.ag.ohio-state.edu/~own/
gradsch.osu.edu/
buckeyelink.osu.edu/
See more winners at:
ada.osu.edu/accessaward/
Speaker Notes:
We encourage you to visit these sites and find out more about how accessible, usable, and creative design can be brought togetherto create dynamic and interesting sites available to all users. Thank you!