Go to main content
Version-1.3.0

Accessibility

Accessibility banner image

Introduction

It is important to design and build digital content that meets the World Wide Web Consortium's (W3C) accessibility guidelines, so that a person with impairments will still be able to access site content.

The Design System aims to help produce systems thare are WCAG 2.2 AA compliant. The snippets of code provided have considered accessibility, and guidelines are provided for each component. The default colours provided through the Design System are sufficient colour contrast where they are used appropriately together.

For more information on accessibility, read the WCAG Quick Reference guidelines .

Basic Guidelines

  • Informative images need Alternative text (alt tags) to read by screen reader. Alternative text needs to be intelligible to text readers, and descriptive enough.
  • For decorative images use null attributes that is, alt = "" (no space) so that they can be ignored by assistive technologies, such as screen readers.
  • Headings need to be identified (that is, as an H1 etc.) and structured correctly. This helps screen reader to identify most and least important headings.
  • Links need to describe where you're taking the user. Make sure they make sense when read in isolation - don't use 'click here' and 'read more'
  • There must be enough contrast between colour of the text and the colour of the background.
  • Use <th> tag for table header,< td> tag for table data.
  • Data tables should have a programmatically associated <caption> or name (e.g. via aria-label or aria-labelledby).
  • Provide a text equivalent for video and other multimedia.
  • Always try and use exisiting HTML elements if possible. Don't create your own custom control if it will have the same functionality of a native html element.

WCAG 2.2 in the Design System - Explained

The Design System provides components and advice to a AA standard for version 2.1 of the Web Content Accessibiliy Guidelines. Where appropriate, the Design System will try to consider all requirements throughout to level AAA.

There are four main principles of accessibility requiremenets that WCAG covers to ensure that content is; perceivable, operable, understandable, and robust Each principle contains guidelines, and each of those contains the criteria that WCAG compliance is assesed against.

To achieve an accessible service, it is not enough to just use the design system to update the look-and-feel of the system. Considerations must be made to ensure WCAG AA compliance. Please continue reading to understand how the design system can help with each guideline, and where further work must be considered to ensure accessibility compliance.

Please read the Understanding Conformance page on the W3 website before declaring an application as compliant.

Contents

1. Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

1.1. Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.1.1. Non-text Content
Level A
Description

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.

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • Sensory: 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.
  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Decoration, Formatting, Invisible: 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.

See the full guidelines for '1.1.1. Non-text content' on the WCAG website

Design System Notes

All non-text content in the design system components contain screen-reader only text which describes its purpose. Examples of design system components which display non-text content are icon buttons.

All images with content across the system require alt text to describe the image, unless it is purely for decoration.

WebAIM's recommendations
  • Images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
  • Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.
  • Equivalent alternatives to complex images are provided in context or on a separate linked page.
  • Form buttons have a descriptive value.
  • Form inputs have associated text labels.
  • Embedded multimedia is identified via accessible text.
  • Frames and iframes are appropriately titled.

1.2. Time-based Media

Provide alternatives for time-based media.

1.2.1. Audio-only and Video-only (Prerecorded)
Level A
Description

For prerecorded audio-only and prerecorded 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:

  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

See the full guidelines for '1.2.1. Audio-only and Video-only (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system where audio-only or video-only content is presented. However, if the system utilising the design system uses these medias, alternatives must be provided.

WebAIM's recommendations
  • A transcript of relevant content is provided for non-live audio-only (audio podcasts, MP3 files, etc.).
  • A transcript or audio description of relevant content is provided for non-live video-only, unless the video is decorative.
1.2.2. Captions (Prerecorded)
Level A
Description

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

See the full guidelines for '1.2.2. Captions (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system which require captions. However, if the system utilising the design system has media that requires captions, these should be provided.

WebAIM's recommendations
  • Synchronized captions are provided for non-live video (YouTube videos, etc.).
1.2.3. Audio Description or Media Alternative (Prerecorded)
Level A
Description

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

See the full guidelines for '1.2.3. Audio Description or Media Alternative (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system where time-based media is presented. However, if the system utilising the design system uses these medias, alternatives must be provided.

WebAIM's recommendations
  • A transcript or audio description is provided for non-live video.
    NOTE: Only required if there is relevant visual content that is not presented in the audio.
1.2.4. Captions (Live)
Level AA
Description

Captions are provided for all live audio content in synchronized media.

See the full guidelines for '1.2.4. Captions (Live)' on the WCAG website

Design System Notes

There are no components in the design system which require captions. However, if the system utilising the design system has media that requires captions, these should be provided.

WebAIM's recommendations
  • Synchronized captions are provided for live media that contains audio (audio-only broadcasts, web casts, video conferences, etc.)
1.2.5. Audio Description (Prerecorded)
Level AA
Description

Audio description is provided for all prerecorded video content in synchronized media.

See the full guidelines for '1.2.5. Audio Description (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system where time-based media is presented. However, if the system utilising the design system uses these medias, alternatives must be provided.

WebAIM's recommendations
  • Audio descriptions are provided for non-live video.
    NOTE: Only required if there is relevant visual content that is not presented in the audio.
  • While not required at Level AA, for optimal accessibility WebAIM recommends transcripts in addition to audio descriptions.
1.2.6. Sign Language (Prerecorded)
Level AAA
Description

