Accessibility

This page provides an overview and can be used as a checklist for the Levels A and AA of accessibility according to WCAG 2.1.

There is also Level AAA, but since we don’t currently mandate conformance with Level AAA, the criteria are not listed here.

Level A

To reach accessibility Level A, all of the following criteria must be met. If the described elements/functionalities do not appear on the website, the criteria may be ignored.

Non-text content

• Add a text alternative to all of your images and icons which provide information or other use than just for aesthetics
• Add an empty alt="" to all decorative images and icons (omitting the whole alt attribute would still make the screen reader read out “blank” or “image” but an empty alt tells it, that the image can be ignored)
• Add a text alternative to your audio and video (a brief description of the topic)
• Add a name to all of your controls (such as “Search” or “Submit”)

Audio-only and Video-only (Prerecorded)

• Provide an alternative to video-only and audio-only content

Captions (Prerecorded)

• Provide captions for videos with audio

Audio Description or Media Alternative (Prerecorded)

• An alternative for time-based media or audio description of the prerecorded video content is provided

Info and Relationships

• Break up content with subheadings for new sections
• Mark those headings with HTML header tags
• Use the semantically correct HTML for all elements
• Use valid HTML

Meaningful Sequence

• Present content in a meaningful order
• Separate navigation menus from the content
• Use paragraphs in order
• Use headings to show importance (also provide a meaningful heading sequence h1->h2->h3->…)
• Use exactly one h1 per page to briefly describe the content
• Turn off CSS and check if the content is still provided in the intended order

Sensory Characteristics

• Use more than one sense for instructions
• Avoid instructions that rely on sound

Use of Colour

• Don’t use a presentation that relies only on colour (e.g. marking an error by only using red colour)

Audio Control

• Don’t play audio automatically

Keyboard

• Every element must also be accessible by keyboard only

No Keyboard Trap

• Test your code without a mouse to make sure you can navigate to (and away from) all parts of the page by keyboard only
• Make sure that all navigation is controllable by either the tab key or the arrow keys (a standard many people are familiar with)

Character Key Shortcuts

• If a keyboard shortcut is implemented in content using only letter, punctuation, number, or symbol characters, then at least one of the following is true:

  • A mechanism is available to turn the shortcut off
  • A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc.);
  • The keyboard shortcut for a user interface component is only active when that component has focus.

Timing Adjustable

• Time limits:
  • Give users an option to turn off the time limit OR
  • Give users the option to adjust the time limit OR
  • Give users the option to extend the period at least twenty seconds before it expires (least ten times)
• Moving or animated text: users must be able to pause the movement
• Features, that update automatically: you must allow your users to delay the frequency of the updates by at least ten times the default setting

Pause, Stop, Hide

• Provide user controls for moving content

Three Flashes or Below

• No content flashes more than three times per second

Bypass Blocks

• Provide skip links to content which is provided on multiple pages (at least to the main content)

Page Titled

• Use helpful and clear page titles for every page

Focus Order

• The keyboard focus has the same sequence as the logical reading flow

Link Purpose (In Context)

• The purpose of every link is clear from the link text (for example, “account history”) OR
• The purpose of links is clear from the surrounding content, meaning the same sentence, paragraph or cell in a table (for example, “see your account history” ) OR
• If the link is an image, the alt text of the image describes the link purpose AND
• Links with the same destination have the same description

Pointer Gestures

• All functionality that uses multipoint (a two-finger pinch zoom) or path-based gestures (swiping, dragging,…) for operation can also be operated with a single pointer without a path-based gesture

Pointer Cancellation

• For functionality that can be operated using a single pointer, at least one of the following is true:
  • The down-event of the pointer is not used to execute any part of the function
  • 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;
  • The up-event reverses any outcome of the preceding down-event;
  • Completing the function on the down-event is essential.
• Example: A drag-and-drop interface allows users to sort vertically stacked cards by picking up one card with the pointer (down-event), move it to a new position, and insert it at the new location when the pointer is released (up-event). Releasing the pointer outside the drop target area reverts the action, i.e., it moves the card back to the old position before the interaction started.

Label in Name

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

Motion Actuation

• 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

HINT Currently N/A for George Web, only relevant for George Go.

Language of Page

• Ensure that each page has a language assigned to it (with meta tag)

On Focus

