Storyblok User Interface
Accessibility Report
This document is based on an audit performed on content authoring screens within the Storyblok App.
When issues related to any Success Criterion affect the usability of the product, explanations and remarks have been provided to describe the extent of the issue.
The following screens were tested in the scope of this evaluation:
- Login
- Dashboard
- Content Overview
More screens are planned to be tested in the near future.
This report covers the degree of conformance for the following the Web Content Accessibility Guidelines 2.2 (Level A & Level AA).
Terms
The terms used in the conformance level information are defined as follows:
Compliant: The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation.
Partially Compliant: Some functionality of the product does not meet the criterion.
Not Compliant: The majority of product functionality does not meet the criterion.
Not Applicable: The criterion is not relevant to the product.
| Success Criterion | Compliance Level | Conformance Level | Notes |
|---|---|---|---|
| 1.1.1 Non Text Content | A | Compliant | Storyblok logo has role=âimageâ and aria-label with alternative text. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Not Applicable | No prerecorded video or audio only content on Login screen |
| 1.2.2 Captions (Prerecorded) | A | Not Applicable | No prerecorded video on Login screen, therefore no need for captions |
| 1.2.3 Audio Description (Prerecorded) | A | Not Applicable | No prerecorded video on Login screen, therefore no need for audio description |
| 1.2.4 Captions (Live) | AA | Not Applicable | No live video on Login screen, therefore no need for captions |
| 1.2.5 Audio Description (Live) | AA | Not Applicable | No live video on Login screen, therefore no need for audio description |
| 1.3.1 Info & Relationship | A | Compliant | Markup is correct on login page, use of headlines and semantic elements conveys info & relationship |
| 1.3.2 Meaningful Sequence | A | Compliant | Sequence is mostly logical in the intended user flow |
| 1.3.3 Sensory Characteristics | A | Compliant | References and instructions provided inside the control panel do not rely on sensory information alone. |
| 1.3.4 Orientation | AA | Compliant | Both horizontal and vertical views work as well as different responsive screen sizes. |
| 1.3.5 Identify Input Purpose | AA | Compliant | Input fields are associated with a label to make identifying input purpose clear |
| 1.4.1 Use of Color | A | Compliant | On the login page, color is not the only differentiator for different status or errors. In addition to icons and use of color, there is also text to explain. |
| 1.4.2 Audio Control | A | Not Applicable | No Audio content on Login Page. |
| 1.4.3 Contrast Minimum | AA | Compliant | All text has sufficient color contrast of at least 4.5:1 against the background. |
| 1.4.4 Resize Text | AA | Compliant | Text can be resized to up to 200% without loss of functionality. |
| 1.4.5 Images of Text | AA | Compliant | The Storyblok Logo is an image of text, but as this is considered essential, itâs exempt from this success criterion. |
| 1.4.10 Reflow | AA | Compliant | Content can be enlarged without increasing line length. |
| 1.4.11 Non-text Contrast | AA | Compliant | With the new and improved colors, all ui elements meet the minimum color contrast requirement of 3:1. |
| 1.4.12 Text Spacing | AA | Compliant | Users can adjust text spacing. |
| 1.4.13 Content on Hover or Focus | AA | Not Applicable | No additional content on hover or focus on the login page. |
| 2.1.1 Keyboard | A | Compliant | The functionality on the login page is accessible by keyboard. |
| 2.1.2 No Keyboard Trap | A | Compliant | No keyboard trap on the login page. |
| 2.1.4 Character Key Shortcuts | A | Not Applicable | No shortcuts on the login page |
| 2.2.1 Timing Adjustable | A | Not Applicable | No content related time constraints. Two factor authentication is exempt from this rule. |
| 2.2.2 Pause, Stop, Hide | A | Not Applicable | No animations, blinking or scrolling on the login page. |
| 2.3.1 Three Flashes or Below Threshold | A | Not Applicable | No flashing animations on Login page |
| 2.4.1 Bypass Blocks | A | Compliant | No Skiplink on Login Page, but also no navigation or large amount of elements to bypass - therefore not applicable. Headline level one is used. |
| 2.4.2 Page Titled | A | Compliant | Page title: Signing in - Storyblok |
| 2.4.3 Focus Order | A | Compliant | Keyboard users navigate content in a correct order. |
| 2.4.4 Link Purpose in Content | A | Compliant | All Link purposes clear. |
| 2.4.5 Multiple Ways | AA | Not Applicable | Not applicable. |
| 2.4.6 Headings & Labels | AA | Compliant | Headings and labels describe their purpose. |
| 2.4.7 Visible Focus | AA | Compliant | Focus is visible on interactive elements. |
| 2.4.11 Focus not Obscured | AA | Compliant | Elements in focus are not hidden or obscured. |
| 2.5.1 Pointer Gestures | A | Not Applicable | Not Applicable. |
| 2.5.2 Pointer Cancellation | A | Compliant | |
| 2.5.3. Name in Label | A | Compliant | |
| 2.5.4 Motion Actuation | A | Not Applicable. | Content is not dependent on a user's ability to move a device. |
| 2.5.7 Dragging Movements | AA | Not Applicable | No dragging movements required on Login Page. |
| 2.5.8 Target Size | AA | Compliant | Touch Target Sizes are sufficient on login PAge. |
| 3.1.1 Language of Page | A | Compliant | Language of the page is set. |
| 3.1.2 Language of Parts | AA | Compliant | Language of parts is set. |
| 3.2.2 On Focus | A | Compliant | |
| 3.2.3 On Input | A | Compliant | |
| 3.2.4 Consistent Navigation | AA | Not Applicable | No Navigation on Login Page |
| 3.2.5 Consistent Identification | AA | Compliant | Components with the same functionality within a set of web pages are identified consistently. |
| 3.2.6 Consistent Help | AA | Not Applicable | No help mechanisms on this page. |
| 3.3.1 Error Identification | A | Partially Compliant | When providing invalid data in the email field, users are notified that the data is invalid, however, the issues is not specified more concretely. |
| 3.3.2 Labels & Instructions | A | Compliant | Labels & Instructions are provided for all tasks. |
| 3.3.3 Error Suggestion | AA | Partially Compliant | When missing to provide data, the user is notified that the field is required If invalid data is added, the user is informed that the data is invalid, but not, how to fix it. |
| 3.3.4 Error Prevention | AA | Compliant | User Data is checked, no legal consequences. |
| 3.3.7 Redundant Entry | A | Compliant | No repetitive entry of information required. |
| 3.3.8 Accessible Authentication | AA | Not Applicable | No cognitive function test for authentication |
| 4.1.2 Name, Role, Value | A | Compliant | |
| 4.1.3 Status Messages | AA | Not Compliant | The status âverification code sentâ is not announced via assistive technology |
| Success Criterion | Compliance Level | Conformance Level | Notes |
|---|---|---|---|
| 1.1.1 Non Text Content | A | Not compliant | Charts on dashboard donât have a text alternative to the visual content. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Not Applicable | No audio or video only content on Dashboard page |
| 1.2.2 Captions (Prerecorded) | A | Not Applicable | No captions on Dashboard page. |
| 1.2.3 Audio Description (Prerecorded) | A | Not Applicable | No audio description on Dashboard page. |
| 1.2.4 Captions (Live) | AA | Not Applicable | No (live) captions on Dashboard page. |
| 1.2.5 Audio Description (Live) | AA | Not Applicable | No (live) Audio description. |
| 1.3.1 Info & Relationship | A | Partially Compliant | Sidebar < li > elements should be direct children of an < ol > or < ul > element. There is no < h2 > in the order of headline hierarchies |
| 1.3.2 Meaningful Sequence | A | Partially Compliant | The tab panel has a tabindex=0, making it unnecessarily part of the tab order. The issue has been reported. |
| 1.3.3 Sensory Characteristics | A | Compliant | Instructions don't solely rely on sensory characteristics. |
| 1.3.4 Orientation | AA | Compliant | Content is not restricted to a single display orientation. |
| 1.3.5 Identify Input Purpose | AA | Not Applicable | No input elements on dashboard page. |
| 1.4.1 Use of Color | A | Compliant | Color is not used as the only indicator conveying information. |
| 1.4.2 Audio Control | A | Not Applicable | No audio elements on the page. |
| 1.4.3 Contrast Minimum | AA | Partially Compliant | Color Contrast on âContent Activity trendâ not met. The issue has been reported. |
| 1.4.4 Resize Text | AA | Compliant | Text is resizable to up to 200%. |
| 1.4.5 Images of Text | AA | Not Applicable | No text of images is used. |
| 1.4.10 Reflow | AA | Compliant | Content can be enlarged without increasing line length. |
| 1.4.11 Non-text Contrast | AA | Compliant | With the new and improved colors, all ui elements meet the minimum color contrast requirement of 3:1. |
| 1.4.12 Text Spacing | AA | Compliant | Users can adjust text spacing. |
| 1.4.13 Content on Hover or Focus | AA | Partially Compliant | Currently, you canât close the hover effect once triggered by anything other than by moving away the mouse. |
| 2.1.1 Keyboard | A | Partially Compliant | Itâs not possible to reach the bottom part of the side bar navigation, as it has been taken out of the tab order. This issue has been reported. |
| 2.1.2 No Keyboard Trap | A | Compliant | No keyboard trap on Dashboard page. |
| 2.1.4 Character Key Shortcuts | A | Not Applicable | No keyboard shortcuts implemented on the Dashboard page. |
| 2.2.1 Timing Adjustable | A | Not Applicable | There is no time limit on this page. |
| 2.2.2 Pause, Stop, Hide | A | Not Applicable | No moving, blinking, scrolling, or auto-updating information on this page. |
| 2.3.1 Three Flashes or Below Threshold | A | Not Applicable | No flashes on the dashboard page. |
| 2.4.1 Bypass Blocks | A | Not Compliant | No Skip link for the sidebar provided yet, implementation is planned. |
| 2.4.2 Page Titled | A | Compliant | Dashboard page has a page title. |
| 2.4.3 Focus Order | A | Not Compliant | Itâs not possible to reach the bottom part of the side bar navigation, it seems to be taken out of the tab order. This issue has been reported. |
| 2.4.4 Link Purpose in Content | A | Not Compliant | Sidebar links donât have discernible text. The issue has been reported. |
| 2.4.5 Multiple Ways | AA | Not Applicable | |
| 2.4.6 Headings & Labels | AA | Partially Compliant | H2 is skipped in the headline hierarchy |
| 2.4.7 Visible Focus | AA | Partially Compliant | For multiple elements on the Dashboard page, focus style is not visible (elements in the activities panel) or has insufficient color contrast (card elements). |
| 2.4.11 Focus not Obscured | AA | Not Applicable | |
| 2.5.1 Pointer Gestures | A | Not Applicable | |
| 2.5.2 Pointer Cancellation | A | Compliant | |
| 2.5.3 Name in Label | A | Compliant | |
| 2.5.4 Motion Actuation | A | Compliant | |
| 2.5.7 Dragging Movements | AA | Not Applicable | |
| 2.5.8 Target Size | AA | Partially Compliant | The pagination elements do not have sufficient sizing of touch targets. The issue has been reported. |
| 3.1.1 Language of Page | A | Compliant | Language is set. |
| 3.1.2 Language of Parts | AA | Compliant | |
| 3.2.2 On Focus | A | Compliant | |
| 3.2.3 On Input | A | Compliant | |
| 3.2.4 Consistent Navigation | AA | Compliant | |
| 3.2.5 Consistent Identification | AA | Compliant | |
| 3.2.6 Consistent Help | AA | Compliant | |
| 3.3.1 Error Identification | A | Not Applicable | No user input on the Dashboard page. |
| 3.3.2 Labels & Instructions | A | Not Applicable | No user input on the Dashboard page. |
| 3.3.3 Error Suggestion | AA | Not Applicable | No user input on the Dashboard page. |
| 3.3.4 Error Prevention | AA | Not Applicable | No user input on the Dashboard page. |
| 3.3.7 Redundant Entry | A | Not Applicable | No user input on the Dashboard page. |
| 3.3.8 Accessible Authentication | AA | Not Applicable | |
| 4.1.2 Name, Role, Value | A | Compliant | |
| 4.1.3 Status Messages | AA | Not Applicable |
| Success Criterion | Compliance Level | Conformance Level | Notes |
|---|---|---|---|
| 1.1.1 Non Text Content | A | Not Compliant | Status (Draft, Published, etc.) icons are marked as ârepresentationalâ and currently, there is no alternative text for them. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Not Applicable | |
| 1.2.2 Captions (Prerecorded) | A | Not Applicable | |
| 1.2.3 Audio Description (Prerecorded) | A | Not Applicable | |
| 1.2.4 Captions (Live) | AA | Not Applicable | |
| 1.2.5 Audio Description (Live) | AA | Not Applicable | |
| 1.3.1 Info & Relationship | A | Compliant | |
| 1.3.2 Meaningful Sequence | A | Partially Compliant | Currently, the Avatar is reachable with the keyboard despite the fact that it is not interactive, while the favorite toggle is not part of the tab order. |
| 1.3.3 Sensory Characteristics | A | Compliant | |
| 1.3.4 Orientation | AA | Compliant | |
| 1.3.5 Identify Input Purpose | AA | Partially Compliant | Pagination + dropdown for number of items displayed per page donât have clear instructions. |
| 1.4.1 Use of Color | A | Compliant | |
| 1.4.2 Audio Control | A | Not Applicable | |
| 1.4.3 Contrast Minimum | AA | Partially Compliant | Use of Color on the Tags below required minimum color contrast |
| 1.4.4 Resize Text | AA | Compliant | |
| 1.4.5 Images of Text | AA | Compliant | |
| 1.4.10 Reflow | AA | Compliant | |
| 1.4.11 Non-text Contrast | AA | Partially Compliant | What about the status indicator for âdraftâ? This does not meet the color contrast minimum. |
| 1.4.12 Text Spacing | AA | Compliant | |
| 1.4.13 Content on Hover or Focus | AA | Partially Compliant | |
| 2.1.1 Keyboard | A | Partially Compliant | Itâs not possible to get into the filter mini browser or into the sorting function. Canât toggle the favorites functionality Pagination Select not accessible with the keyboard âCurrentâ in releases tab is skipped |
| 2.1.2 No Keyboard Trap | A | Compliant | |
| 2.1.4 Character Key Shortcuts | A | Not Applicable | |
| 2.2.1 Timing Adjustable | A | Not Applicable | |
| 2.2.2 Pause, Stop, Hide | A | Not Applicable | |
| 2.3.1 Three Flashes or Below Threshold | A | Not Applicable | |
| 2.4.1 Bypass Blocks | A | Not Compliant | Within the app we currently donât have a way to skip the navigation sidebar. |
| 2.4.2 Page Titled | A | Compliant | |
| 2.4.3 Focus Order | A | Compliant | |
| 2.4.4 Link Purpose in Content | A | Partially Compliant | Return to Spaces Overview Link does not have link purpose in content. |
| 2.4.5 Multiple Ways | AA | Not Compliant | |
| 2.4.6 Headings & Labels | AA | Partially Compliant | The pagination drop downs at the bottom donât necessarily describe the purpose of the topic. |
| 2.4.7 Visible Focus | AA | Partially Compliant | âReleasesâ dropdown doesnât have visible focus, the Avatar & favorites icon only shows the tool tip. |
| 2.4.11 Focus not Obscured | AA | Compliant | |
| 2.5.1 Pointer Gestures | A | Not Applicable | |
| 2.5.2 Pointer Cancellation | A | Compliant | |
| 2.5.3 Name in Label | A | Compliant | |
| 2.5.4 Motion Actuation | A | Compliant | |
| 2.5.7 Dragging Movements | AA | Compliant | |
| 2.5.8 Target Size | AA | Compliant | |
| 3.1.1 Language of Page | A | Compliant | |
| 3.1.2 Language of Parts | AA | Compliant | |
| 3.2.2 On Focus | A | Compliant | |
| 3.2.3 On Input | A | Compliant | |
| 3.2.4 Consistent Navigation | AA | Compliant | |
| 3.2.5 Consistent Identification | AA | Compliant | |
| 3.2.6 Consistent Help | AA | Compliant | |
| 3.3.1 Error Identification | A | Compliant | |
| 3.3.2 Labels & Instructions | A | Compliant | |
| 3.3.3 Error Suggestion | AA | Compliant | |
| 3.3.4 Error Prevention | AA | Not Applicable | |
| 3.3.7 Redundant Entry | A | Not Applicable | |
| 3.3.8 Accessible Authentication | AA | Not Applicable | |
| 4.1.2 Name, Role, Value | A | Partially Compliant | Plus button doesnât have discernible text |
| 4.1.3 Status Messages | AA | Not Compliant | Status Message, e.g. when content is deleted or newly created can not be programmatically determined. |