Sign language interpretation is provided for all prerecorded audio content in synchronized media.

See the full guidelines for '1.2.6. Sign Language (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system where prerecorded audtio content is presented. However, if the system utilising the design system uses these medias, sign-language interpretation must be provided.

WebAIM's recommendations
  • A sign language video is provided for media that contains audio.
1.2.7. Extended Audio Description (Prerecorded)
Level AAA
Description

Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.

See the full guidelines for '1.2.7. Extended Audio Description (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system where time-based media is presented and pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video. However, if the system utilising the design system uses these medias, extended audio description must be provided.

WebAIM's recommendations
  • When audio description cannot be added to video due to audio timing (e.g., insufficient pauses in the audio), an alternative version of the video with pauses that allow audio descriptions is provided.
1.2.8. Media Alternative (Prerecorded)
Level AAA
Description

An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.

See the full guidelines for '1.2.8. Media Alternative (Prerecorded)' on the WCAG website

Design System Notes

There are no components in the design system where time-based media is presented. However, if the system utilising the design system uses these medias, alternatives must be provided.

WebAIM's recommendations
  • A transcript is provided for pre-recorded media that has a video track. For optimal accessibility, WebAIM strongly recommends transcripts for all multimedia.
1.2.9. Audio-only (Live)
Level AAA
Description

An alternative for time-based media that presents equivalent information for live audio-only content is provided.

See the full guidelines for '1.2.9. Audio-only (Live)' on the WCAG website

Design System Notes

There are no components in the design system where time-based media is presented. However, if the system utilising the design system uses these medias, alternatives must be provided.

WebAIM's recommendations
  • A descriptive text transcript (e.g., the script of the live audio) is provided for live content that has audio.

1.3. Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.3.1. Info and Relationships
Level A
Description

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

See the full guidelines for '1.3.1. Info and Relationships' on the WCAG website

Design System Notes

The design system has taken care to produce components which have their informaiton, structure and relationships conveyed through their presentation or the semantic markup of their code.

Where necessary, ARIA labels have been used wherever content shares information or relationships.

Where information understanding may be dependent on an explanation, for example, required fields being donated by an asterix, instructions should be provided as to the meaning of the asterix.

All form fields have their labels programatically determined.

Landmarks should be madecto identify regions of the page where appropriate, and headings are semantically programmed.

WebAIM's recommendations
  • Semantic markup is used to designate headings (h1), regions/landmarks, lists (ul, ol, and dl), emphasized or special text (strong, code, abbr, blockquote, for example), etc. Semantic markup is used appropriately.
  • Tables are used for tabular data and data cells are associated with their headers. Data table captions, if present, are associated to data tables.
  • Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend. ARIA labelling may be used when standard HTML is insufficient.
1.3.2. Meaningful Sequence
Level A
Description

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

See the full guidelines for '1.3.2. Meaningful Sequence' on the WCAG website

Design System Notes

Every component in the design system has been created so that the content will be presented in a meaningful sequence. In general, due to the layout nature of Bootstrap and how it is programatically placed together, multi-column layout will follow the reading sequence of reading each column from top to bottom, then to the next column.

Please ensure when placing content and components onto a page, this is upheld. Use semantic HTML markup as much as possible, and do not drastically change the visual order of content against the natural flow of the DOM structure.

WebAIM's recommendations
  • The reading and navigation order (determined by code order) is logical and intuitive.
1.3.3. Sensory Characteristics
Level A
Description

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

See the full guidelines for '1.3.3. Sensory Characteristics' on the WCAG website

Design System Notes

No funcitonality or language used in the design system rely on sensory characteristics. Please ensure the language used in any content does not rely solely on sensory characteristics. For example, do not tell users to "look to the left" or "click the red button".

WebAIM's recommendations
  • Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon to continue" or "Instructions are in the right-hand column").
  • Instructions do not rely upon sound (e.g., "A beeping sound indicates you may continue.").
1.3.4. Orientation
Level AA
Description

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

See the full guidelines for '1.3.4. Orientation' on the WCAG website

Design System Notes

The design system by default does not lock the users to one orientation and will reflow content to any orientation or screen width. Please do not include this functionality unless absolutely essential for the purpose of a system.

WebAIM's recommendations
  • Orientation of web content is not restricted to only portrait or landscape, unless a specific orientation is necessary.
1.3.5. Identify Input Purpose
Level AA
Description

The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and The content is implemented using technologies with support for identifying the expected meaning for form input data.
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

See the full guidelines for '1.3.5. Identify Input Purpose' on the WCAG website

Design System Notes

When collecting certain types of information in inputs, as defined above, utilise the autocomplete attribute in the input.

WebAIM's recommendations
  • Input fields that collect certain types of user information have an appropriate autocomplete attribute defined.
1.3.6. Identify Purpose
Level AAA
Description

In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.

See the full guidelines for '1.3.6. Identify Purpose' on the WCAG website

Design System Notes

In general, the HTML regions are defined for sections of the design system. When producing a page, make sure to utilise appropriate landmarks or regions as much as possible. Each component in the design system uses ARIA as much as possible to identify purpose and enhance the HTML.

WebAIM's recommendations
  • HTML5 regions or ARIA landmarks are used to identify page regions.
  • ARIA is used, where appropriate, to enhance HTML semantics to better identify the purpose of interface components.

1.4. Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

