Craft CMS Accessibility Conformance Report

WCAG Edition

Based on VPAT® Version 2.4

Name of Product/Version

Craft CMS v4.0.0

Report Date

May 4, 2022

Product Description

Craft is a flexible, user-friendly CMS for creating custom digital experiences on the web.

Contact Information

Notes

This document is based on an audit performed on content authoring screens only. This document will be revised at a later date to reflect administrative screens.

When issues related to a Success Criterion affect usability of the product, explanations and remarks have been provided to describe the extent of issue and any known workarounds.

If a GitHub issue exists, it will be linked immediately after the description of the accessibility issue. If there is no public issue, the explanation will be followed by a task number tracked in Pixel & Tonic’s issue tracking system.

The following screens were tested in the scope of this evaluation:

  • Login
  • Dashboard
  • My Account
  • Index pages (entries, categories, assets)
  • Detail pages (entry, category, asset)

No plugins were installed or tested as part of the audit. All widgets included with the basic install of Craft CMS were added to the Dashboard screen. 

For entries, all field types included with a basic Craft CMS install were tested. Field layouts were modified to use both a single screen and multiple tabs. Descriptive labels and instructions were added to all custom fields. Some fields were marked as required, and field minimums and maximums were toggled on and off to test error instructions.

Two sites were created with different languages, and some fields were set as translatable. To test an additional variation of the details sidebar, one section type was set to the propagation method: Let each entry choose which sites it should be saved to.”

The following user actions were tested, where content may refer to entries, categories, and assets:

  • Creating and editing content
  • Searching and filtering content
  • Performing actions on content from element index pages
  • Reordering content
  • Viewing and editing content metadata (i.e. slug, expiry date, post date, and change notes)
  • Enabling and disabling content
  • Updating the user preferences

To test SC 3.1.2 (Language of Parts), fields were created with English names, instructions, and content. User preferences were then updated to display the CMS in a non-English language.

Evaluation Methods Used

Automated testing and guided manual testing of static screens and components was performed using the axe DevTools Pro browser extension.

After automated and guided manual testing, we followed axe’s Advanced Testing Coverage guides to ensure consistent and comprehensive manual testing of all screens and components.

Screen reader testing was performed primarily using VoiceOver/Safari; testing was performed by a sighted user with intermediate VO experience. Voice Control on macOS was used to verify issues with Label In Name.

Text resizing was performed using both page zoom and text-only zoom in Firefox. Reflow was tested with Firefox Responsive Design Mode; a custom viewport size was created at 320 x 480 pixels.

The HeadingsMap and Accessibility Insights for Web browser extensions were used to examine page structure. A text-spacing bookmarklet was used to test SC 1.4.12.

Applicable Standards/Guidelines

This report covers the degree of conformance for the following accessibility standard/guidelines:

Standard/Guideline Included In Report
Web Content Accessibility Guidelines 2.1

Level A (Yes)

Level AA (Yes)

Level AAA (No)

Terms

The terms used in the Conformance Level information are defined as follows:

Supports
The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation.
Partially Supports
Some functionality of the product does not meet the criterion.
Does Not Support
The majority of product functionality does not meet the criterion.
Not Applicable
The criterion is not relevant to the product.
Not Evaluated
The product has not been evaluated against the criterion. This can be used only in WCAG 2.0 Level AAA.

WCAG 2.x Report

Success Criterion Number Criteria Conformance Level Remarks & Explanations
1.1.1 Non-text Content
Level A

Partially Supports

Show remarks for Authoring Tool 1.1.1 Non-text Content

The control panel allows developers to add a native Alternative Text field to image field layouts. This enables images to use the author-provided alt text within the control panel itself. Images that do not use this Alternative Text field will lack alt text in the control panel (DEV-540). In some instances where the Alternative Text field is not used, images are marked as decorative or given a default value, such as the title (DEV-588).

Status icons (i.e. active, expired) are not conveyed to users of assistive technology (DEV-439). One workaround to find the status information is to view the Edit page. The meta description list includes a textual status indicator.

The Craft Support widgets on the Dashboard page incorrectly use the alt text Craft Support” for the Craft Partners” resource (DEV-286).

Some decorative CSS content is not hidden from screen reader users; in most cases this does not affect operability.

For video content, there is currently no way to relate text alternatives with video content for use within the control panel (see 1.2.2).

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

Does Not Support

Show remarks for Authoring Tool 1.2.1 Audio-only and Video-only (Prerecorded)

