Design pages to be accessible, well-structured, and easily maintained.
Div Tags or Elements for Sectional Structure
Page usually consists of these parts:
- Navigation - Primary
- Navigation - Secondary
- HTML Structural Elements (W3C)
- Page usually consists of these parts:
- This is what is displayed in the browser’s tab for that web page.
The code is in the head section of the HTML page.
Example: <title>Penn State Behrend</title>
Heading Tags (H1, H2, etc.) for Content Structure
- Code is contained within the body section of the HTML page.
h1 – used for page heading
h2 – used for navigation
h3 – used for page title
h4 through h6 – used for other sections
Heading Tags in HTML (Penn State)
Semantic Structure (WebAIM)
- Check for proper nesting of tags:
- Markup Validation Service (W3C) - Click Options, then check the “Show Outline” box.
Skip to Content Link
- Skip Navigation Links (WebAIM)
- Text size specified in “ems”.
- Units of Measure (W3C)
- Video and Audio
Verify that page is functional if turned off:
- Verify that page is functional if turned off:
- Link Text
- Link Checker (W3C)
- Accessibility Testing (Overall)
- Screen Reader Test
- Mobile Devices
- Windows: Internet Explorer, Firefox, Chrome
- Mac: Firefox, Safari, Chrome