1.4.1. Use of Color
Level A
Description

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

See the full guidelines for '1.4.1. Use of Color' on the WCAG website

Design System Notes

In the design system, links which appear next to text do not solely rely on colour to convey that they are actionable, they have an underline.

When notifications, progress bars or banners are colour coded indicating their status, text is also used to inform the user of the status of the system at the time.

WebAIM's recommendations
  • Color is not used as the sole method of conveying content or distinguishing visual elements.
  • Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.
1.4.2. Audio Control
Level A
Description

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

See the full guidelines for '1.4.2. Audio Control' on the WCAG website

Design System Notes

The design system does not have any automatically playing audio. If this is required for the system, there should be a method to allow the user to pause or stop the audio or control volume.

WebAIM's recommendations
  • A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.
1.4.3. Contrast (Minimum)
Level AA
Description

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 contrast requirement.

See the full guidelines for '1.4.3. Contrast (Minimum)' on the WCAG website

Design System Notes

All components across the design system are designed to have sufficient contrast ratios. Please ensure that the components are placed together in a sensible way such that the colour contrast requirements are upheld.

WebAIM's recommendations
  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.
1.4.4. Resize Text
Level AA
Description

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

See the full guidelines for '1.4.4. Resize text' on the WCAG website

Design System Notes

Because the design system has been produced to be responsive, resizing text to the required size is equivalent to the screen reflowing. All text size units have been defined in rem or em, not relying on pixel values, so text can be resized.

WebAIM's recommendations
  • The page is readable and functional when the page is zoomed to 200%. NOTE: 1.4.10 (below) introduces a much higher requirement for zoomed content.
1.4.5. Images of Text
Level AA
Description

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:

  • Customizable: The image of text can be visually customized to the user's requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

See the full guidelines for '1.4.5. Images of Text' on the WCAG website

Design System Notes

The design system itself does not have any images of text. Please ensure that images of text are only ever used if they are either customizable or essential.

WebAIM's recommendations
  • If the same visual presentation can be made using text alone, an image is not used to present that text.
1.4.6. Contrast (Enhanced)
Level AAA
Description

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5: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 contrast requirement.

See the full guidelines for '1.4.6. Contrast (Enhanced)' on the WCAG website

Design System Notes

The design system has been produced to provide sufficient colour contrasts to meet AA compliance. There are a few colour combinations which however work with AAA, that is the dark teal colour being high contrast (>7:1) against white. Please customize your services colours if a AAA level is required.

WebAIM's recommendations
  • Text and images of text have a contrast ratio of at least 7:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) bold - has a contrast ratio of at least 4.5:1.
1.4.7. Low or No Background Audio
Level AAA
Description

For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:

  • No Background: The audio does not contain background sounds.
  • Turn Off: The background sounds can be turned off.
  • 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds. Per the definition of "decibel," background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

See the full guidelines for '1.4.7. Low or No Background Audio' on the WCAG website

Design System Notes

The design system does not by default have any audio with speech. If it is required for your system, it is important that the audio has little or no background noise.

WebAIM's recommendations
  • Audio with speech has no or very low background noise so the speech is easily distinguished.
1.4.8. Visual Presentation
Level AAA
Description

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs (40 if CJK).
  3. Text is not justified (aligned to both the left and the right margins).
  4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

See the full guidelines for '1.4.8. Visual Presentation' on the WCAG website

Design System Notes

Ensure all columns of text and paragraphs remain under 80 chaarcters wide when you design and build a page, or use relative units to define column width so users can restrict content to at most 80 characters.
No element of the design system has fully justified text.
The line spacing and paragraph spacing of the design system are sufficient.
In terms of the foreground and background colours, please visit the guidelines link on the WCAG website to learn success criteria for this requirement.

WebAIM's recommendations

Blocks of text over one sentence in length:
  • Are no more than 80 characters wide.
  • Are NOT fully justified (aligned to both the left and the right margins).
  • Have adequate line spacing (at least 1/2 the height of the text) and paragraph spacing (1.5 times line spacing).
  • Have a specified foreground and background color. These can be applied to specific elements or to the entire page using CSS (and thus inherited by all other elements).
  • Do NOT require horizontal scrolling when the text size is doubled.
1.4.9. Images of Text (No Exception)
Level AAA
Description

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.

See the full guidelines for '1.4.9. Images of Text (No Exception)' on the WCAG website

Design System Notes

The design system itself does not have any images of text. Ensure that images of text are only ever used if they are purely for decoration or cannot be presented with text alone.

WebAIM's recommendations
  • Text is used within an image only for decoration (image does not convey content) OR when the information cannot be presented with text alone.
1.4.10. Reflow
Level AA
Description

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

See the full guidelines for '1.4.10. Reflow' on the WCAG website

Design System Notes

The design system has been designed to be responsive by default, as the layout is generally built up using Bootstrap, and all components are responsive. Because of this, content can be presented and is not lost at 320px width. Tables also respond when the screen is smaller, to place each table row in its on section. In general, with the design system this should pass, as long as when the page is being created, consideration is taken to not completely remove content on smaller screens, and instead use another way to present content using the breakpoint display classes that Bootstrap provides. Do not hide content on mobile unless it is not necessary.

