Requirements

Text

Text is combinations of characters on a web page that can be read with the purpose of receiving an informative message.

Colour contrast

Colour contrast is a ratio calculated using a text's foreground colour against its background colour with free software tools.

• 4.5:1 minimum color contrast ratio is required for all text.

• 3:1 minimum color contrast ratio may be used for large text which is at least 18 points (or 14 points if bolded)

Headings

A heading is a short text phrase which identifies the section of content that immediately follows it. Heading elements are <h1>-<h6>.

When using headings:

• Identify heading text using heading elements (<h1>-<h6>).

  • Start at heading element <h1> (recommended).
  • Don't skip heading element levels (e.g <h2>, <h4>) (recommended).

• Use descriptive text to identify and differentiate the contents of its section from other content on the web page.

Links

A link is a type of UI control that performs one or more of the following behaviours:

• Takes the user to another web page
• Jumps to another location within the same web page
• Performs specialized UI functionality determined by client side scripting (JavaScript)

The link element is <a>

Link text

Provide link text inside either the:

• <a> element
• title attribute
• alt attribute of any <img> element within the link

Ensure independent context of link text. Additional context can be established using either:

• The paragraph, sentence, list item, parent list item, table cell, or table heading enclosing the link; or
• The preceding heading element.

Use consistent link text for all links which perform the same function.

Repeated navigation links

When a group of links are repeated on multiple web pages:

• The relative order of the links must be the same on each page
• A skip mechanism is provided (satisfied by default in WET for primary navigation).

Finding web pages

When establishing navigation on a web site, provide either a:

• Site map, providing links to different sections of the site; or
• List of links to all web pages within the web site; or
• Search engine for the site.

Images

An image is a static two dimensional visual artifact that is a type of non-text content.

The image element is <img>.

Describing images

Description text

All images require a text description which serves the same purpose and presents the same information as the image including all:

• Data
• Relationships
• Colour differences (which convey meaning)

A description can be empty if the image provides all of the following:

• No information
• No functionality
• Asthetic purpose only

Description length

For descriptions which are:

• Empty, use an empty string ("") as a short text description.

• Less than 140 chars, use the entire description as a short text description.

• Greater than or equal to 140 chars:

  • Summarizes the image in a few words as a short text description, and
  • Use the entire description as a long text description.

Description coding

Short text descriptions must be coded in the alt attribute of the <img> element.

Long text descriptions can be coded anywhere (either on the current page or another page) and must either:

• Provide a link to it immediately adjacent to the image.

• Append how to locate it to the short text description.

Images of text

Use CSS to customize text presentation.

Do not use images of text unless a particular presentation of text is essential to the information being conveyed.

Animated images

Animated images are considered the same as video-only content and the requirements for video-only content apply.

Quotations

A quotation is a strict repetition of an expression re-produced in the natural human language it was originally delivered.

Quotation elements are <q> and <blockquote>.

When using quotations and the length is:

• Short (no paragraph breaks), use the <q> element.

  • Quotations marks (", ̋, ̏) are coded outside the <q> element

• Long (with paragraph breaks), use the <blockquote> element.

  • Quotations marks (", ̋, ̏) are coded inside the <blockquote> element

Language

When coding web pages, specify the natural human language of content by setting a:

• Default language using the lang attribute in the <html> element

• Change of language using the lang atrribute in any element enclosing the text in a different language.

When using the lang attribute, use:

• en for English
• fr for French
• These codes for other languages (see 639-1 column)

Page titles

When using page titles:

• Use the <title> element.

• Use descriptive text to identify and differentiate the contents of the web page from other content of other web pages.

Forms

A form contains a set of form elements, which are UI controls that accepts input.

Form elements are <button>, <input>, <select>, and <textarea>.

Labels and Instructions

Associate form elements to labels by setting either its:

• id attribute to the for value of a <label> element enclosing the label value.

• title attribute to a label value.

• value attribute, if it is a button, to a label value.

Use consistent label text for all form elements which perform the same function.

Describe form elements purposes clearly with descriptive label text.

Provide clear instructions (with examples, if applicable) identifying form elements requiring:

• Mandatory data (e.g. required fields)
• Limited set of values (e.g. numeric or text only, upper and/or lower limits)
• Expected data format (e.g. dates, phone numbers, postal codes)

Supplement colour instructions with symbols or text. (e.g. identifying required fields)

Error messages

When providing error messages:

• Identify the form(s) element affected.

• Explain the error and, if applicable, how to fix it for:
  • Missing data (e.g. required fields)
  • Outside of allowed values (e.g. numeric or text only, upper and/or lower limits)
  • Incorrect format (e.g. dates, phone numbers, postal codes)

Session time limits

When a time limit is present, a user must be able to either:

• Turn off the time limit.

• Adjust the time limit by extending incrementally up to at least ten times the length of the default setting, ensuring:

  • Prompting the user, on each occurence, to adjust the time limit at least 20 seconds before the time expires.

Turning off or adjusting the time limit is not required when the time limit is either:

• Real-time (e.g. auctions)

• Essential to the activity and extending it would invalidate the activity (e.g. exams)

• 20 hours or more in length

Legal committments and financial transactions

When legal committments or financial transactions occur as a result of a user submission, a user must be able to either:

• Reverse the submission (or recover the original data)

  • Time limits on the reversal are permitted provided it is stated on the form.

• Review and correct input before finalizing the submission.

• Confirm their intent to finalize the submission.

UI controls

UI controls are elements that can perform an action (or "do something").

UI controls are links and form elements by default. However scripting can transform any element into a UI control.

Appearance

Without colour, UI controls (specifically links) must be visually evident (e.g. text decoration or using layout).

Focus and input

Focus exclusively activates a UI control for use by the user. Losing focus deactivates the UI control.

Input occurs when a user changes the value of the active UI control by interacting with it.

When using UI controls with a keyboard,

• Changing focus is always available to the user (no trapping).
• Receiving focus is always available for all UI controls.
• A visual focus indicator is exclusively visible on the active UI control.
• The order that UI controls receive focus reflects the intended flow, meaning, and operation of the page.
• Page context must not change when a UI control receives focus or input.

Event handlers (JavaScript)

Event handlers are special methods executed in JavaScript when a user activates or interacts with an UI control.

When using JavaScript, event handlers must be:

• Independent (onFocus, onBlur, onSelect, onChange, and onClick)

Tables

A table is a mechanism for dividing tabular data into rows and columns.

Table elements are <table>, <th>, <td>.

Additional related table elements include <caption>, <thead>, <tbody>, <tfoot>, <col>, and <colgroup>

When using tables:

• Ensure table markup is used for data tables

• Avoid layout only tables, use CSS instead (Recommended).

• Supplement colour usage (that conveys meaning) with equivalent text.

• Associate <td> data cells to one or more <th> header cells for non-simple tables.

  • See Table Usability

Related links

• Contrast Analyser for Windows and Mac
• Juicy Studios Luminosity Analyzer
• Table Validator