Accessibility
About
Accessibility for digital products means ensuring that all users, including those with disabilities, can interact with and navigate digital content with ease. This includes accommodating various impairments such as visual, auditory, motor, and cognitive challenges.
Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines, in short WCAG, are a set of guidelines aimed at making web content more accessible to people with disabilities. They provide a framework for improving accessibility across websites and digital products. On November 30, 2023 the WCAG 2.2 was officially released. It builds upon the previous versions (WCAG 2.0 and 2.1). They have provided Understanding Docs of WCAG 2.2 listed on this website:https://www.w3.org/WAI/WCAG22/Understanding.
The WCAG 2.2 guidelines are divided into three conformance levels:
- Level A | covers essential accessibility;
- Level AA | considered standard for usability;
- Level AAA | ensures maximum inclusivity. By law, we need to adhere to WCAG 2.2 with level AA by June, 2025. The expectation is that in future we need to adhere to level AAA.
Accessibility checklists
To make it easier for Designers and Developers, Riverty Design System offers two checklists; one for designers to check the accessibility of their designs and one for developers to check the accessibility for their implementations.
It is a first step into making this Accessibility topic more tangible for designers and developers. Therefore, we see these checklists as a starting point and are open to any feedback or suggestions.
Navigate to the checklists by using the Tab component on top of this page, or navigate to them using the following links:
Raise accessibility issues together
Have you noticed an accessibility issue in one of our Riverty websites or apps? Please share it in our Riverty Design System Accessibility channel, and to make it easier please try to support your issue found by images or recordings of your screen.
About
Riverty Design System offers a design checklist to support creating accessible designs. This checklist is also available through Jira. Additionally, we have gathered a number of design tools that can help you checking the accessibility.
Design checklist
Text
I have provided text alternatives for all non-text content in my design.
Screen readers will mark an image as ‘an image’ when there’s no text alternative provided. With this explanation users using screen readers won’t know what the image communicates. Therefore, it’s important to provide an explanation in text for each non-text content (e.g., Image, Icon, Logo).
Level A (Must) | https://www.w3.org/WAI/WCAG22/Understanding/non-text-content
I haven’t used images of (important) texts in my design, but actual texts only.
Screen readers cannot recognise texts on images, and in that case when users navigate through one of our channels by a screen reader, they would not get noticed about this text. Therefore, especially when texts are important for users’ understanding of something, we should use actual texts rather than images of texts.
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/images-of-text
I have written the labels of links in such a way that the purpose or destination of the link is clear before interacting with the link.
Links should be clear to users. They should be predictable, lead users where they expect to go to when clicking the link.
Level A (Must) | https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only
My design allows users to adjust the text spacing or font characteristics without causing loss of content or functionality.
Users may override the text spacing or font characteristics we specify as default. They do this to improve their reading experience, so that content is still readable and operable for them. Therefore, test your designs with web- and phone settings to adjust text spacing or characteristics.
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/text-spacing
My design allows users to enlarge the text size up to 200% without causing loss of content or functionality.
Users may override the text size we specify as default. They do this to improve their reading experience, so that content is still readable and operable for them. Therefore, test your designs with web- and phone settings to enlarge the text size up to 200%.
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/resize-text
I have thoroughly organised content by descriptive page titles, headings and labels. I also applied section headers where possible to improve keyboard navigation.
Users may feel overwhelmed by long texts or long lists of elements. Headings and labels should be added with clear descriptions. Additionally, section headers may be applied to help keyboard users navigate the content. Each page needs to have a clear page title.
Level A (Must) | https://www.w3.org/WAI/WCAG22/Understanding/page-titled
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/section-headings
Colors
I have checked that my design doesn’t rely on color only anywhere. It is always supported by another piece of communication, textual or visual.
It’s important that all information provided would still make sense and be visible if gray scaled. Especially when using diagrams and graphs that often rely a lot on color. Also, looking at links - they should still appear as a link if it’s not in color (underline in text sections). It’s good to add an arrow icon next to links to emphasize that they are used for navigation but it’s not important for links in menus since they are expected to navigate the user if clicked.
Level A (Must) | https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html
I have checked all text color contrast ratios to be of 4:5:1 minimum.
Working with proper text contrast is beneficial for everyone. Think of users using their devices in clear sunlight, or users adjusting screen brightness to save battery, or working with filters to avoid eye strain.
Level AA (Must) | https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
Level AAA (Aim) | https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced
The non-text and interactive elements that I have used, have a minimum of 3:1 color contrast ratio against background colors.
Non-text elements such as logos and icons, and interactive elements such as components need to have a color contrast ratio of 3:1 (same as for large texts). Test them against the background colors of your design.
Level AA (Must) | https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast
Interactive elements
I have made sure that all interactive elements in my design offer compliant focused states.
Users should be able to navigate your design using keyboard. Therefore, interactive elements should always come with a visible focused state. The aim is to give these elements a visible focused state without loosing sight on other content. DSYS components have a compliant focused state, but if you need to design an interactive element yourself please make sure to add a focused state that is consistent to the ones used in the DSYS components.
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-enhanced
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance
I have checked that users are able to navigate through my design by keyboard only, and preferably are able to accomplish everything.
Users should be able to navigate your design using keyboard. Preferably they should be able to accomplish everything without exceptions.
Level A (Must) | https://www.w3.org/WAI/WCAG22/Understanding/keyboard
Level A (Must) | https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/keyboard-no-exception
My designs allow users to easily consume and manage content that’s available through hovered and focused states, only.
The use of content that’s just available through hovered and focused states needs to be considered carefully. Tooltips are not available for mobile users, and on Desktop they disappear when not hovered or focused anymore. A Popover is persistent until users close it by click or tap, or close it using the Escape button. Both components need to be implemented in such a way that they overlay as least (important) content as possible (e.g., a decorative image).
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus
I have taken into account that the target size of interactive elements in my design aims for AAA (44 x 44 pixels) but definitely adheres to AA (24 x 24 pixels).
The target size is the area that responds to users tapping on an interactive element.
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html
My design allow users to pause, stop or hide content that can move, blink, scroll or auto-update.
Motion might distract users, and in worst case scenario make users sick. Therefore, animations preferably should start by users triggering it themselves, and allow to be disabled. Except for when animations are crucial to understand functionalities or information but please consider this carefully.
Level AAA (Aim) | https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions
My design offers users multiple ways to be navigated through. Users are able to access pages in more than one way.
Users do not navigate through designs in one consistent manner. We should allow users to access pages in at least two ways.
Level AA (Must) | https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways
Accessibility design tools
- Website - WebAIM: for manual contrast check to evaluate text and background accessibility compliance.
- Figma Plugin - A11y - Color Contrast Checker: Quickly check and adjust text-background contrast in Figma to meet accessibility standards. Ideal for ensuring readable color combinations.
- Figma Plugin - Axe for Designers: Detect and fix a wide range of accessibility issues early in the design process. Perfect for a comprehensive accessibility review.
- Figma Plugin (Private for Riverty) - Color Contrast Checker: Check your design for WCAG contrast compliance. Select layers, pick colors or use hex values.
About
Riverty Design System wants to support both designers and developers in ensuring accessibility of their work. To that end, accessibility checklists have been created that can be enabled in Jira. Read about how to add those checklists to your Jira tickets below.
Apply checklist to Jira ticket
When you have an existing ticket open in Jira, you have a list of Accordion items on the right of your screen. Amongst other items, the list provides you with an item called ‘Checklist - Open checklist’.
By opening this Accordion item, you will be presented with the option to add checklist items yourself. However, there’s also an opportunity to load templates. Click on the ‘three dots icon’ on the right side of the Accordion item.
It will show you a dropdown list with the option ‘Load Templates’.
Clicking this option will show you a dialog in which you will see the ‘Design checklist accessibility’ or ‘Dev checklist accessibility’option. Select this option and click on the button to load the template to your Jira ticket.
Select this option and click on the button to load the template to your Jira ticket.
You now have added the design (or dev) checklist to your Jira ticket. You can check and uncheck the items while working on your task!
Enable checklist plugin
Create a request in the Central Atlassian Support service desk, select “Change Project Configuration”.
Request text you can reuse:
Please enable the ‘Checklists for Jira (Free)’ plugin for the {MY JIRA PROJECT KEY} project. (Same plugin as currently used in DSYS project.)