WebAIM's recommendations
  • No loss of content or functionality occurs and horizontal scrolling is avoided when content is presented at a width of 320 pixels.
    This requires responsive design for most web sites. This is best tested by setting the browser window to 1280 pixels wide and then zooming the page content to 400%.
  • Content that requires horizontal scrolling, such as data tables, complex images (such as maps and charts), toolbars, etc. are exempted.
1.4.11. Non-text Contrast
Level AA
Description

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

See the full guidelines for '1.4.11. Non-text Contrast' on the WCAG website

Design System Notes

All user interface components have a contrast ratio of at least 3:1 in the design system against adjacent colours, as does the focus, hover and active states. When a graphical object is placed into your syste, that does not come straight from the design sysem, ensure that this is also at least 3:1 in contrast ratio, when the graphic is required to understand the content.

WebAIM's recommendations
  • A contrast ratio of at least 3:1 is present for differentiating graphical objects (such as icons and components of charts or graphs) and author-customized interface components (such as buttons, form controls, and focus indicators/outlines).
  • At least 3:1 contrast must be provided in the various states (focus, hover, active, etc.) of author-customized interactive components.
1.4.12. Text Spacing
Level AA
Description

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

See the full guidelines for '1.4.12. Text Spacing' on the WCAG website

Design System Notes

Because the design system is responsive by default, altering the text spacing to the required amounts will not cause any loss of functionality or content, as the layour should reflow accordingly. This can be tested by adding the required spacing to the html element of a page, which should affect all elements, and you will see what happens.

WebAIM's recommendations
  • No loss of content or functionality occurs when the user adapts paragraph spacing to 2 times the font size, text line height/spacing to 1.5 times the font size, word spacing to .16 times the font size, and letter spacing to .12 times the font size.
  • This is best supported by avoiding pixel height definitions for elements that contain text.
1.4.13. Content on Hover or Focus
Level AA
Description

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

See the full guidelines for '1.4.13. Content on Hover or Focus' on the WCAG website

Design System Notes

All user interface components in the design system have been designed so that they are dismissible, persistent and hoverable. For example, the tooltip can be dismissed using the escape key, and special input components such as the select box are the native HTML components, so these are accessible with a keyboard. In general, apart from the tooltip component, there are no elements of the design system where a hover event triggers content immediately, and no content is hidden until the either focus is removed, or the user dismisses it.

WebAIM's recommendations

When additional content is presented on hover or keyboard focus:

  • The newly revealed content can be dismissed (generally via the Esc key) without moving the pointer or keyboard focus, unless the content presents an input error or does not obscure or interfere with other page content.
  • The pointer can be moved to the new content without the content disappearing.
  • The new content must remain visible until the pointer or keyboard focus is moved away from the triggering control, the new content is dismissed, or the new content is no longer relevant.

2. Operable

User interface components and navigation must be operable.

2.1. Keyboard Accessible

Make all functionality available from a keyboard.

2.1.1. Keyboard
Level A
Description

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.

See the full guidelines for '2.1.1. Keyboard' on the WCAG website

Design System Notes

All components in the design system have been developed to allow full functionality using just a keyboard.

WebAIM's recommendations
  • All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing).
  • Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts.
2.1.2. No Keyboard Trap
Level A
Description

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

See the full guidelines for '2.1.2. No Keyboard Trap' on the WCAG website

Design System Notes

No components in the design system trap a user who is just using a keyboard. The escape key will close a lot of controls, but you can always press the tab button to move away from any component.

WebAIM's recommendations
  • Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.
2.1.3. Keyboard (No Exception)
Level AAA
Description

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

See the full guidelines for '2.1.3. Keyboard (No Exception)' on the WCAG website

Design System Notes

As above, the design system is keyboard accessible for all components. None of these components require any specific timings for individual keystrokes.

WebAIM's recommendations
  • All page functionality is available using the keyboard.
2.1.4. Character Key Shortcuts
Level AAA
Description

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off;
  • Remap: A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt);
  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

See the full guidelines for '2.1.4. Character Key Shortcuts' on the WCAG website

Design System Notes

There are no character key shortcuts that are not the normal navigatio shortcuts and are instead printable character keys, that are implemented in the design system.

WebAIM's recommendations
  • If a keyboard shortcut uses printable character keys, then the user must be able to disable the key command, change the defined key to a non-printable key (Ctrl, Alt, etc.), or only activate the shortcut when an associated interface component or button is focused.

2.2. Enough Time

Provide users enough time to read and use content.

2.2.1. Timing Adjustable
Level A
Description

For each time limit that is set by the content, at least one of the following is true:

  • Turn off: The user is allowed to turn off the time limit before encountering it; or
  • Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
  • Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
  • Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
  • Essential Exception: The time limit is essential and extending it would invalidate the activity; or
  • 20 Hour Exception: The time limit is longer than 20 hours.

See the full guidelines for '2.2.1. Timing Adjustable' on the WCAG website

Design System Notes

None of the components in the design system are related to timing, however it is important to adhere to this criteria if your system has a time limit.

WebAIM's recommendations
  • If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit. This is not a requirement for real-time events (e.g., an auction), where the time limit is absolutely required, or if the time limit is longer than 20 hours.
2.2.2. Pause, Stop, Hide
Level A
Description

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

See the full guidelines for '2.2.2. Pause, Stop, Hide' on the WCAG website

Design System Notes

