Website Design Competition for Usability, Universal Design & Accessibility
The Universal Design and Accessibility Committee (UDAC) is looking for nominations for best website design on the Boulder, Denver or Colorado Springs campuses. The criteria are usability, Universal Design & accessibility along with other features such as adherence to Web Standards. (More on specific criteria below).
If you would like to nominate a website or web page, either from your own department or another group on campus, please submit your nomination to hkramer@colorado.edu (303-492-8672) by March. 7, 2011. If you only want certain sub-pages of your site to be considered, please specify this.
Judges Sought
If you are interested in helping judge nominated websites, send us your contact information.
Prizes
Prizes (tba) will be provided and winning sites announced through campus media.
What is Universal Design?
Universal Design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. - Ron Mace, Architect
Universal Design as Applied to Web Design
Engineering a web resource to be universal -- not just "accessible" in a standards-compliance sense -- leads to better overall design for everyone, regardless of visual, mental, or other differences. "Universal design" requires that instead of coding a site to simply look good on a screen, the designer conceptualizes and plans a site that is not only usable but user-friendly in all scenarios.¹
A website designed with Universal Design standards would thus help:
- individuals with different life experiences
- language backgrounds
- learning styles
- abilities and disabilities
- varied levels of technology
Specific Criteria for Design Competition: Accessibility, Usability, Universal Design & Web Standards
Websites will be judged by the following 4 criteria:
Accessibility: Can people with disabilities use your website?
Usability: How well can users achieve their goals and how satisfied are they with that process?
Universal Design: Universal Design is the design of a website to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
Web Standards: Web Standards is the use of the newer structural markup languages such as HTML 4.0, XHTML 1.1 & HTML 5.0, CSS formatting, object modules like the W3C DOM and scripting languages like JavaScript, in order to create web pages which are structured, semantic and where content is separated from presentation.
Please note that, like any set of definitions or categories, these categories can not always be reduced to a clear cut checklist. Many of these categories sometimes overlap.
More on Accessibility
The following is a subset of the Web Content Accessibility Guidelines (WCAG) guidelines, the international standard for Web Accessibility. Select any of the links below to read more about the guideline. The full set of guidelines are available at the WCAG website.
- 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
- 1.4 Make it easier for users to see and hear content including separating foreground from background.
- 2.1 Make all functionality available from a keyboard.
- 2.2 Provide users enough time to read and use content.
- 2.4 Provide ways to help users navigate, find content, and determine where they are.
- 3.2 Make Web pages appear and operate in predictable ways.
- 3.3 Help users avoid and correct mistakes.
[More resources & tools for web accessibility]
More on Usability
Usability is a combination of factors including:
- Ease of learning - How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks?
- Efficiency of use - Once an experienced user has learned to use the system, how fast can he or she accomplish tasks?
- Memorability - If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything?
- Error frequency and severity - How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors?
- Subjective satisfaction - How much does the user like using the system?
[more resources & tools for usability]
More on Universal Design
- Equitable Use: The design is useful and marketable to people with diverse abilities.
- Same means of use for all
- No text-only versions
- Make the site appealing and easy to use for target audience
- Do not discriminate by designing only for what you think is your sighted target audience
- Flexibility in Use: The design accommodates a wide range of individual preferences and abilities.
- Accommodates user-defined style sheets (such as the high-contrast text style that an individual with weak eyesight would use)
- Acceptable to the user's mode of understanding and processing information
- Simple and Intuitive: Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.
- Avoid unneccessary complexity (Dynamic Hypertext Markup Language hierarchical menus, for example)
- Clear document structure
- Progressive Enhancement
- Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.
- Allow text to be scaled
- Multiple ways of presenting info that is contained in images, graphs, audio, video, or other forms of media that are largely focused on one form of sensory perception.
- Tolerance for Error: The design minimizes hazards and the adverse consequences of accidental or unintended actions.
- Site structure is such that the visitor can always determine where he/she is in the site even if "lost"
- No pop-up windows, which often crash screen readers or confuse a non-sighted user who is unable to discern what just popped up and where the main page went
- No dead links
- Low Physical Effort: The design can be used efficiently and comfortably and with a minimum of fatigue.
- Easy tab progression to allow for quick and smooth navigation
- Minimize the number of links or the amount of accessory content that the user must get through in order to find the primary content
- Steer away from moving parts, such as Flash-based navigation menus that have links that move around and force you to chase them with a mouse to click on them
- Allow the user to disable time-sensitive events that may require a high level of physical dexterity
- Size and Space of Content and Control Objects are Appropriate & Customizable by User:
- Page is relatively scalable and can be viewed on small monitors, cell phone browsers, etc.²
- File size is not prohibitive for those with slow Internet connections
- Text is readable and controls are large enough to be easily targeted with a mouse
More On Web Standards
The following are some important technical practices for complying with (X)HTML Web Standards:
- That all document types are declared via the correct DOCTYPE declaration
- That the structure of a conforming document contain the DOCTYPE declaration, an html element with the XHTML namespace declared, a head element including the title element, and a body element
- That all elements and attribute names are written in lower case, and that all attribute values are quoted
- That all non-empty elements (e.g. p, li) are properly terminated with a closing tag
- That all empty elements (e.g. br, hr, img) are properly terminated with a trailing slash (<br />)
- That documents validate against the DTD that is declared
A Narrative Overview of the Development of Web Standards
[More Resources for Web Standards]
Determining the Usability & Accessibility of a Web Page
There are numerous free tools for testing the usability and accessibility of a Web page. SixRevisions has published 10 tools for evaluating Web design accessibility. These are great evaluation resources to get started with. Our favorites are Web Accessibility Inspector and one tool not listed on the above site: Wave.
Evaluation Tools - All Categories
- 10 tools for evaluating Web design accessibility
- Web Accessibility Inspector
- Web Accessibility Evaluation Tool (Wave)
- WC3 Markup Validator
- Firefox Web Developer Toolbar
- Internet Explorer Web Developer Toolbar
Accessibility Resources
- Introduction to Web Accessibility (WebAIM)
- WebAIM Article Index on Web Accessibility
- Top 4 Reasons Why You Need to Address Web Accessibility
- WCAG 2.0 (Web Content Accessibility Guidelines 2.0)
- WCAG 2.0 Techniques
- UCB's AT Lab Guide on Accessibility (docx format)
- uiAccess (online books on accessible Web design and tips for best practices for captioning, transcripts)
- Building Accessible Websites - by Joe Clark (book)
More Resources for Usability
- Usability.gov
- Factors that Affect Usability
- Jakob Nielson's 10 Usability Heuristics
- Gerhardt-Powals Heuristic
Universal Design
- Universal Design Principles for Websites
- 20 Questions for Website Evaluation
- 20 HTML Best Practices
- Access by Design
More Resources for Web Standards
- Opera's Web Standards Curriculum
- The Web Standards Project (WaSP)
- World Wide Web Consortium (W3C)
- WaSP's Web Standards Curriculum
- Creating Semantic Structure (WebAIM)
¹ Attributed to Greg Lanier at http://www.cs.unc.edu/Research/assist/et/projects/universal/
² Attributed to Greg Lanier at http://www.cs.unc.edu/Research/assist/et/projects/universal/research_universal.htm#analogs
