WCAG 2.1 summary for web writers

This summary is for web content managers, editors and writers. It's limited to level A and AA guidelines relevant to content production.

Navigation

2.4.2 Page titled (A)

WCAG 2.1 says:

Web pages have titles that describe topic or purpose.

This means your web page and document titles identify the topic or purpose of the content.

2.4.4 Link purpose [in context] (A)

WCAG 2.1 says:

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

This means wherever possible, your link text alone identifies the topic or purpose of the linked content. But you can rely on words in the enclosing:

  • sentence
  • paragraph
  • list item or parent list item
  • cell and headers in a table.

Structure

1.3.1 Info and relationships (A)

WCAG 2.1 says:

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

This means you use tags, not visual formatting alone, to show structural elements of your content. You add relevant tags to:

  • headings (h1-h6)
  • lists (ul, ol, dl, li)
  • tables (caption, summary, th, scope, id, headers)
  • quotations and citations (blockquote, q, cite)
  • forms (label, fieldset, legend, optgroup - unless a developer creates your forms)
  • emphasised text (strong, em) - though most publishing systems do this for you).

2.4.6 Headings and labels (AA)

WCAG 2.1 says:

Headings and labels describe topic or purpose.

This means your headings and labels identify the topic or purpose of the content or parts of the content.

Language

3.1.2 Language of parts (AA)

WCAG 2.1 says:

The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

This means you identify the language of foreign language words in your content. On web pages, you use the LANG attribute. In PDF documents, you add a /Lang entry.

You don't need to do this for proper nouns, technical terms or words now part of English.

Images and colour

1.1.1 Non-text content (A)

WCAG 2.1 says:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

This means you write a text version of the information provided by an image. The text version is equivalent; it acts as a replacement for the image. You use the ALT text area for the text version, as long as it's only a few words.

When the text version needs to be longer, you include it on the same page or a linked page. When linking to it, you add the link below the image. And on the linked page, you include a link back to the original page. You then use the ALT text area to:

  • label the image - for example 'floor plan'
  • say where the text version is - for example, 'discussed above' or 'text version linked below'.

For images of art, you write a descriptive label to identify the artist and the artwork. If you use a caption for the descriptive label, you include a short label as the ALT text - for example 'painting'.

For decorative images, you leave the ALT text area empty.

1.4.1 Use of colour (A)

WCAG 2.1 says:

Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

This means you don't rely on colour alone to communicate meaning. You supplement colour with text labels, patterns, symbols or other visual cues.

2.3.1 Three flashes or below threshold (A)

WCAG 2.1 says:

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

This means you don't include content that flashes more than 3 times in a second, except if the flashing area is small and not red.

1.4.3 Contrast [minimum] (AA)

WCAG 2.1 says:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

This means you choose colours for text and images of text with a contrast ratio of at least 4.5:1 against the background. For large text (at least 18 points, or 14 points if bold), the contrast ratio is at least 3:1.

You don't need to do this if the text is part of a logo, decorative, or not intended for reading.

1.4.5 Images of text (AA)

WCAG 2.1 says:

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text, except for the following: Customisable: The image of text can be visually customised to the user's requirements; Essential: A particular presentation of text is essential to the information being conveyed.

This means you don't use images of text where it's technically possible to use styled text.

You can use images of text for:

  • images users can customise
  • logos, screenshots, graphs, diagrams and maps
  • text that is decorative or not intended for reading
  • essential images of text - for example, a document presented as an historical artefact.

1.4.11 Non-text contrast (AA)

WCAG 2.1 says:

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent colour(s): Graphical Objects Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

This means in parts of graphics that need to be understood, you choose adjacent colours with a contrast ratio of at least 3:1.

You don't need to do this:

  • for logos and flags
  • when certain colours are essential - for example, heat maps where gradients represent measures
  • if you provide the information in another format - for example, text labels on the graphic.

3.2.4 Consistent identification (AA)

WCAG 2.1 says:

Components that have the same functionality within a set of Web pages are identified consistently.

This means you use icons and their text alternatives consistently across your website or documents.

Instructions and errors

1.3.3 Sensory characteristics (A)

WCAG 2.1 says:

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

This means your instructions for using content don't rely on visuals (shape, size, screen location or orientation), or sound. You add text labels and refer to them in your instructions.

3.3.1 Error identification (A)

WCAG 2.1 says:

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

This means you use text to identify and describe mistakes users make when filling out forms.

3.3.2 Labels or instructions (A)

WCAG 2.1 says:

Labels or instructions are provided when content requires user input.

This means you provide labels or instructions that explain how to fill out forms. Your labels identify required fields. And they say if a particular data format is required.

3.3.3 Error suggestion (AA)

WCAG 2.1 says:

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardise the security or purpose of the content.

This means wherever possible, your error messages describe how to correct errors users make when filling out forms.

You don't need to do this if the form is part of a test, or if the suggestion creates a security risk.

Documents

This section is based on the the PDF techniques for WCAG 2. If you're creating documents, you need to be aware of the earlier topics too.

1.3.2 Meaningful sequence (A)

WCAG 2.1 says:

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

This means your document has the correct reading and tab order.

2.1.1 Keyboard (A)

WCAG 2.1 says:

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

This means all parts of your document can be used with only a keyboard.

2.4.1 Bypass blocks (A)

WCAG 2.1> says:

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

This means you tag headings so they can be used to navigate through your document.

3.1.1 Language of page (A)

WCAG 2.1 says:

The default human language of each Web page can be programmatically determined.

This means you set the language for the document to English (or the relevant language).

3.2.2 On input (A)

WCAG 2.1> says:

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

This means you include a submit button for interactive forms.

4.1.2 Name, role, value (A)

WCAG 2.1 says:

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

This means your form fields are labelled. And you provide name, role and state values for form controls.

3.2.3 Consistent navigation (AA)

WCAG 2.1 says:

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

This means you include page numbers in the header or footer of the document. The document page number matches the number in the page navigation toolbar.

Pre-recorded audio and video

1.1.1 Non-text content (A)

WCAG 2.1 says:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.

This means you provide a descriptive label for audio, video or multimedia linked or embedded in your content.

1.2.1 Audio-only and video-only (A)

WCAG 2.1 says:

For pre-recorded audio-only and pre-recorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such: Pre-recorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content. Pre-recorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

This means you provide a transcript for audio-only content. For video-only content you provide a transcript or an audio version.

You don't need to do this if the audio or video is an alternative to the main content, and labelled as such.

1.2.2 Captions (A)

WCAG 2.1 says:

Captions are provided for all pre-recorded audio content in synchronised media, except when the media is a media alternative for text and is clearly labeled as such.

This means you provide captions for dialogue and important sounds in video or multimedia.

You don't need to do this if the video or multimedia is an alternative to the main content, and labelled as such.

1.2.3 Audio description or media alternative (A)

WCAG 2.1 says:

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronised media, except when the media is a media alternative for text and is clearly labeled as such.

This means you provide a transcript or an audio-described version for video or multimedia. You do this when important visual content is not included in the soundtrack.

You don’t need to do this if the video or multimedia is an alternative to the main content, and labelled as such.

1.2.5 Audio description (AA)

WCAG 2.1 says:

Audio description is provided for all pre-recorded video content in synchronised media.

This means you provide an audio-described version for video or multimedia. You do this when important visual content is not included in the soundtrack.

You don't need to do this for talking head videos. A transcript is enough.

Web writing course

Learn how to write and design content that's easy to find, read, and use.

We run live online training for individuals and groups.

Book a course at https://4syllables.com.au/