No components of the design system have moving, blinking, scrolling or auto-updating content. If these are required, please follow the guidelines in this criteria. Notifications may cause an issue if too many are presented at once, or the content is constantly auto-upating, so take care how these are used. In general, if an action has been taken, and a notification appears, this does not go against this criteria, however if the notifications auto-update, it is recommended to allow the user to pause, stop or hide or change frequency of this notification, when it is not completely essential for the system.

WebAIM's recommendations
  • Automatically moving, blinking, or scrolling content (such as carousels, marquees, or animations) that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.
  • Automatically updating content (e.g., a dynamically-updating news ticker, chat messages, etc.) can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates.
2.2.3. No Timing
Level AAA
Description

Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events.

See the full guidelines for '2.2.3. No Timing' on the WCAG website

Design System Notes

None of the components in the design system are related to timing, however it is important to adhere to this criteria if your system has timing as an essential part of its functionality.

WebAIM's recommendations
  • The content and functionality have no time limits or constraints.
2.2.4. Interruptions
Level AAA
Description

Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.

See the full guidelines for '2.2.4. Interruptions' on the WCAG website

Design System Notes

To pass this criteria, allow users to postpone or suppress alerts and page updates.

WebAIM's recommendations
  • Interruptions (alerts, page updates, etc.) can be postponed or suppressed by the user.
2.2.5. Re-authenticating
Level AAA
Description

When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.

See the full guidelines for '2.2.5. Re-authenticating' on the WCAG website

Design System Notes

The design sytem provides components but not how the backend reacts to time limits and authentication. This criteria should be adhered to if the user's session expires.

WebAIM's recommendations
  • If an authentication session expires, the user can re-authenticate and continue the activity without losing any data from the current page.
2.2.6. Timeouts
Level AAA
Description

Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.

See the full guidelines for '2.2.6. Timeouts' on the WCAG website

Design System Notes

None of the components in the design system are related to timing, however it is important to adhere to this criteria if your system has a time limit.

WebAIM's recommendations
  • Users must be warned of any timeout that could result in data loss, unless the data is preserved for longer than 20 hours of user inactivity.

2.3. Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

2.3.1. Three Flashes or Below Threshold
Level A
Description

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.

See the full guidelines for '2.3.1. Three Flashes or Below Threshold' on the WCAG website

Design System Notes

Nothing in the design system flashes quickly in a short time period, please take care not to include content that flashes.

WebAIM's recommendations
  • No page content flashes more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red. (See general flash and red flash thresholds)
2.3.2. Three Flashes
Level AAA
Description

Web pages do not contain anything that flashes more than three times in any one second period.

See the full guidelines for '2.3.2. Three Flashes' on the WCAG website

Design System Notes

Nothing in the design system flashes quickly in a short time period, please take care not to include content that flashes.

WebAIM's recommendations
  • No page content flashes more than 3 times per second.
2.3.3. Animation from Interactions
Level AAA
Description

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

See the full guidelines for '2.3.3. Animation from Interactions' on the WCAG website

Design System Notes

There are few animations in the design system, one being the left menu fade. Either allow users to turn these off with a control, or use the media CSS query 'prefers-reduced-motion: reduce' and disable any motion here Reduce motion as much as possible in JavaScript functions or CSS transitions. The design system has implemented this into the existing non-essential animations, but any customisation must be included with this option as well.

WebAIM's recommendations
  • Users can disable non-essential animation and movement that is triggered by user interaction.

2.4. Navigable

Provide ways to help users navigate, find content, and determine where they are.

2.4.1. Bypass Blocks
Level A
Description

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

See the full guidelines for '2.4.1. Bypass Blocks' on the WCAG website

Design System Notes

The design system provides a skip link, that should be the first focusable element on the page, and links to the main content of the page, that bypasses blocks of repeated content. Please also use a proper heading structure and region pages appropriately, which will help users who navigate by the page structure and headings themselves.

WebAIM's recommendations
  • A link is provided to skip navigation and other page elements that are repeated across web pages.
  • A proper heading structure and/or identification of page regions/landmarks may be considered a sufficient technique. Because navigating by headings or regions is not supported in most browsers, WebAIM recommends a "skip" link (in addition to headings and regions) to best support sighted keyboard users.
2.4.2. Page Titles
Level A
Description

Web pages have titles that describe topic or purpose.

See the full guidelines for '2.4.2. Page Titled' on the WCAG website

Design System Notes

Please ensure your pages have an appropriate title that describes the topic or purpose of the page, it is recommended to have the H1 element appear in the page title.

WebAIM's recommendations
  • The web page has a descriptive and informative page title.
2.4.3. Focus Order
Level A
Description

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

See the full guidelines for '2.4.3. Focus Order' on the WCAG website

Design System Notes

By using correct HTML semantics, and not presenting the content's layout as much different to how the DOM structure presents components, the focus order should naturally be meaningful. Please as much as possible do not changing the tabindex of any component, and allow the focus order to naturally be how the page is structured in the DOM. You must also ensure that the order in the DOM also remains logical and intuitive.

WebAIM's recommendations
  • The navigation order of links, form elements, etc. is logical and intuitive.
2.4.4. Link Purpose (In Context)
Level A
Description

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.

See the full guidelines for '2.4.4. Link Purpose (In Context)' on the WCAG website

Design System Notes

