Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In

UFIT Wiki

:

WebChecklist

Last modified at 8/23/2012 3:28 PM by Manasse,Dalyns
Web Checklist

Guidelines for CITT Provost Initiative Courses.


Web Pages
Standards
  • Valid XHTML 1.0 Transitional - XHTML Strict is too fussy.
  • Uses the Provost Course Template - Pages should be based on the Dreamweaver template file for the course. See Provost Course Template.
  • Edit pages in Dreamweaver - Extensive edits done in other tools like in the web editor in Sakai could break Dreamweaver template tags.
  • All Content is Accessible - Follows Section 508 standards and WCAG 2.0 level AA. See WebAIM's checklists for Section 508 and WCAG 2.0 Checklist for details.
  • Cross-Browser Compatible - See the Browser Testing Checklist
  • Pages work in different screen widths - The target window size is 1024x768. Layouts should still work if the browser window is significantly narrower or shorter (for laptop, netbook, and mobile device users). Avoid making the horizontal scrollbar appear.
  • Each page has a descriptive title - text in the <title> tag has the section title and course title. 
  • Pages work in different screen widths - The target window size is 1024x768. Layouts should still work if the browser window is significantly narrower or shorter (for laptop, netbook, and mobile device users). Avoid making the horizontal scrollbar appear. 
Tools
  • W3C HTML Validator - Go to "Validate by File Upload" to check pages or use the Firefox Web Developer Toolbar extension (Tools > Validate local HTML).
  • Firefox Firebug extension - use to troubleshoot and develop HTML/CSS/JavaScript in the browser
  • IE Developer Tools - Built-in equivalent of Firebug for IE, Go to Tools > Developer Tools or press F12 
Cascading Style Sheets

Styles should be CSS 2.1 since it is widely supported by browsers.

Standards

  • Valid CSS 2.1 - CSS 3 and proprietary browser styles should be avoided until there is better support. 
  • Cross-Browser Compatible - See the Browser Testing Checklist
  • Use a CSS Reset - Reset styles is a technique used to start with a consistent base across browsers. These styles at the beginning of a stylesheet override the different default browser CSS styles, like heading size and margins on lists. See CSS Reset Code. This is already included in the Provost Course Template.
  • No Inline Styles or Internal styles - All styles should be in external stylesheets. Dreamweaver CS3 Note: Avoid using the properties bar to change font size or color. Check to make sure that extra styles haven't been added in the the <head> tag 
  • No Iimportant styles - These interfere with user and course management system stylesheets. It's usually a sign that you need to change the way styles are inherited. (See CSS Specificity: Things You Should Know - Smashing Magazine
  • No IE Hacks, Use IE Stylesheets - These will not be effective in newer versions. Use If IE comments* to include IE-specific stylesheets. 
  • Use accessible ways to hide text - Avoid display:none. Use styles to position text off the screen (See WebAIM's article on Invisible Content). Use text-indent if the element is not a link. 
  • Use relative font sizes - Use ems or % instead of pixels and points so that users can increase the text size in a browser. 
  • Name styles by structure not presentation - Avoid names like "red-link" or "right-column" and use names that describe its purpose or content like "external-link" or "sidebar".
Tools
  • Firefox Web Developer Toolbar extension - use Tools > Validate local CSS or use to troubleshoot
  • Firefox Firebug extension - use to troubleshoot and develop HTML/CSS/JavaScript in the browser
  • W3C CSS Validator - upload a local file to see if it meets CSS 2.1
  • IE Developer Tools - Built-in equivalent of Firebug for IE, Go to Tools > Developer Tools or press F12


Text Size

Layouts should still be usable if the text size is doubled (not just when page is zoomed in).

Tools
  • IE - Set Text size to large and larger (Page > Text Size)
  • Firefox - Make sure Zoom Text Only is checked (View > Zoom > Zoom Text Only) then zoom in two levels. 
Colors for Text, Links, and Backgrounds

There must be enough contrast between text and background colors in order to help those with low vision and color blindness. Contrast also depends on text size and boldness. If the color combination cannot change, try making the text larger or bold.

Standards

Make sure that the color values pass the checks for WCAG 2.0 level AA at a minimum (WCAG 2.0 Checkpoint 1.4.3).

  • For large headings, contrast ratio greater or equal to 3:1
  • For small text, contrast ratio greater or equal to 4.5:1.

Large headings are text 14pt bold or 18pt normal or larger. 


Tools
Video

Standards
  • Video is in Flash f4v or flv format - Since Flash is already installed on most computers and is compatible with the various operating systems, we should continue to use it for video. (This could change to another format as HTML 5 gets supported in more browsers.)
  • No Embedded Video in Module Pages - Instead, link to the external video or link to a separate video page that contains the embed code. This makes it easier for faculty to maintain content pages. 
Tools

  • See the Video Page Template**.


PDF Files

PDFs should be tagged so that they are accessible for screen readers. When creating the document from Word, be sure to use Word Styles for headings, etc. and avoid using tables for layout. Add alternative text to images. Creating an Accessible PDF

Standards
  • Passes section 508 and WCAG 2.0 guidelines. (Alternative text for images, headings, proper reading order, does not rely on color) 


Tools
  • In Acrobat Pro, use the Accessibility checker for Adobe PDF, Section 508, and WCAG 1.0 and 2.0. (Advanced > Accessibility > Full Check)
  • In Acrobat Pro, listen to the PDF. (View > Read Out Loud > Activate Read Out Loud)