Example Inaccessible Web Page
This is an example of an inaccessible web page. Compare with the accessible web page.
HTML Head Section
- The
!DOCTYPE html
tag should be used to specify a document type of HTML5. - The
html
tag should specify a document language of English. - The
meta charset
tag should be used to specify a character set. - The
meta viewport
tag should be used to improve 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 should be used instead of div tags:
header
,footer
,nav
,main
,article
,aside
. - ARIA landmarks are needed for div tags if the above HTML5 structure tags are not used.
- The ARIA
role
attribute is needed for themain
andarticle
tags and the search form.
Formatting
- Fonts, colors, layout and other formatting are determined by the external stylesheet.
- Header and footer fonts should be larger and more readable.
- In the page body, highlighted text is hard to read because it does not have sufficient contrast with the white background.
- Header and footer link text does not have sufficient contrast with the dark background.
- Body link text does not have sufficient contrast with non-linked text.
Headings
The main heading matches the page title, but should use the h1
tag, h2
and h3
subheadings should be used and properly nested.
Links
- The Skip to main content link should be added first in the tab order and visible to screen readers.
- The View HTML source link text in the sidebar should indicate that it opens in a new window.
- The PDF links in the sidebar should be labeled PDF file and a link to download Adobe Reader should follow.
- The email link in the bottom of the page is not 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 which should have a fieldset
and legend
, a labeled search box with placeholder text, and a search button.
Images
The header contains a linked image and should have a non-blank alt
attribute.
Frames
This example inline frame should have a title
attribute (though not necessary for accessibility in this case).
Address