Link text should be as descriptive as possible, and it is recommended to use verbs in the link text to describe the link as much as possible. When surrounding content aids the links, this can help users to know what the link purpose is. Whenever multiple links have the same text but go to different locations, these should be distinguishable.

WebAIM's recommendations
  • The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding text, list item, previous heading, or table headers).
  • Links (or form image buttons) with the same text that go to different locations are readily distinguishable.
2.4.5. Multiple Ways
Level AA
Description

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

See the full guidelines for '2.4.5. Multiple Ways' on the WCAG website

Design System Notes

The design system itself does not provide this functionality, and it is recommended that you produce a sitemap and place it in the footer of the site, and provide site search if possible. If not possible, a list of related pages or a table of contents will aid the user to allow them to access the sites pages will be helpful. Consider your entire websites navigation, and perhaps allow the user to access all pages at any time with your site navigation.

WebAIM's recommendations
  • Multiple ways are available to find other web pages on the site - at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages.
2.4.6. Headings and Labels
Level AA
Description

Headings and labels describe topic or purpose.

See the full guidelines for '2.4.6. Headings and Labels' on the WCAG website

Design System Notes

In general, the design system components labels and headings are as descriptive as possible and describe the topic or purpose, however when content is modified, please make sure to not duplicate headings, as as much as possible relate headings and labels to the context. For example, instead of using multiple "More Details", consider adding detail to the label; "More details about London", for example.

WebAIM's recommendations
  • Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them.
2.4.7. Focus Visible
Level AA
Description

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

See the full guidelines for '2.4.7. Focus Visible' on the WCAG website

Design System Notes

All components in the design system have a focus state that is visible against the adjacent colours. This focus ring colour is large enough, and is high contrast against both white and the primary colour as a background. The focused component itself may also receive a thicker border, which allows the currently focused element to be visible on the page.

WebAIM's recommendations
  • It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).
2.4.8. Location
Level AAA
Description

Information about the user's location within a set of Web pages is available.

See the full guidelines for '2.4.8. Location' on the WCAG website

Design System Notes

Any navigation components, whether this is the left menu, breadcrumbs or the process stepper, either have appropriate aria-current attributes, or hidden text to describe the current location. Visually, links on the page that relate to the current location are contrasted against non-current pages. Where possible, use breadcrumbs and process steppers as much as psosible to allow the user to have information about their current location in a site or a process.

WebAIM's recommendations
  • If a web page is part of a sequence of pages or within a complex site structure, an indication of the current page location is provided, for example, through breadcrumbs or specifying the current step in a sequence (e.g., "Step 2 of 5 - Shipping Address").
2.4.9. Link Purpose (Link Only)
Level AAA
Description

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

See the full guidelines for '2.4.9. Link Purpose (Link Only)' on the WCAG website

Design System Notes

Just like the link purpose in context criteria above, it is recommneded that links have descriptive values to help the user know their purpose. In this more strict criteria, this means we should not use hidden text that normally was fine to use when the context was clear based on surrounding context, and instead present links with purposeful text. Do not use any links with the same text that go to a different location on any page, for this criteria.

WebAIM's recommendations
  • The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone.
  • There are no links (or form image buttons) with the same text that go to different locations.
2.4.10. Section Headings
Level AAA
Description

Section headings are used to organise the content.

See the full guidelines for '2.4.10. Section Headings' on the WCAG website

Design System Notes

Take care how headings are used to organise the pages content, and use well a well-sectioned page structure as much as possible.

WebAIM's recommendations
  • Beyond providing an overall document structure, individual sections of content are designated using headings, where appropriate.

2.5. Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.1. Pointer Gestures
Level A
Description

All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

See the full guidelines for '2.5.1. Pointer Gestures' on the WCAG website

Design System Notes

There are no pointer gestures implemeneted in the design system components.

WebAIM's recommendations
  • If multipoint or path-based gestures (such as pinching, swiping, or dragging across the screen) are not essential to the functionality, then the functionality can also be performed with a single point activation (such as activating a button).
2.5.2. Pointer Cancellation
Level A
Description

For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event: The down-event of the pointer is not used to execute any part of the function;
  • Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
  • Up Reversal: The up-event reverses any outcome of the preceding down-event;
  • Essential: Completing the function on the down-event is essential.

See the full guidelines for '2.5.2. Pointer Cancellation' on the WCAG website

Design System Notes

All components in the design system have their functionality activate on the up-event, such as onclick, and not on down-events, such as onmousedown.

WebAIM's recommendations
  • To help avoid inadvertent activation of controls, avoid non-essential down-event (e.g., onmousedown) activation when clicking, tapping, or long pressing the screen. Use onclick, onmouseup, or similar instead. If onmouseup (or similar) is used, you must provide a mechanism to abort or undo the action performed.
2.5.3. Label in Name
Level A
Description

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

See the full guidelines for '2.5.3. Label in Name' on the WCAG website

Design System Notes

All components in the design system have the visible name also in their accessible name, whether this is because the visible name itself is the accessible name, we use an aria-label that also uses the visible text, or we use screen reader text, so that the accessible name is longer, but still includes the visible text.

WebAIM's recommendations
  • If an interface component (link, button, etc.) presents text (or images of text), the accessible name (label, alternative text, aria-label, etc.) for that component must include the visible text.
2.5.4. Motion Actuation
Level A
Description

Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface: The motion is used to operate functionality through an accessibility supported interface;
  • Essential: The motion is essential for the function and doing so would invalidate the activity.

