Template Checklist

Design pages to be accessible, well-structured, and easily maintained.

  1. Div Tags or Elements for Sectional Structure
    1. Page usually consists of these parts:
      - Container
      - Header
      - Navigation - Primary
      - Navigation - Secondary
      - Content
      - Footer
    2. HTML Structural Elements (W3C)
  2. Page Title
    1. This is what is displayed in the browser’s tab for that web page.
    2. The code is in the head section of the HTML page.
      Example:   <title>Penn State Behrend</title>
  3. Heading Tags (H1, H2, etc.) for Content Structure
    1. Code is contained within the body section of the HTML page.
    2. Typically:
      h1 – used for page heading
      h2 – used for navigation
      h3 – used for page title
      h4 through h6 – used for other sections
    3. Heading Tags in HTML (Penn State)
      Semantic Structure (WebAIM)
    4. Check for proper nesting of tags:
    5. Markup Validation Service (W3C) - Click Options, then check the “Show Outline” box.
  4. Skip to Content Link
    1. Skip Navigation Links (WebAIM)
  5. Images
    1. Alt text
    2. Image Alt Tag Tips  (Penn State)
    3. Alternative Text (WebAIM)
  6. Fonts
    1. Text size specified in “ems”.
    2. Units of Measure (W3C)
  7. Color
    1. Luminosity Contrast (Juicy Studio)
    2. Color Contrast Checker  (WebAIM)
  8. Video and Audio
    1. Video Captions and Audio Transcripts (PSU) - Contact bdwebteam@psu.edu for more details.
  9. Javascript
    1. Verify that page is functional if turned off:
      Accessible Javascript (WebAIM)
  10. Link Text
    1. Don't use "Click here..." or similar wording.
    2. Editorial Style for Inline Links
    3. Links on a Web Page
  11. Broken Links
    1. Link Checker (W3C)
  12. Accessibility Testing (Overall)
    1. Functional Accessibility Evaluator (University of Illinois at Urbana-Champaign)
    2. WAVE (WebAIM)
    3. AChecker
  13. Screen Reader Test
    1. JAWS
    2. NVDA  (free)
    3. WindowEyes  (free)
    4. VoiceOver (Mac)
  14. CSS
    1. CleanCSS (optimization)
    2. CSS Usage (Firebug add-in/Export clean CSS)
    3. CSS Validation Service (W3C)
  15. Mobile Devices
    1. Validation:  MobileOK Checker (W3C)
    2. Emulators:  Mobile Phone Emulator (Pixmobi), Mobile Phone Emulator (Mobile Moxi)
  16. Browser Testing
    1. Windows:  Internet Explorer, Firefox, Chrome
    2. Mac:  Firefox, Safari, Chrome