Summary of recommendations

Define the core purpose of a document or feature, to inform the design and implementation.

Implement the core purpose of every HTML document without requiring CSS or JavaScript to function.

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.

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.

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.

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.

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.

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.

Make focusable elements have a clearly identifiable visual style when they have focus.

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.

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.

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.

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).

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).

Mark up data tables in a way that enables browsers and assistive technologies to identify them as such.

��