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.