• Ensure no element changes solely by receiving focus
• Avoid both behavioural and visual modifications
• Ensure that:
  • Links don’t open automatically on focus
  • Forms don’t submit without the user taking action (such as clicking the “Submit” button)
  • There are no automatic pop-ups
  • Focus never jumps to another element automatically
  • No other action that occurs on focus alone causes the page to change

On Input

• Forms must not auto-submit when all fields are filled
• Focus must not automatically jump to the next field in a form once a field is complete
• Using a control (like selecting yes or no) must not automatically perform the action
• Exception: Elements can change on input if you inform the user of the change before they have the chance to input their data or make their selection

Error Identification

• Clearly identify input errors (further instructions can be found under forms)

Labels or Instructions

• Label all input fields clearly and helpfully (further instructions can be found under forms)

Parsing

• Ensure HTML elements have complete start (<tag>) and end (</tag>) tags where needed.
• Nest all HTML elements correctly (for example, list objects within an ordered or unordered list)
• Use unique IDs
• Check that HTML elements don’t contain duplicate attributes

Name, Role, Value

• For all components, the name and role can be programmatically determined
• States, properties, and values that can be set by the user can be programmatically set
• Notification of changes to these items is available

Level AA

To reach accessibility Level AA, all of the following criteria must be met additionally to all previously mentioned criteria. If the described elements/functionalities do not appear on the website (e.g. Live Videos), the criteria may be ignored.

Captions (Live)

• Live videos must have captions

Audio Description (Pre-recorded)

• Provide audio description for video content

Orientation

• 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

Identify Input Purpose

• The purpose of each input field collecting information about the user can be programmatically determined
• Add metadata to indicate the purpose of an element, e.g. by adding an autocomplete attribute with autofill detail tokens.

Contrast (Minimum)

• The contrast ratio between your text and background has to be at least 4.5:1
• Use a colour contrast checker to verify your colours (for example the WebAIM contrast colour checker)

WIP Contrast will be cross-checked with the Design Team, to see how accessibility requirements can be met.

Resize Text

• Text must be resizable to at least 200% without loss of content or function (only text resize, not browser zoom!)
• Make sure your resized text doesn’t require the user to scroll horizontally
• Make sure your resized text doesn’t overlap
• Always use rem/em instead of px/vw/vh when styling your content to make resizing easier

Images of Text

• Never use images of text except:
  • Brand logos
  • Purely decorative text
  • When using an image of text is necessary because you can’t achieve the intended effect with plain text and CSS

Reflow

• 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 pixels;
  • Horizontal scrolling content at a height equivalent to 256 pixels.

Non-text Contrast

• The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent colour (s):
  • Visual information required to identify user interface components and states, except for inactive components
  • Parts of graphics required to understand the content

Text Spacing

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

WIP Similar to Contract above, Text Spacing will be cross-checked with the Design Team.

Content on Hover or Focus

• Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
  • 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
  • If pointer hover can trigger the additional content, then the pointer can be moved over it without the additional content disappearing
  • The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Multiple Ways

• Offer several ways to find pages and content, for example by:
  • Adding skip links to the main parts of the page (menu, content, footer, help), but don’t use more than 5 to keep the navigation simple!
  • Adding an HTML sitemap page (which links to every page on your website)
  • Including search functionality on every page
  • Providing a clear and consistent main navigation menu on every page

Headings and Labels

• Use informative headings and subheadings to ease navigation through the content
• Avoid heading skips for example from h1 to h3
• Label all elements (navigations, sidebar widgets, forms, tables,…)

Focus Visible

• Make sure that keyboard focus is always visible and clear (e.g. with a black border)

Language of Parts

• Set your main language by meta tag
• Add a language attribute to content that is not in the main language - e.g. when using English words in German (like George 😄)

Consistent Navigation

• Keep navigations in the same location on all pages
• Keep the structure of menus consistent on all pages
• This consistency also applies to standard parts of your website (like the search field) - don’t change their location on different pages/subpages

Consistent Identification

• Any icons used are consistent (e.g. ‘print’ or ‘export’)
• Elements with the same function are labelled and named consistently or have a consistent alt text

Error Suggestion

• Inform the user how he can correct errors as soon as he causes them (further instructions can be found under forms)

Error Prevention (Legal, Financial, Data)