Both audio and video can be uploaded to the control panel, but only video assets can be previewed.

Craft CMS does not provide native tools to manage transcripts or captions. As a result, videos previewed inside the control panel do not have text alternatives (DEV-412).

1.2.2 Captions (Prerecorded)
Level A

Does Not Support

Show remarks for Authoring Tool 1.2.2 Captions (Prerecorded)

Craft CMS does not provide the ability to attach caption tracks to uploaded videos (see remark for 1.2.1). The only way for videos to meet this requirement in the control panel is to hard-code open captions into all uploaded video files.

1.2.3 Audio Description or Media Alternative (Prerecorded)
Level A

Does Not Support

Show remarks for Authoring Tool 1.2.3 Audio Description or Media Alternative (Prerecorded)

The CMS does not have native fields for linking audio description or transcript files to videos inside the control panel.

Authors can support this criterion within the scope of the authoring tool by ensuring that uploaded videos include integrated audio description (see note for 1.2.5).

1.2.4 Captions (Live)
Level AA

Supports

Show remarks for Authoring Tool 1.2.4 Captions (Live)

There is no live audio or video content in the control panel.

1.2.5 Audio Description (Prerecorded)
Level AA

Does Not Support

Show remarks for Authoring Tool 1.2.5 Audio Description (Prerecorded)

Craft CMS does not provide the option to attach audio description to uploaded videos. The only way to meet this requirement inside the control panel is for authors to ensure that uploaded videos use a method of audio description such as integrated description.

1.3.1 Info and Relationships
Level A

Partially Supports

Show remarks for Authoring Tool 1.3.1 Info and Relationships

A great deal of the control panel implements techniques for conveying information and relationships in accessible ways. 

In most cases, labels and descriptive text are conveyed to users both programmatically and visually. Semantic headings and landmarks are used to assist in navigation. However, there are some known issues.

Errors on the login page are not conveyed to screen reader users via markup on the username and password fields (DEV-318). However, they are present immediately following the Sign In” button. If having issues logging in, screen reader users should focus the Sign In” button and start reading content from there. 

In the Account Preferences tab, Accessibility and Development settings are not grouped together using fieldset elements (DEV-333). Users should know that the first three checkboxes on the page are related to accessibility, and the rest are development-related.

Some fields don’t programmatically convey related information (such as instruction, error, and modification status text) to screen reader users. These are:

  • Categories fields (DEV-524)
  • Tags fields (DEV-518)
  • Multi-select fields (DEV-527)
  • Money fields (DEV-516)
  • The URL type selector in URL fields (DEV-525)
  • Language and Formatting Locale fields in the Account Preferences section (DEV-332)
  • Buttons to add Matrix blocks (DEV-526)

As a workaround, users can find instructions immediately following the field name. Status text is found immediately before the field label. Error messages can be located directly after the field input.

On element index pages, the first table header is missing accessible text (DEV-339); users should be aware that the first column should be titled Select.” The header cell containing the element title does not have its scope set to row (DEV-490). Also, there may be headings in the sources sidebar to indicate a grouping of sources, but that information is not conveyed to users of assistive technology (DEV-365).

Draft and status indicators do not have an accessible alternative on element index pages (DEV-488).

When using custom element filtering, some condition rule inputs don’t have accessible names. This includes the Section and Entry UID selectors following the Entry Type condition type (DEV-421), and the element type select following the Related To condition type (DEV-422). Buttons to remove filtering rules from the condition builder rely on the CSS content property (DEV-427).

In the Structure view of the Categories page, parent-child relationships are not conveyed to screen reader users (DEV-445). As a workaround, users can go to the category edit page to learn if there is a parent set on a specific category (DEV-445).

When selecting elements from the Element Selector modal, the Select” button may be visually dimmed to indicate its inactive state. However, it is not marked as disabled (DEV-482).

In addition, t9n indicators for translatable fields are not programmatically linked to the input elements (DEV-560).

Some elements may be visually perceived as lists, but they have not been built using semantic list elements. These include Matrix blocks (DEV-539), Tags, Users, Entries, and Assets fields (DEV-521).

In the Quick Post widget settings, checkboxes are not grouped inside of a fieldset element, and individual checkboxes do not reference the field instructions (DEV-288). As a workaround, users should know that checking a checkbox will make that field available in the Quick Post widget.

When a Quick Post submission returns errors, those error messages are not programmatically linked to the fields (DEV-300).

