CDWS Web Design Checklist

UCF/CDWS

Include correct DOCTYPE declaration. (e.g. XHTML 1.0*, HTML 4.01*)
Include these tags in every document: <html>, <head>, <title>, and <body>.
Define character encoding. (e.g. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">)
Include a document title (<title>) which make sense out of context when used in bookmarks and search engines.
Don't use deprecated elements and attributes (e.g. , , <blink>, <marquee>, , align, etc.)
All HTML elements and attributes are lowercase.
Tags are nested properly.
All tags are closed (e.g. ,  )
All attribute values are quoted.
Attribute minimization is not used.
Use HTML elements and attributes for their intended purpose.
Use valid CSS for formatting instead of invalid HTML markup.
Page is understandable if css is removed.
Use relative units of measurement rather than absolute.
Use external style sheets instead of internal or inline style sheets.
Validate HTML and fix errors: W3C HTML Validator*
Validate style sheets used and fix errors: W3C CSS Validator*

http://www.w3schools.com/xhtml/* , http://www.w3schools.com/css/*

Use sans-serif fonts designed for legibility on screen (e.g. Arial, Verdana, Helvetica).
Avoid writing whole sentences in capital letters.
Use logical formatting tags (, ) instead of physical formatting tags (, ).
Apply text formatting and color via CSS instead of using the deprecated  tag.
Don't underline text unless it is a link.
Use the <cite> tag to identify a book title instead of underlining it.
Use heading tags to identify section headers to convey the correct document structure.
Don't use these tags for indenting only: <ul>, <ol>, <dd>, <blockquote>
Avoid moving or blinking text.
Keep the number of fonts used on a page to a minimum.
Keep page length to a minimum.
Use copious white space.

http://www.Webaim.org/techniques/text/*

Navigation links should be similar in appearance, content and location on all pages.
Include a link back to the "home" page or "site index" in every page.
Duplicate navigational headers at the bottom of the page.
Provide a table of contents for long pages with section headings.
Linked text is descriptive instead of just "click here"
An anchor link is provided to skip over lists of navigational menus or other lengthy lists of links.
Links are easily identified as links (e.g. underlined).
Verify that all links work.
A description or menu is visible on opening page.
Limit the number of clicks to any given page.

http://www.Webaim.org/techniques/navigation/*

Include meaningful alt and title attributes for all images.
Include longdesc and text description of image for complex images (e.g. math equations, charts, graphs, etc).
Include meaningful alt, title and longdesc attributes for image maps and their hot spots.
Don't use HTML or CSS to resize images.
Use animated images sparingly and limit the number of times they loop.
Verify animated images do not cause the screen to flicker between 2 and 55 times per second.
Use thumbnails as links to large or high resolution images.
Use images only to enhance the understandability of the content (e.g. illustrate procedures, concepts and processes).
Avoid purely decorative images or those which distract from the main content.
Use text instead of an image whenever possible.
Standard file formats for graphics are either .jpg or .gif.
Resolution for Web graphics is 72 pixels per inch.
Limit the size and number of graphics used while maintaining visual integrity.
Choose solid-colored, rather than textured, backgrounds.
Choose color combinations with high contrast so the image still makes sense when viewed without color.
If color is used to convey important information, an alternative indicator is used, such as an asterisk (*) or other symbol.
Page contains good color contrast between background and text.

http://www.Webaim.org/techniques/images/*

Data tables use <th> instead of <td> on header row cells.
Header cells are associated with data cells using scope, axis, id and/or headers attributes.
Tables should not be used for layout, but if they are, they do NOT contain markup such as <th>.
Relative sizing, rather than absolute sizing, is used to ensure the table displays correctly in different resolutions.

http://www.Webaim.org/techniques/tables/*

All form controls have text labels adjacent to them.
Form elements have labels associated with them using label, for and id elements.
Related form elements are grouped using the <fieldset> tag.
A title or legend is provided for each field set using the <legend> tag.
A button is provided to submit forms instead of JavaScript automatically submitting them.

http://www.Webaim.org/techniques/forms/*

Avoid unnecessary frames.
Frames contain proper name and title attributes for each frame.
Frameset contains <noframes> content.

http://www.Webaim.org/techniques/frames/*

Use server-side scripting rather than client-side scripting.
Include meaningful <noscript> content with non-JavaScript version of the same functionality.
Do not require the use of a mouse.
Provide a real link destination when using JavaScript functions in links (e.g. <a href="http://www.Webaim.org/" onClick="javascript(this)">).
Avoid gratuitous popup windows.
Warn user when a link will open a new window.

http://www.Webaim.org/techniques/javascript/*

Video files contain synchronized captions.
Audio files are accompanied by text transcript.
Provide an on/off switch for music.
When using media files (e.g. Word, Power Point, PDF, Flash, etc.) ensure they are accessible or provide an accessible HTML version of each file.
Provide a link to an accessible download site for any required plug-ins.
Provide file size for downloads or large graphics.
Site is keyboard accessible and does not require a mouse to access the content.
Site has a consistent look and feel throughout.
Ensure site works in the latest versions of browsers, platforms and resolutions.

http://www.Webaim.org/techniques/keyboard/*

* These links will take you to a location outside the WDR site.