• Legal commitments, financial transactions and changes to user-controlled data are reversible OR
• They are checked for input errors and the user is given a chance to correct any mistakes OR
• Add a confirmation page to the submission process that summarises the input and the outcome with an option for the user to correct or cancel the submission. This page needs an input (e.g. a button or checkbox) acting as confirmation of the submission

Status Messages

• 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

ARIA

This is a guide on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification (WAI-ARIA), which helps to implement Web applications in a more accessible way.

Live Regions

Dynamic content which updates without a page reload must be announced to the screen reader user since he or she is not able to recognize the changes.
Therefore, these content changes should be marked as live regions:

• aria-live=
  • "assertive" - the change in content will be read immediately and interrupts the screen reader if it is reading something else at the moment. This has the same effect as the ARIA role 'alert'
  • "polite" - will let the screen reader finish if it is reading something else at the moment and announce the changes afterwards
• aria-controls="region-id" - is used to associate a control with the regions that it controls
• aria-relevant=
  • "additions" - announce only addition of nodes inside a container
  • "removals" - announce only removed nodes inside a container
  • "text" - announce only textual changes of existing nodes
  • you can use multiple values for this attribute like “text additions”
• aria-atomic="true" - tells the screen readers to read out the entire content of the wrapping container on every change
• aria-busy="true" - indicates that the element is loading or being updated

Important ARIA roles

ARIA roles should only be used if the purpose of the element is not evident from a semantically correct HTML tag.
Don’t use divs/spans with role="navigation"/"list"/"button"/etc. when there are HTML tags to indicate the intended roles
Roles that can not be determined by HTML tags would be:

• alert - a message with important information
• status - advisory information for the user which is not important enough to justify an alert
• dialog - an application window that interrupts the current process to prompt the user to enter information or require a response
• alertdialog - a type of dialog that contains an important message
• search - a landmark region that contains search functionality
• presentation - an element whose implicit native role semantics will not be mapped to the accessibility API
• tooltip - a contextual popup that displays a description for an element
• log - a type of live region where new information is added in a meaningful order (old information may disappear)
• marquee - a type of live region where non-essential information changes frequently
• timer - a type of live region containing counter which indicates an amount of elapsed time from a start point, or the time remaining until an endpoint
• progressbar - an element that displays the progress status for a task
• slider - a user input where the user selects a value from within a given range (to some extent covered by using HTML’s input type="range")
• grid - a grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table
• gridcell - a cell element in a grid
• row - a row of cells in a grid
• rowheader - a cell containing header information for a row in a grid

Important ARIA attributes

• aria-hidden="true" - hide an element from the screen reader
• aria-haspopup="true" - indicates that an element has a submenu
• aria-expanded="true"/"false" - tells the screen reader if an expandable element is expanded or collapsed. The attribute must be added to the widget that expands/collapses the element
• aria-label="[text]" - a short label text to determine an elements purpose
• aria-labelledby="label-id" - connecting an element to another element holding a label text
• aria-describedby="description-id" - connecting an element to another element holding a longer description text
• aria-required="true" - indicates that an input field is required
• aria-invalid="true" - indicates that an input value failed validation
• aria-valuemax/aria-valuemin - sets the minimum and maximum value of a slider

Responsibilities

• 🎨 Design Team
• 🖥 George Web Chapter
• ⚙️ Design System Squad
• ✏️ Content Authoring

Further coverage

Accessibility information has not only been added on this page, but also to the individual components throughout this guide. However, for certain aspects, there are no components in this guide (yet). What follows is a list of additional topics to be considered.

• George Overview/Dashboard
  • The products on the overview page can be rearranged with Drag&Drop. Given that the order matters (e.g. customers might want to place their most important products upfront), additional efforts should be made to ensure compliance with Pointer Gestures and Pointer Cancellation.
  • Some OverviewCards display CRM-inspired content with an auto-advancing carousel. Additional implementation is needed to facilitate the Pause, Stop, Hide criterion.
• Session Management
  • On the login page, the focus is automatically moved to the only input field, which is why accordance with Labels or Instructions and On Focus is crucial.
  • In general, there is no George usage without successfully logging in. While criteria dealing with input validation and error handling always have to be taken care of, they are of even greater importance on the login page.
  • Sessions have time constraints, i.e. “seemingly inactive” customers will be automatically logged off after a certain time period. Currently, there is no explicit mechanism to extend this time period. Any implementation that ensures the Timing Adjustable criteria would be helpful.