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’t 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’t 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.