See the full guidelines for '2.5.4. Motion Actuation' on the WCAG website

Design System Notes

There is no functionality on any design system component that is triggered by moving the device or user movement.

WebAIM's recommendations
  • Functionality that is triggered by moving the device (such as shaking or panning a mobile device) or by user movement (such as waving to a camera) can be disabled and equivalent functionality is provided via standard controls like buttons.
2.5.5. Target Size
Level AAA
Description

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

  • Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
  • Inline: The target is in a sentence or block of text;
  • User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
  • Essential: A particular presentation of the target is essential to the information being conveyed.

See the full guidelines for '2.5.5. Target Size' on the WCAG website

Design System Notes

All user interface components have a target size of at least 44 x 44 px unless inline. The only component that does not meet this criteria is the small button, that is 40px in height, and the small radios and checkboxes, so it is recommended to use medium button and above. The small checkboxes and radios are OK, as the full target area includes the label text too. Unless the button is inline with text or there is an equivalent link or control, or the size of essential to the information being conveyed.

WebAIM's recommendations
  • Clickable targets are at least 44 by 44 pixels in size unless an alternative target of that size is provided, the target is inline (such as a link within a sentence), the target is not author-modified (such as a default checkbox), or the small target size is essential to the functionality.
2.5.6. Concurrent Input Mechanisms
Level AAA
Description

Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.

See the full guidelines for '2.5.6. Concurrent Input Mechanisms' on the WCAG website

Design System Notes

None of the components in the design system are restricted to one input modality.

WebAIM's recommendations
  • Content does not restrict input to a specific modality, such as touch-only or keyboard-only, but must support alternative inputs (such as using a keyboard on a mobile device).

3. Understandable

Information and the operation of the user interface must be understandable.

3.1. Readable

Make text content readable and understandable.

3.1.1. Language of Page
Level A
Description

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

See the full guidelines for '3.1.1. Language of Page' on the WCAG website

Design System Notes

You must put a lang attribute into the HTML element for every page of your system.

WebAIM's recommendations
  • The language of the page is identified using the HTML lang attribute (e.g., html lang="en").
3.1.2. Language of Parts
Level AA
Description

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.

See the full guidelines for '3.1.2. Language of Parts' on the WCAG website

Design System Notes

For when additional languages are used, these parts must also have a lang attribute associated.

WebAIM's recommendations
  • The language of page content that is in a different language is identified using the lang attribute (e.g., blockquote lang="es").
3.1.3. Unusual Words
Level AAA
Description

A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.

See the full guidelines for '3.1.3. Unusual Words' on the WCAG website

Design System Notes

The design system components do not use any unusual words, however if an unusual word is used, you must define this through adjacent text or another method.

WebAIM's recommendations
  • Words that may be ambiguous, unfamiliar, or used in a very specific way are defined through adjacent text, a definition list, a glossary, or other suitable method.
3.1.4. Abbeviations
Level AAA
Description

A mechanism for identifying the expanded form or meaning of abbreviations is available.

See the full guidelines for '3.1.4. Abbreviations of Page' on the WCAG website

Design System Notes

The design system components do not use any abbreviations, however if an abbreviations is used, you must use the abbr element or link to a definition or glossary.

WebAIM's recommendations
  • The meaning of an unfamiliar abbreviation is provided by expanding it the first time it is used, using the abbr element, or linking to a definition or glossary.
3.1.5. Reading Level
Level AAA
Description

When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.

See the full guidelines for '3.1.5. Reading Level' on the WCAG website

Design System Notes

In general, this criteria is the responsibility of the content writer. Please try to keep all text to a level that is easy to understand, and if not, provide an alternative or supplemental content.

WebAIM's recommendations
  • A more understandable alternative is provided for content that is more advanced than can be reasonably read by a person with roughly 9 years of primary education.
3.1.6. Pronunciation
Level AAA
Description

A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.

See the full guidelines for '3.1.6. Pronunciation' on the WCAG website

Design System Notes

In general, this criteria is the responsibility of the content writer. Provide pronunciation when it is vital to understanding the word, immediately following the work or via a link or glossary.

WebAIM's recommendations
  • If the pronunciation of a word is vital to understanding that word, its pronunciation is provided immediately following the word or via a link or glossary.

3.2. Predictable

Make Web pages appear and operate in predictable ways.

3.2.1. On Focus
Level A
Description

When any user interface component receives focus, it does not initiate a change of context.

See the full guidelines for '3.2.1. On Focus' on the WCAG website

Design System Notes

No element of the design system initiates a change of context on focus.

WebAIM's recommendations
  • When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.
3.2.2. On Input
Level A
Description

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.

See the full guidelines for '3.2.2. On Input' on the WCAG website

Design System Notes

If, on input, substantial change to the page will occur, you must inform the user beforehand. A form with progressive disclosure based on the input of a radio button, for example, will not fail this criteria because only parts of the entry change, and the overall structure remains the same. What this crtieria refers to, are large structural changes of the page, for example focus moving or pop-ups. These, in that instance, must be described for the user at the beginning of the form.

WebAIM's recommendations
  • When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.
3.2.3. Consistent Navigation
Level AA
Description

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.

See the full guidelines for '3.2.3. Consistent Navigation' on the WCAG website

