Example Accessible Web Page
This is an example of an accessible web page using valid HTML5 and CSS3. Compare with the inaccessible web page.
HTML Head Section
- The
!DOCTYPE html
tag specifies a document type of HTML5. - The
html
tag specifies a document language of English. - The
meta charset
tag specifies a character set. - The
meta viewport
tag improves mobile device accessibility. - The
title
tag specifies a unique page title, including site and organization names for context. - The
link
andscript
tags include styles and scripts which are stored externally in files.
HTML5 and ARIA Semantic Elements
- These HTML5 structure tags are used:
header
,footer
,nav
,main
,article
,aside
. - ARIA landmarks are not needed for the above HTML5 structure tags.
- The ARIA
role
attribute is only needed for themain
andarticle
tags and the search form.
Formatting
- Fonts, colors, layout and other formatting are determined by the external stylesheet.
- Fonts are large and readable.
- In the page body, black text on a white background provides maximum contrast.
- Header and footer link text are light to have sufficient contrast with the dark background.
Headings
The h1
main heading matches the page title, and the h2
and h3
subheadings are properly nested.
Links
- The Skip to main content link is first in the tab order and visible to screen readers.
- The View HTML source link text in the sidebar indicates that it opens in a new window.
- The PDF links in the sidebar are labeled PDF file and a link to download Adobe Reader follows.
- The email link in the bottom of the page is labeled Email.
Lists
Lists are used to display groups of items, including navigation in the header, footer and sidebar.
Ordered List
- List item 1
- List item 2
Unordered List
- List item 1
- List item 2
Definition List
- Term 1
- Definition 1
- Term 2
- Definition 2
Tables
Data Table
Tables containing organized data should have a caption, head, body, and headings with scoped rows and/or columns.
Heading 1 | Heading 2 | Heading 3 |
---|---|---|
Value 1 | Value 2 | Value 3 |
Layout Table
- Tables used only for layout should not have a caption or headings.
- Content should be ordered for screenreaders, which read content from left to right, one row at a time.
1. Top Left | 2. Top Center | 3. Top Right |
4. Middle Left | 5. Middle Center | 6. Middle Right |
7. Bottom Left | 8. Bottom Center | 9. Bottom Right |
Forms
The header contains a search form with a fieldset
and legend
, a labeled search box with placeholder text, and a search button.
Images
The header contains a linked image with a non-blank alt
attribute.
Frames
This example inline frame has a title
attribute (though not necessary for accessibility in this case).