According to Center for Universal Design, Universal Design Principle "is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation and special design." Universal design does not assume everyone will be able to use all designs; rather the design targets the widest range of user capabilities.
The measure of usability is how easily an individual can use a product Measure of accessibility is how easily a user can perform the tasks related to the product. Accessibility is also relative to a user's functional capabilities and needs. Therefore by definition, accessibility is subset usability.
People with disabilities often use assistive devices to access and interact with information technology resources. When Universal Design Principles are applied to IT resources the design should include constructs to make the product directly accessible and provide capabilities within the infrastructure to transparently integrate the assistive technology (AT) used by a person with a disability.
Best Practices
Layout and Structure
- Separate document structure from its visual presentation
- Give every page a unique title
- Present information in a logical read-order to ensure content can be perceived without associated style sheets
- Minimize use of tables for layout and ensure the read order of the cell content can be linearized, perceived and understood as written
- Minimize use of frames
- Avoid opening new windows. When opening a new window warn user by defining the target with a unique name: example target ="Calendar".
- Avoid JavaScript Pop-ups. If used be sure to title the page and target and provide a mechanism to easily return to original page
- Do not use form element <textarea> to create "text or inset box". Use <div> or <iframe> tags
- Use external styles sheets for presentation , avoid inline or internal styles. This will allow the user to set their own style
Writing Style
- Write clearly using straight forward sentences
- Place main point in the beginning of a paragraph
- When possible use lists, starting with keyword if possible
- Do not combine two or more words. Example Homepage should be written as Home Page
Text Descriptors
- Use "null" value for alt attributes for decorative elements, bullets, lines etc. used for visual layout and presentation
- Limit text descriptor to convey the information. Example for a photograph atl="Dr. Professor" rather than " Photo of Dr. Professor"
- Use D-link or longdesc to convey a fuller description of an image. These are presented on a separate html page. Be sure to provide a mechanism to return to point of origin on the main web page
Navigation
- Make sure the navigation is consistent
- Provide method to skip repetitive links; example "skip to content" or "skip navigation" as first item on page
- On portal pages with multiple subset or categories of links use <h> element for the category title and use list for the links within the category
- Labels links so that they make sense when removed from context, avoid duplicate link names
- Start links with relevant keywords
Data Tables
- Use summary attribute of the <table> element to describe the purpose of the table
- For simple tables use <th>element with scope attribute to define the row and column headers
- For complex tables explicitly associate data cells with their row and column headers
- Use abbrev attribute to shorten header titles
Forms
- Ensure form labels, cues and information can be perceived and understood by screen readers and make sense when scripts and style sheets are turned off
- Explicitly associate the label with the form control element.
- Place labels adjacent to form control element and do not separate them by using any other structural tag like table cells <td>
- For radio buttons and check boxes always place label to the right of the form control
- Avoid using images as labels for form controls
- Place a relevant text prompt in list and selection boxes
- Avoid automatic redirects or form submissions
Scripting
- Avoid DHTML menus, if used provide a method to switch to alternative menu formats
- Use device-independent event triggers like "onFocus", "onBlur" and "onSelect" rather than user interaction-level triggers like "onmousedown" or "onclick".
- Provide controls to stop, pause or restart timed event
- Provide alternative content using <noscript> tag for when scripting is turned off
Other
- Do not Auto-refresh pages, especially frames
- Alert user of timed responses, time constraints and provided a mechanism for requesting additional time
- If needed use a Text-Only Page as alternative page; ensure the alternative page has equivalent information or functionality and is kept updated
Alternative Content
- All content available in non-html file formats like PDF, Presentations, Spreadsheets or Word processors must be created to be accessible to AT like screen readers and magnifications tools
- Include content in alternative accessible formats if format cannot be made accessible.
