If you create templates for the college's web site, please keep in mind that the web pages must be designed to be accessible, well-structured, and easily maintained. Below are some general guidelines to help you with this process along with some helpful tools.
Div Tags for Sectional Structure
Be sure to use div tags to specify the different sections within the web page. Typically, a page consists of these sections:
- Navigation - Primary
- Navigation - Secondary
The page title is what is displayed in the browser’s tab for that web page. The code is located in the head section of the HTML page.
<title>Penn State Behrend</title>
Heading Tags (H1, H2, etc.) for Content Structure
Code for the heading tags is contained within the body section of the HTML page. Typically:
- h1 – used for page heading
- h2 – used for navigation
- h3 – used for page title
- h4 through h6 – used for other sections
Also, check for proper nesting of tags. One possible tool is W3C's Markup Validation Service. (Click Options, then check the “Show Outline” box)
Skip to Content Link
Include a skip-to-content link to make it easier for screen readers to navigate to the main content of a web page. See WebAIM's "Skip Navigation" Links for instructions.
Include alt text for all images that are conveying a message. For decorative images, use the null value for the alt text attribute.
Text size needs to be specified in “ems”.
Luminosity Contrast: https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibili…
Other Contrast Checkers: http://webaim.org/resources/contrastchecker
Verify that page is functional if turned off:
Accessibility Testing (Overall)
Screen Reader Test:
JAWS, NVDA (http://www.nvaccess.org), VoiceOver (Mac)
CSS Usage (Firebug add-in/Export clean CSS)
Internet Explorer, Firefox, Chrome
Mac – Firefox, Safari, Chrome