Design System Notes

The top level navigation and left menu must remain in the same order if they are used across multiple pages using the design system.

WebAIM's recommendations
  • Navigation links that are repeated on web pages do not change order when navigating through the site.
3.2.4. Consistent Identification
Level AA
Description

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

See the full guidelines for '3.2.4. Consistent Identification' on the WCAG website

Design System Notes

Make sure that all elements that are repeated across web pages and have the same functionality are always consistently identified.

WebAIM's recommendations
  • Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way.
3.2.5. Change on Request
Level AAA
Description

Changes of context are initiated only by user request or a mechanism is available to turn off such changes.

See the full guidelines for '3.2.5. Change on Request' on the WCAG website

Design System Notes

Like criteria 3.2.2, consistent behaviour on input, we must not have any substantial changes or change of structure to a page, unless the user has initiated them, or they have the ability to turn these functionalities off.

WebAIM's recommendations
  • Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user. Alternatively, the user is provided an option to disable such changes.

3.3. Input Assistance

Help users avoid and correct mistakes.

3.3.1. Error Identification
Level A
Description

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.

See the full guidelines for '3.3.1. Error Identification' on the WCAG website

Design System Notes

Fields that are required have the required attribute, and also will have text within the label to explain that it is required. When the form is submitted and errors are found, the corresponding errorneous fields will be identified and clearly labelled so the user knows how to fix the error.

WebAIM's recommendations
  • Required form elements or form elements that require a specific format, value, or length provide this information within the element's label.
  • Form validation errors are efficient, intuitive, and accessible. The error is clearly identified, quick access to the problematic element is provided, and the user can easily fix the error and resubmit the form.
3.3.2. Labels or Instructions
Level A
Description

Labels or instructions are provided when content requires user input.

See the full guidelines for '3.3.2. Labels or Instructions' on the WCAG website

Design System Notes

Groups of form inputs are placed within fieldsets, with a descriptive caption. Make sure that all fields have a sufficient label and cue so the user can fill in the form correctly. Give examples and instructions as much as possible.

WebAIM's recommendations
  • Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.
3.3.3. Error Suggestion
Level AA
Description

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

See the full guidelines for '3.3.3. Error Suggestion' on the WCAG website

Design System Notes

Either through the in-line validation for form fields, or through a error summary (it is suggested to use both), ensure you provide appropriate suggestions to allow the user to correct the form errors.

WebAIM's recommendations
  • If an input error is detected (via client-side or server-side validation), suggestions are provided for fixing the input in a timely and accessible manner.
3.3.4. Error Prevention (Legal, Financial, Data)
Level AA
Description

For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

See the full guidelines for '3.3.4. Error Prevention (Legal, Financial, Data)' on the WCAG website

Design System Notes

Reversible and checked features of this criteria have to be considered when building the service. To allow the data to be confirmed, it is suggested to use a summary page, showing users their choices, and allow them to review and correct information before finalising. Do not rely on just a submit button to confirm and finalise any forms for legal, financial and data without allowing the user to at first double check.

WebAIM's recommendations
  • If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed.
3.3.5. Help
Level AAA
Description

Context-sensitive help is available.

See the full guidelines for '3.3.5. Help' on the WCAG website

Design System Notes

When building and designing a form, provide as many instructions and cues as possible to aid in the completion and submission of a form.

WebAIM's recommendations
  • Instructions and cues are provided in context to help in form completion and submission.
3.3.6. Error Prevention (All)
Level AAA
Description

For Web pages that require the user to submit information, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

See the full guidelines for '3.3.6. Error Prevention (All)' on the WCAG website

Design System Notes

Reversible and checked features of this criteria have to be considered when building the service. To allow the data to be confirmed, it is suggested to use a summary page, showing users their choices, and allow them to review and correct information before finalising. Do not rely on just a submit button to confirm and finalise any forms without allowing the user to at first double check.

WebAIM's recommendations
  • If the user can submit information, the submission is reversible, verified, or confirmed.

4. Robust

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

4.1. Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

4.1.1. Parsing
Level A
Description

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

See the full guidelines for '4.1.1. Parsing' on the WCAG website

Design System Notes

Each component in the design system will not cause a parsing error, however please when building a page up from scratch, you make sure all tags are completed in the correct place, and no IDs are duplicated.

WebAIM's recommendations
  • Significant HTML/XHTML validation/parsing errors are avoided. Check at the w3 validator .
4.1.2. Name, Role, Value
Level A
Description

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.

See the full guidelines for '4.1.2. Name, Role, Value' on the WCAG website

Design System Notes

Most of the design system components are designed in such a way that their semantic structure will define their name, role and value. Where this is not the case, we have implemented aria tags that appropriately describe the role of the component, its value, and its asscessible name through labels.

WebAIM's recommendations
  • Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately.
  • ARIA is used appropriately to enhance accessibility when HTML is not sufficient.
4.1.3. Status Messages
Level AA
Description

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

See the full guidelines for '4.1.3. Status Messages' on the WCAG website

Design System Notes

Alerts and notifications, and error summarys in the design system utilise aria-live and aria-atomic to allow the message to be announced to screen readers. We also use the role alert where necessary.

WebAIM's recommendations
  • If an important status message is presented and focus is not set to that message, the message must be announced to screen reader users, typically via an ARIA alert or live region.