Separate structure from presentation and use proper markup for that structure.
For example, mark up lists as lists
<ul>, <ol>, <dl>
rather than text with a
tag after each list item. Ensure documents are readable without style sheets.
Screen reader specific content is rendered off screen rather than hidden or not
Style sheets are used to style text.
Frames are not recommended.
Visual Appearance and Content
Contrast is still sufficient between text and background (must pass
WCAG AA guidelines), especially if you happen to be using a background image
and that image is removed.
Pages remain usable when users enlarge text up to twice its original size.
Each element on a page is reachable and can be manipulated via the keyboard.
Content and background have sufficient contrast for color-blind and low-vision
Do not use content that flashes or blinks more than three times a second.
Do not hide the focus indicator. When a user uses the keyboard to tab from element
to element, it should always be apparent where they are.
Do not require users to perceive font, color, or other styling changes in order
to understand meaning, including error messages or as the sole method of indicating
selection. For instance, don’t say, “The highlighted word in the previous paragraph
is the most important,” or “Items marked in red are errors and need to be corrected,”
unless the word or items are indicated in some other way.
Nested lists are marked up properly.
Language and Content
Acronyms are wrapped in acronym elements and abbreviations use proper markup.
Changes in natural language are identified inline.
Anchor elements contain a valid hypertext reference.
Link text is meaningful when taken out of context and is short and concise.
Links do not directly target images
Avoid using the same link text for links with different targets; for example, using
“Click Here” below each of your featured stories.
Links that target content requiring a plug-in indicate the content type; for example,
having to use a PDF reader to read a PDF.
A valid skip link target is present and is located appropriately.
Event handlers that trigger navigation or form submission are avoided.
Time-based meta-redirects are avoided.
Entire pages do not automatically refresh.
Pages use a consistent navigation structure.
Provide a mechanism for skipping past repetitive navigation links.
The reading order of content and elements are correct when viewed without style
Headings and labels are descriptive and unique.
Page reading order coincides with the tab order of the page.
Pages utilize the title element.
Provide an alternative to scrollable div areas.
Provide section headings to organize content.
Fonts use relative sizing.
Images and Multimedia
Text is used instead of images of text unless decorative or essential.
All images have an alt attribute, leaving the text for decorational images blank
(e.g., alt=”“). Avoid redundant alt attributes. Ensure alternative text for images
is informative and is spelled and spaced correctly. In general, be brief with
alt text (e.g., “the Christus statue”), but provide detail when it conveys meaning
(e.g., “President Hinckley’s son standing at his graveside with family in arms”).
Provide mathematical formulas in appropriate markup.
CSS background images that convey meaning have textual equivalents.
Provide a transcript, captions and/or sign language translation for all audio and
video with speech with correct grammar and punctuation.
Provide a “described” version of a video when description is necessary for unsighted
users to understand content. (The described audio track can either be distributed
with the video content, or as an audio only file.)
If you must use CAPTCHAs, provide an audio CAPTCHA alternative.
Event handlers that trigger focus changes are avoided.
Keyboard focus is indicated visually.
New windows do not open without user control and new windows or frames do not open
without a warning.
Accelerator/shortcut keys do not conflict with standard browser keystrokes.
All active elements can receive keyboard focus and that keyboard focus is not provided
to inactive elements.
The sole use of device dependent event handlers is avoided.
The tab order of interactive elements on the page is logical.
Always label all form fields with the tag and that all labels are unique and explicit.
If a form field has no specific text label on the page, add one, and hide it
with CSS or use the title attribute.
Use fieldsets <fieldset> with legends <legend> to associate prompts
with radio buttons and check boxes. For instance, a form asks “Gender:” and offers
radio buttons that say “Male” or “Female”. Then “Gender:” should be enclosed
in a tag, and all three elements (and the two radio buttons with their labels)
should be enclosed in a <fieldset> tag.
Radio button groups are properly formed.
Identify all input errors in text (in addition to any images or icons), and place
the error notification either next to the affected field or in a prominent location
such as the top of the page with an anchor link to the affected field.
Provide help links or inline instructions for completing fields when necessary.
Provide valid, concise and meaningful alternative text for image buttons.
Do not permit users to complete important actions without a confirmation or a way
Data table header elements are properly identified and provided in the same table
as content, that data tables are not used to also layout content which is unrelated
to the data, that distinct tabular data is provided in separate data tables,
and that headers and cells are properly associated.
Common Mistakes to Avoid
Using in-line presentational attributes for objects: Do not use in-line
attributes to style tables, Twitter widgets, etc. e.g. "frameborder", "cellspacing",
etc.; use CSS.
Using non-distinguishable links: If you have two links labeled the same,
they should point the user to the same destination.
Not using proper markup for headers: For headers, use <h2>,
<h3>, <h4>, etc. tags, not <strong> or <u> tags.
Not using titles for iFrames: When you embed a YouTube video, Twitter
widget, or any other element in an iFrame, you must use a
Insufficient link text: Do not use “Read more” or “click here” as link/button
text. The text should describe what the user is clicking on e.g. “More about
x, y, z.”
Using anchor tags incorrectly: When linking to a page anchor, do
not use the name attribute e.g. name="my-anchor". Use
an ID instead e.g. id="my-anchor". The ID must apply to an actual
page object e.g. <div id="my-anchor">Here is my content</div>,
as opposed to an empty one e.g. <a name="my-anchor"></a>.
Using infographics that do not have a text alternative: Do not create
graphics to display complex text layouts. If you do, provide a plain text alternative below or
on another page, then link to it below the graphic.
Test all pages for markup validation (
http://validator.w3.org). If your page does not pass validation, there should
be a good reason for it.