Timezone selectors inside of Date fields do not have an accessible name (DEV-302).

1.3.2 Meaningful Sequence
Level A

Supports

Show remarks for Authoring Tool 1.3.2 Meaningful Sequence

The control panel presents content in a meaningful sequence.

1.3.3 Sensory Characteristics
Level A

Supports

Show remarks for Authoring Tool 1.3.3 Sensory Characteristics

References and instructions provided by default inside the control panel do not rely on sensory information alone.

1.3.4 Orientation
Level AA 2.1 only

Partially Supports

Show remarks for Authoring Tool 1.3.4 Orientation

The CMS does not restrict its view and operation to a single display orientation.

However, there is a bug on the login screen where the site name is not visible when the device is rotated to landscape (DEV-548).

1.3.5 Identify Input Purpose
Level AA 2.1 only

Partially Supports

Show remarks for Authoring Tool 1.3.5 Identify Input Purpose

The Login and Forgot Password pages use autocomplete attributes to assist users in entering form data.

On the Account page, fields to edit username, full name, and email do not use the autocomplete attribute (DEV-323). The login modal doesn’t have an autocomplete attribute set on the password field (DEV-593).

1.4.1 Use of Color
Level A

Partially Supports

Show remarks for Authoring Tool 1.4.1 Use of Color

Generally meets, with some exceptions.

By default, color is used to differentiate status icons (i.e. live, pending, expired) on the Entries page. Users can update their preferences so that status icons are differentiated by shape. There is no text next to the status shapes to clarify their meaning (DEV-470), but the status filter dropdown on the Entries page can be used as a legend.

In Recent Entries and Feed widgets on the Dashboard, only color is used to differentiate links from adjacent content (DEV-297). On element index pages, links are only conveyed by color (DEV-418). One workaround is for users to update their preferences to add underlines to links, but icon-only links (i.e. the globe icon on element index pages) do not receive an underline.

1.4.2 Audio Control
Level A

Partially Supports

Show remarks for Authoring Tool 1.4.2 Audio Control

In general, the control panel does not feature autoplaying audio.

The only time audio plays automatically is when a user chooses to preview a video asset with sound. Due to a focus trap bug, keyboard users cannot pause, stop, or mute the video (DEV-413).

1.4.3 Contrast (Minimum)
Level AA

Partially Supports

Show remarks for Authoring Tool 1.4.3 Contrast (Minimum)

A majority of the control panel meets this criterion, with the exception of some known issues.

In the Sources sidebar on element index pages, headings do not meet minimum contrast guidelines for small text (DEV-368). When viewing the asset index, graphics that indicate an asset’s file type have text that does not have a contrast ratio of at least 4.5:1 (DEV-419).

On element index pages, active menu buttons in the search bar drop below an acceptable contrast ratio for text (DEV-438). This issue applies to buttons that toggle filter, sort, status update, and action menus.

The Formatting Locale selector in the Account Preferences tab has default text that doesn’t meet the 4.5:1 contrast ratio (DEV-325).

There is a contrast issue on hover/​focus for comboboxes with listbox popups. These include the Formatting Locale selector in the Account Preferences tab and the time zone selector in Date fields. When a user hovers or uses a keyboard to navigate items in the dropdown, the contrast of the descriptive text on the gray background makes it difficult to read (DEV-335).

When editing image assets, users can hover over or tab into the sidebar preview container to display Preview and Edit buttons. Because these buttons have transparent backgrounds, their inner text may not have an acceptable contrast ratio when they overlap the image thumbnail (DEV-395).

There is a bug on the Image Editor where the contrast of text inside the custom constraint field is white-on-white (DEV-511).

Placeholder text inside fields does not meet minimum contrast ratio, but this is only relevant when the placeholder text is relied on for essential information. As a best practice, developers are encouraged to limit use of placeholder content and opt for instructions instead (DEV-530).

