Mark-Up
  • Use xHTML and CSS to separate content from style.
  • Use proper mark-up for form elements.
  • Organize pages in a logical manner, meaning they will read correctly, top-to-bottom, without CSS styling.
  • Use headings (<h1>, <h2>, etc.) and fieldsets and legends to organize forms.
  • Use a logical tabbing order.
  • Do not use deprecated tags like <font>, <b>, <i>.
  • Use tables only for displaying tabular data (with rare exceptions). General page layouts will be done with CSS.
  • All pages will have unique and meaningful title tags. Standard format will be “page name [or survey title], name of site.”
  • Use text in place of images when possible.
  • Use <abbr> and <acronym> elements when appropriate. Use the title attribute to define the abbreviations and acronyms.
  • Use<fieldset> and <label> elements for forms.

CSS
  • Try to not rely on “classes” too much. Rather, write your stylesheet to format tags within a specified <div>. Also avoid using <span> tags.
  • Avoid “div soup,” which is when you overuse divs or have many nested divs.
  • Do not rely on browser-specific hacks. A few might be necessary, such as the @import hack to prevent NS4 from using CSS, but don’t write separate styles for separate browsers.
  • The majority of measurements within pages will be done with “em” or “%”. Control fonts with CSS keywords (small, x-small, etc.). Use pixels only with images and related items.

Design
  • Pages will be designed to use a “liquid design” technique. This means a technique that does not rely on fixed sizes. Users can resize windows, view the site on small screens, and increase or decrease fonts without breaking the design.
  • A design does not need to look perfect in an unsupported browser, but it does have to “degrade gracefully” and still look logical and usable.
  • Use contrast between foreground and background colors.
  • Use client-side scripting (JavaScript, ECMAscript) sparingly. No page should require client-side scripting to be usable.

Content
  • Avoid contextually meaningless link text, like “Click Here”, “Learn More”, or “Go”.
  • Links should describe the destination page/resource.
  • Use title attributes to provide additional contextual meaning for links.
  • For the sake of screen readers, avoid combining two words into one, such as “homepage”. Instead you would use “home page”.
  • Make it short. Design navigation with the least amount of steps and clicks.

Best Practices
  • Layout the form in a logical way in that additional ‘tabindexes’ are required in a minimum. Tab order should be naturally in the correct order. “Skip to content” could replace a complicated behind-the-scenes tab ordering scheme.
  • Avoid using scripting if possible; if not possible, allow form to operate if scripting is turned off.
  • Use labels and id’s to connect form elements to their labels.
  • If possible avoid use of access keys due to conflicting use with AT products.
  • Avoid using javascript at all to make dropdowns have actions. Keyboard-only users cannot navigate the dropdown without inadvertently selecting an option and invoking that option’s action.