Design Principles
- Create pages that conform to generally accepted standards for web content.
- Separate the content and structure of the page from its visual presentation.
- Use external style sheets to specify typographical elements, layout and color.
- Organize the read order so that it can convey the same information with or without style sheets.
§ 508 1194.22 (c): All information conveyed with color is also available without color
§508 1194.22
(d) Documents should be organized to be readable without the associated style sheet
§ 508 1944.22 (j): Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
Over the last few years technologies are being developed and integrated to make the web a ubiquitous computing environment for delivery of myriad of services and resources. W3C has developed web standards as specifications to enhance the interoperability of web-related technologies. Web pages that separate content from presentation and are created using web standards are usually accessible, user-friendly, optimized for search engines and can be easily maintained, re-purposed and reformatted.
HTML and now XHTML are markup language used for creating web content. It provides a standard mechanism for embedding content objects and the semantics of how various elements will be interpreted and rendered by user agents. Structural elements also help define the logical hierarchy of the web page.
Layout and Structure
- Separate presentation layer from the structure. When possible use Cascading Style Sheets (CSS) to control the visual appearance of a page.
- Do not use structural elements for presentation and layout. For example using heading <h> tag to enhance text; list <li> tag to indent text; text area input <textarea> element for text inset.
- Use CSS and <div> tag or <iframe> to create a text inset.
- Use <title> element in the <head> section of the page to identify the contents of a page. Browsers expose this information to assistive technology and the user can identify the page.
- Minimize using tables for layout. When used, limit them to simple tables and ensure that the read order of the cell content can be linearized. Tables increase the size and footprint of the page and they are not easily maintained.
- Avoid using Frames for layout. Frames divide a web page into multiple, scrollable regions each with its own content source. Frames can be very disorienting to screen readers especially when content in one frame references content in another.
- Avoid opening new windows or "pop-ups". New windows destroy user browsing history preventing them from using the "back" button to return to the source page. If new window is opened identify the target window using target ="name" and provide a mechanism to easily return to original location on source page.
Presentation and Styles
Styles is a mechanism for adding presentation attributes like font styles and size, color, positioning and other visual elements to a web page. Styles are associated with structural elements allowing each element to have its own set of visual attributes and position on the page. Since they are associated with the structural elements, styles do not affect the underlying semantic structure of the document. Styles can be specific to the page (internal), associated directly with an element (inline) or in an associated document called a Cascading Style Sheet (external).
- Use external styles sheets for presentation and minimize use inline or internal styles. Many browsers provide mechanisms to allow users to switch between style sheets letting the user set their own style.
- Write the page in the correct reading order and then use <div> tags and CSS positioning to construct the physical layout of the web page
- Avoid fixed font sizes like 12 points or 12 pixels as they cannot be magnified. Use relative sizes like <font=3>, <font=120%> or <font=1.5 ems>. Some browsers, however, do not support EMS values less then 1.
- Avoid using multiple font types or colors on one page as they can created a busy and cluttered appearance
- Use relative sizes for container elements like tables, margins, <div>s etc.
- Provide a good contrast between background and foreground colors
- Do not use color only to convey meaning
- Avoid blinking and moving text. Do not use <blink> or <marque> tags.
