Summary of recommendations
Core purpose
- Define the core purpose of a document or feature, to inform the design and implementation.
Validation
- Use a on all HTML documents and validate against that Doctype.
Progressive enhancement
- Implement the core purpose of every HTML document without requiring CSS or JavaScript to function.
Indicating language
- Specify the main language of the page content.
- Indicate any changes to language within the page content.
- When needed, specify the language direction along with the language.
Page titles
- Include a
<title>
in the document <head>
that identifies its main content.
- Include specific information about the page and its context within the broader site.
Main landmark
- Include exactly one element with a main role in a document.
Headings
- Include exactly one
<h1>
element in a document.
- Ensure heading levels after the
<h1>
are sequential, hierarchical and don鈥檛 skip heading levels.
- Ensure each heading element is followed by content.
Minimum text size
- Style all core content text to be no smaller than a minimum calculated size of 13px and all other page text to be no smaller than a minimum calculated size of 11px on the default browser setting.
Resizable text
- Style text with units that are resizable in all browsers.
- Ensure content is visible and usable with text resized to 200% of normal.
- Ensure content is visible and usable with page zoomed to 200% of normal.
- Support zoom where it is available on a platform.
Tabindex
- Use the order of the HTML markup to create a logical tab order, rather than positive
tabindex
values.
- Don鈥檛 use a
tabindex
value of 0 on elements that are not focusable by default.
- Use a
tabindex
value of -1 if an element is not focusable by default and needs to programatically be given focus.
Focusable controls
- When creating controls for JavaScript enhanced interactions, use the elements
<a>
, <button>
or <input>[type=checkbox color date datetime-local email file month number password radio range search tel text time url week]
, especially if that is the only mechanism for controlling such interactions.
- Include an
href
attribute with <a>
elements used for interaction controls.
- Do not add interaction controls that have no purpose without JavaScript into a page until the associated code is available and capable of running.
Visible on Focus
- Make hidden elements in the tab order visible on focus.
Control styles
- Visually style links that are within general editorial content so that they are self-evident and distinguishable from the surrounding content.
- Change the visual style of all links, buttons and other interactive elements on hover and focus. Hover and focus styles can be similar.
Focus styles
- Make focusable elements have a clearly identifiable visual style when they have focus.
Using colour
- Use context and/or markup, in addition to colour, to identifiably convey information.
- If using a gradient or background image, progressively enhance an element's style from a solid background colour specified in CSS to the gradient or image background.
- Ensure all foreground-background colour combinations pass a WCAG 2.0 AA compliance colour contrast check.
Image alternatives
- Include an
alt
attribute with all <img>
elements.
- Ensure all editorially significant images have a meaningful non-empty
alt
attribute value, or a text alternative in the preceding or following content.
- Decorative images should have an empty
alt
attribute.
Title attributes
- A
title
attribute should avoid repeating text that is already visible and associated with the same control or content.
- Do not use
title
attributes for essential information, such as instructions or form labels.
Form labels
- Provide a meaningful label, in the form of a programatically associated
<label>
element, for all form fields that allow input(<select>
, <textarea>
and all <input>
elements except for image, submit, reset, button or hidden).
Form interactions
- Only change the users location in a page on an explicit user action, such as when a submit button is activated, not when blur, change (particularly for select elements), or focus events are fired.
- Include a submit button, either an
<input>[type=submit image]
or <button>[type=submit]
element, within all <form>
elements that take user input (i.e. do not consist only of <input>[type=hidden]
elements to store state).
Tables
- Mark up data tables in a way that enables browsers and assistive technologies to identify them as such.