While not explicitly violating this criterion, there is a known UX issue with the low text contrast of selected items inside Element Selector modals (GitHub issue #10621).

1.4.4 Resize text
Level AA

Partially Supports

Show remarks for Authoring Tool 1.4.4 Resize text

In general, the control panel allows for resizing text to 200% when using page zoom.

Some aspects of the user interface, such as the global sidebar navigation links, become obscured or overlap when zooming text to 200% (DEV-298, DEV-299, DEV-535).

When setting text-only zoom to 200%, the element index filtering interface may become unusable for certain condition types (DEV-377). To work around this, users should switch to page zoom when creating custom filters.

In the Image Editor, doubling the text size causes the rotation slider markers to be clipped (DEV-503).

1.4.5 Images of Text
Level AA

Supports

Show remarks for Authoring Tool 1.4.5 Images of Text

The control panel only includes images of text when it is part of a logotype.

1.4.10 Reflow
Level AA 2.1 only

Partially Supports

Show remarks for Authoring Tool 1.4.10 Reflow

When the screen size width is set to 320px (the equivalent of 400% zoom at 1280px wide), the following issues present themselves:

On the Account page, Language and Formatting Locale fields are set to hide overflowing content. This causes options to be clipped at various screen sizes (DEV-336). Both fields cause horizontal page scrolling (DEV-337).

Some condition types inside the element index filtering HUD do not reflow, causing horizontal scrolling (DEV-378).

The Copy to Clipboard modal becomes unusable at 320px, as the button is pushed off-screen (DEV-400).

On edit screens, the action buttons don’t reflow, causing horizontal scrolling (DEV-479). Because the primary action button may be mostly off-screen, it could be missed entirely.

The slug field in element slideouts can no longer be seen or edited (DEV-480).

Element selector modals become unusable, as the action buttons in the footer become clipped (DEV-484). In addition, the search bar causes a horizontal scroll (DEV-485). When these modals have sidebars, the interface becomes almost unusable as the sidebar takes up most of the modal width (DEV-547).

In the Image Editor, the constraint options cause a horizontal scroll instead of stacking (DEV-512).

1.4.11 Non-text Contrast
Level AA 2.1 only

Partially Supports

Show remarks for Authoring Tool 1.4.11 Non-text Contrast

On element index pages, the active source is indicated by a lighter background and subtle outline. However, neither the background nor the outline have a 3:1 contrast ratio with the page background, making it difficult to determine which source is selected (DEV-372).

Toggle fields do not meet minimum contrast guidelines when focused (DEV-580); the handle color drops in contrast, making it difficult to discern its state.

When hovering over a Matrix field action button (with the gear icon), the contrast of the icon drops below 3:1 against its background (DEV-590).

Radio buttons, checkboxes and text inputs do not have dark enough outlines for low vision users to distinguish when they are unchecked or unfilled (DEV-317, DEV-322, DEV-515).

The background color of selected items in multi-select fields does not have a 3:1 contrast ratio compared to unselected options (DEV-532). This also applies to selected items in element selector modals (DEV-546).

Buttons to remove selected options from comboboxes do not meet the 3:1 contrast ratio (DEV-423).

Some modals have resize handles, but their low contrast makes them difficult for low vision users to see (DEV-489).

In the status filter on element index pages, hovering or focusing an option can cause the status indicators to drop below an acceptable contrast ratio (DEV-436). This depends on the color of the indicator.

When editing an entry or category, the check mark indicating whether changes have been successfully stored has a low contrast against its background (DEV-462).

1.4.12 Text Spacing
Level AA 2.1 only

Supports

Show remarks for Authoring Tool 1.4.12 Text Spacing

There is no loss of content or functionality when line height, paragraph spacing, letter spacing, and word spacing are adjusted.

1.4.13 Content on Hover or Focus
Level AA 2.1 only

Supports

Show remarks for Authoring Tool 1.4.13 Content on Hover or Focus

The display of additional content is not triggered by hover or focus.

2.1.1 Keyboard
Level A

Does Not Support

Show remarks for Authoring Tool 2.1.1 Keyboard

Many control panel functions are keyboard operable. However, there are enough important exceptions to keyboard operability to classify it as not supporting this criterion.

Dashboard widget settings can’t be altered as the gear icon that appears on hover is not keyboard-focusable (DEV-274). Users can’t remove widgets from the dashboard as the remove button in the dashboard settings menu is not keyboard-focusable (DEV-295).

On the Category index page, the controls for expanding and collapsing parent categories are not keyboard accessible (DEV-444).

Image editing functions (rotate, crop, focal point) are not accessible to keyboard users (GitHub issue #7386, DEV-313, DEV-388, DEV-499, DEV-500, DEV-501, DEV-505, DEV-509).

The date picker widget for date fields is not keyboard accessible, but authors are able to enter dates via the accompanying text field (DEV-529).

Drag and drop for reordering items and nesting items (table rows, Dashboard widget order, Matrix blocks, categories) is not keyboard accessible (DEV-278). One workaround for Matrix blocks is to use the disclosure menu in the block header to move items up and down one step at a time. Authors are also unable to move asset files into different volumes and subfolders (DEV-371).

Pagination is not keyboard accessible (DEV-379). To work around this, authors can use the Craft search to ensure the element they need is in the first 100 search results, as that’s the default batch size for element indexes.

Handles for resizing modal windows are not keyboard accessible (DEV-483).

When editing elements, mouse users can double click items within relational fields — such as Assets, Entries, and Categories fields — to open a slideout and edit the element directly. Keyboard users can’t toggle these slideouts, so must edit elements directly from their dedicated Edit pages (DEV-463).

A bug with the focus trap for video preview modal has rendered the video player controls inoperable by keyboard users (DEV-413).

2.1.2 No Keyboard Trap
Level A

Partially Supports

Show remarks for Authoring Tool 2.1.2 No Keyboard Trap

Generally supports, with one known bug. When a user edits an element via a slideout, their keyboard focus will become trapped in the details sidebar (DEV-389). This only occurs on desktop screen sizes.

One workaround is to shrink the window so the sidebar details are only visible when toggled open.

2.1.4 Character Key Shortcuts
Level A 2.1 only

Supports

Show remarks for Authoring Tool 2.1.4 Character Key Shortcuts

The Craft CMS control panel does not use any single-character shortcuts.

2.2.1 Timing Adjustable
Level A

Partially Supports

Show remarks for Authoring Tool 2.2.1 Timing Adjustable

Adjustable timing is successfully implemented for user session durations. When a user’s session is close to expiring, a modal appears that allows them to extend their session.

However, users are not given the option to adjust the timing of notification message toasts that appear at the top of the screen (GitHub issue #7142, DEV-324). The success or failure of actions may be difficult to discern after the toast has disappeared.

2.2.2 Pause, Stop, Hide
Level A

Supports

Show remarks for Authoring Tool 2.2.2 Pause, Stop, Hide

Generally meets. Videos and GIFs are not auto-played in the control panel except in response to user interaction.

When a user opens a preview modal, supported videos and GIFs will auto-play. However, as these assets are contained in a modal, we’re not considering this to be in parallel” with other content.

2.3.1 Three Flashes or Below Threshold
Level A

Supports

Show remarks for Authoring Tool 2.3.1 Three Flashes or Below Threshold

There are no flashing elements in the Craft CMS control panel.

2.4.1 Bypass Blocks
Level A

Supports

Show remarks for Authoring Tool 2.4.1 Bypass Blocks

A skip link is provided to bypass the global navigation menu. 

In addition, a skip link has been added to the Preview modal so users can bypass the Edit panel and jump directly to the viewport toggle buttons and the preview itself.

2.4.2 Page Titled
Level A

Supports

Show remarks for Authoring Tool 2.4.2 Page Titled

Pages have titles that describe their purpose.

2.4.3 Focus Order
Level A

Partially Supports

Show remarks for Authoring Tool 2.4.3 Focus Order

Generally meets, with some exceptions.

When a user extends their session from the logout warning modal, focus is not moved back to the previously focused element (DEV-584).

Some HUD menus (such as the Export menu on Categories, Entries, etc. and the Widget Settings menu on the Dashboard) have an illogical focus order. Because the HUD menu containers are moved to the end of the DOM, one workaround is to tab past the footer element when the menu is open to access the focusable elements inside (GitHub issue #7416).

Dashboard widget elements have a non-intuitive focus order, in that they follow the order set by the masonry layout grid (GitHub issue #7301, DEV-291).

In Matrix fields, focus isn’t moved to the newly-added block when clicking the Add” button for a particular block type (DEV-541).

In Table fields, when a user removes a table row, focus is not explicitly moved into a logical element in the previous row (DEV-542).

When a user activates an asset preview from the action menu on the Assets page, focus is not moved into the modal (DEV-387).

On element index pages, the element containing the search bar and actions precedes the source navigation sidebar in the DOM (DEV-441). This is unexpected, as the sidebar can be perceived as coming first in the operational order. In addition, when users select elements on index pages, the newly revealed Action and Set Status buttons come before the table in the DOM. To work around this, users should navigate backward past the source navigation to perform bulk editing actions on selected elements (DEV-376).

On draft edit pages, when a user edits draft settings and then closes the HUD, focus is not returned to the trigger button (DEV-469).

After using the Image Editor, focus is not returned to the triggering button (DEV-495).

On the Assets page, when a user activates the checkbox to Search in subfolders,” then deactivates it and performs another search, the invisible checkbox stays in the focus order (DEV-375). In Firefox, there’s a bug on the on the same page where activating chevron buttons to expand/​collapse subfolders moves focus back to the parent folder element (DEV-370).

2.4.4 Link Purpose (In Context)
Level A

Partially Supports

Show remarks for Authoring Tool 2.4.4 Link Purpose (In Context)

Generally meets, with two known exceptions.

When a notification badge is present in the global navigation menu, the nav item does not include enough context for understanding the link. For example, a nav item with 3 notifications will read as Utilities 3” instead of Utilities, 3 notifications” (DEV-287).

On element index pages, links to visit front-end URLs all have identical link text with no extra contextual information (DEV-544).

2.4.5 Multiple Ways
Level AA

Does Not Support

Show remarks for Authoring Tool 2.4.5 Multiple Ways

No global search function or sitemap is provided in the control panel, so users must use the global navigation menu and element index pages to reach most content (DEV-492).

Authors can use Dashboard widgets to give themselves additional ways of reaching content.

2.4.6 Headings and Labels
Level AA

Partially Supports

Show remarks for Authoring Tool 2.4.6 Headings and Labels

Headings and labels provided by the CMS generally meet this criterion. Also, developers are able to provide useful and informative headings and labels inside field layouts and custom fields.

For elements that can be nested, such as categories and structured entries, the Choose” button doesn’t provide enough context to screen reader users that it controls the parent element selection (DEV-461).

2.4.7 Focus Visible
Level AA

Partially Supports

Show remarks for Authoring Tool 2.4.7 Focus Visible

Custom styles are used to ensure that focus outlines have a 3:1 contrast ratio against their backgrounds. 

The control panel uses a :focus-visible library to minimize focus outlines for mouse users, but users can update their preferences to show focus rings for all mouse click interactions.

There are three known instances where focus visibility falls short.

  1. When editing image assets, users can hover over or tab into the sidebar preview container to display Preview and Edit buttons. Their focus outlines are not contrasted enough against the frame of the thumbnail. Depending on the colors present in the image itself, they may also fall short when overlapping the image (DEV-498).
  2. Focus outlines are not highly visible inside the Image Editor either, as they have not been optimized for the dark modal background (DEV-502).
  3. On desktop screens, the skip link focus outline is not highly contrasted against the background of the global navigation (DEV-552).
2.5.1 Pointer Gestures
Level A 2.1 only

Supports

Show remarks for Authoring Tool 2.5.1 Pointer Gestures

No functionality depends on pointer gestures.

2.5.2 Pointer Cancellation
Level A 2.1 only

Supports

Show remarks for Authoring Tool 2.5.2 Pointer Cancellation

The completion of most functions is tied to the up-event. In cases where the down-event triggers an action, it can be undone.

2.5.3 Label in Name
Level A 2.1 only

Partially Supports

Show remarks for Authoring Tool 2.5.3 Label in Name

The control panel generally supports this requirement. However, there are some known exceptions:

  • The Upload files” button on asset index pages (DEV-344)
  • The View” and Preview” buttons on edit pages (DEV-454)
  • The Replace file” button on asset edit pages (DEV-497)
  • New (element)” buttons on element index pages and in element selector modals (DEV-486)
  • Context menus for switching sites or to other revisions (DEV-562)
  • Sort and filter menus (DEV-562)
  • The Craft CMS link in the footer of the login page (DEV-316)
2.5.4 Motion Actuation
Level A 2.1 only

Supports

Show remarks for Authoring Tool 2.5.4 Motion Actuation

No control panel functionality depends on user or device motion.

3.1.1 Language of Page
Level A

Supports

Show remarks for Authoring Tool 3.1.1 Language of Page

The Craft CMS control panel has been translated into various languages. The page language can always be programmatically determined.

3.1.2 Language of Parts
Level AA

Does Not Support

Show remarks for Authoring Tool 3.1.2 Language of Parts

While the control panel implements markup for page language, there are some known issues surrounding Language of Parts.

Administrators and developers are responsible for providing translations of field names, instructions, and other control panel messages to support authors’ preferred languages. This can be accomplished by following implementation instructions for Static Message Translations. When translations haven’t been provided, these elements will fail this criterion as they inherit the page language (DEV-553).

When users update the control panel to use their preferred language, a lang attribute is not set on form fields to indicate the chosen language for that site (DEV-558).

When selecting a preferred language on the Account page, users are presented with a choice of languages written in (a) the current site language, and (b) the language itself. In the latter instance, the language of the text is not identified in the element markup (DEV-338).

When a user successfully updates their preferred language, a status notification appears on the Dashboard in the initial language. However, the language of the notification is not identified via the lang attribute (DEV-555).

On the Dashboard, if Feed widgets are added that use a language other than the page language, the content is not marked up in a way that identifies it as being in another language (DEV-554).

3.2.1 On Focus
Level A

Supports

Show remarks for Authoring Tool 3.2.1 On Focus

No focus events trigger a change of context.

3.2.2 On Input
Level A

Partially Supports

Show remarks for Authoring Tool 3.2.2 On Input

Some listbox-type components result in a change of context when a new selection is made. These include primary action menus on element pages, selected item action menus on element index pages, context menus, and the Quick Post save options menu (DEV-160).

3.2.3 Consistent Navigation
Level AA

Supports

Show remarks for Authoring Tool 3.2.3 Consistent Navigation

Craft CMS’s layout provides a consistent method of navigation throughout the control panel.

A skip link is consistently located at the beginning of each page for keyboard users.

3.2.4 Consistent Identification
Level AA

Partially Supports

Show remarks for Authoring Tool 3.2.4 Consistent Identification

Generally supports, with two exceptions.

In the context of images, calls-to-action with the word Edit” can refer to either editing the asset fields, or opening the Image Editor (DEV-556). Here is a reference to the various usages:

  • On the Account page, Edit photo” will pull up the Image Editor. 
  • On the Assets page, Edit asset” opens the field editor while Edit Image” opens the Image Editor.
  • On the asset edit page, the Edit” button opens the Image Editor

In addition, links to view templates and files are referred to as Visit webpage” on element index pages, and as View” on edit pages (DEV-557).

3.3.1 Error Identification
Level A

Supports

Show remarks for Authoring Tool 3.3.1 Error Identification

Craft CMS provides error identification and descriptive error messages when user input does not meet field requirements.

3.3.2 Labels or Instructions
Level A

Partially Supports

Show remarks for Authoring Tool 3.3.2 Labels or Instructions

The software generally meets this criterion, and makes it possible for developers to provide visible labels and instructions for all custom fields.

However, the CMS does not have visible labels or instructions inside the element index filtering HUD on entry, category, and asset pages (DEV-426). The login page also fails to provide persistent, visible labels for username/​email and password and instead relies on placeholder text (DEV-315).

Date fields do not specify the required formatting for date strings (DEV-254). As a workaround, authors should be aware that they can enter dates in their preferred locale’s date format (e.g. MM/​DD/​YYYY for US-based locales).

On element index pages and inside element selector modals, instructions are not provided for keyboard users about how to select elements (DEV-268). Unexpectedly, only one element at a time is in the focus order. As a workaround, keyboard users can use the up and down arrow keys to traverse elements, and elements can be selected using the spacebar.

The same issue applies to Matrix blocks (DEV-538). Only a single block is in the focus order. When focus is on a block, a user can use the up and down arrows to traverse blocks and select additional blocks using the spacebar.

In the Image Editor, inputs for defining custom constraints do not have visible labels to inform users about their purpose.

3.3.3 Error Suggestion
Level AA

Supports

Show remarks for Authoring Tool 3.3.3 Error Suggestion

When input errors are automatically detected, error messages are shown near the input with suggestions on how to correct them.

3.3.4 Error Prevention (Legal, Financial, Data)
Level AA

Supports

Show remarks for Authoring Tool 3.3.4 Error Prevention (Legal, Financial, Data)

The control panel provides confirmation dialogs to prevent users from unintentionally performing sensitive actions like deleting elements.

In addition, authors can restore previous versions of content.

4.1.1 Parsing
Level A

Partially Supports

Show remarks for Authoring Tool 4.1.1 Parsing

Most of the control panel uses valid HTML. However, there are several parsing errors known to affect assistive technology errors.

Several custom select components introduce parsing caused by duplicate IDs; these include element sort and filter menus (DEV-385), action menus that appear on element index pages when items are selected (DEV-384), and context menus (DEV-576). Because IDs are duplicated across listboxes, screen reader users may not be able to parse the available options or make new selections.

4.1.2 Name, Role, Value
Level A

Does Not Support

Show remarks for Authoring Tool 4.1.2 Name, Role, Value

For many control panel components, names, roles, and states can be programmatically determined. However, there are exceptions that may make the CMS difficult for AT users to operate.

On element index pages and in selector modals, primary action menus do not have accessible text (DEV-443, DEV-543). This also holds true on category and entry edit screens (DEV-455). Context menus also lack meaningful names (DEV-465, DEV-561).

When multiple rows or thumbnails are selected on an index page or from an element selector modal, the selected state is visually apparent but it is not programmatically determinable (DEV-340).

The source navigation on element index pages contains links, but they function more as buttons (DEV-341). In addition, keyboard operation of the isn’t explained by ARIA attributes. These buttons function almost as vertical tabs, and can be operated using up and down keys.

Several disclosure-type widgets lack appropriate attributes to convey their state; this includes Export and Filter Results buttons on index pages (DEV-343), the Edit Draft Settings button (DEV-467), and the toggle to edit per-site statuses (DEV-585).

When managing Dashboard widgets, the slider to control the number of columns a widget spans does not have an accessible name (DEV-296).

Custom listboxes, such as sort and filter on the element index pages, do not conform to WAI-ARIA Authoring Practices (DEV-428, DEV-434, DEV-435). As a result, screen reader users may have difficulty operating these elements. Although not conveyed programmatically, the sort menu also allows for two values to be selected: attribute and direction.

The Money field does not have an accessible name (DEV-516).

On mobile screen sizes, the button to show the sources sidebar on element index pages does not accurately describe its purpose or state (DEV-417). Users should be aware that the button takes on the name of the currently selected source. For example, if only Blog” entries are selected, the user must use the button labeled Blog” to toggle open the sidebar. Although it doesn’t convey an expanded or collapsed state, it’s collapsed by default and the sidebar will appear next in the focus order when it’s pressed.

Some inputs in the element index filtering HUD do not have accessible names (DEV-420, DEV-550).

Lightswitches to toggle element status do not have accessible text (DEV-464, DEV-589). These buttons rely on label elements, which is not a consistently supported pattern across all browser and screen reader combinations.

When multiple sites are enabled, the toggle button to edit statuses on individual sites does not communicate its role as a disclosure button to screen reader users (DEV-585, DEV-578). It also does not have an accessible name (DEV-577). In the same page area, the component to Add a site” doesn’t have an accessible name (DEV-581).

Inputs for element post/​expiry dates and times do not specify whether they are for post or expiration (DEV-520). The accessible text is either Date” or Time.” Users should know that the first two inputs relate to Post”, and the second two inputs relate to Expiry.”

In the user login modal, the Sign In” button is not programmatically marked as disabled, even though it is dimmed for sighted users (DEV-594).

Certain modals cannot be closed with the Escape key; these include the Copy to Clipboard (DEV-399), Copy reference tag (DEV-408), and asset preview modals (DEV-414).

For Matrix fields and element select interfaces, the selected state is not programmatically determinable.

In the Image Editor, portrait and landscape radio buttons do not have accessible text (DEV-506). As a workaround, users should know that the first radio input is for Landscape,” and the second is for Portrait.” Custom constraint inputs also lack accessible text (DEV-510); the first is for ratio width, and the second is for ratio height.

Comboboxes are not built according to WAI-ARIA Authoring Practices, so suggested values are not communicated to users of assistive technology (DEV-519, DEV-331). This includes Time fields, and fields for setting Language and Formatting Locale on the Account page.

4.1.3 Status Messages
Level AA 2.1 only

Partially Supports

Show remarks for Authoring Tool 4.1.3 Status Messages

Various status messages are communicated to users of assistive technology. 

Users who modify field values will be informed as to whether changes have been successfully stored. When sorting element tables by their columns, the final sort state is announced via live regions. For Table fields, when a row cannot be added or deleted, a live region announces the success or failure of the action to screen reader users.

There are some failures of this criterion:

  • Loading states are not announced to screen reader users, despite there being visual loading spinners (DEV-406).
  • On entry and category edit screens, editing fields causes a Showing your unsaved changes” message to appear on the screen (DEV-491). This message is not made available to assistive technology users.
  • In the Image Editor, choosing a new crop ratio triggers text to appear with the resulting image size (DEV-513); it is not wrapped in a live region, so isn’t communicated to screen reader user.