Craft CMS Accessibility Conformance Report

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.

In several locations, the icons conveying asset file types (such as MOV, MP4, etc.) do not have appropriate text alternatives (DEV-1078). On the Asset index page, they are marked as decorative; in the context of the Edit screen, the text alternative is set to the asset title.

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

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

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.

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

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

Craft CMS does not provide the option to attach audio description to uploaded videos (DEV-416). 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.

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

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

When a user initially opens the Preview modal and the Desktop device is active, the ​“Rotate” button is visually dimmed but not marked as disabled for screen reader users (DEV-970).

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

The control panel presents content in a meaningful sequence.

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

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

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). Autocomplete has been turned off for fields in the Add an Address form (DEV-698). The login modal doesn’t have an autocomplete attribute set on the password field (DEV-593).

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.

When a user chooses a relational field element on an Edit page, if that element has a validation error, the error is only indicated by the red text color of the element title (DEV-687).

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. However, controls are provided for users to pause or mute the video.

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

On the Login screen, the text color for ​“Remember your password?” and ​“Forgot your password?” links drop below minimum contrast ratios for small text when hovered (DEV-962).

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

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

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

The control panel includes some images of text, but primarily as part of logotypes.

However, icons for asset file types contain text indicating the file extension (DEV-1079).

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

On the Dashboard screen, some parts of the Craft Support widget become obscured. Specifically, submit buttons become clipped at the bottom, and links to the documentation overflow the widget container (DEV-956).

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). When adding an address, the slideout becomes difficult to use at 320px wide (DEV-701).

On element index pages, the primary action menu inside the toolbar may overflow the screen (DEV-959). Some condition types inside the element index filtering HUD do not reflow, causing horizontal scrolling (DEV-378).

On the Assets index page, assets with longer names are truncated to a single line with ellipses (DEV-963); users with pointer devices can hover over the truncated text to reveal the full asset title.

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. Long element titles are truncated with ellipses (DEV-966); however, users with pointer devices can hover the text to view the full title.

Date fields with both time and timezone enabled become difficult to use (DEV-967); inputs become very narrow, and users may need to focus on the inputs to view the selected date and time. In addition, timezone options may be clipped as the values overflow the container (DEV-1108).

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

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

On element index pages, a light background and subtle outline indicate the active source. However, neither the background nor the outline has a 3:1 contrast ratio with the page background, making it difficult to determine the selected source (DEV-372).

On the Dashboard, users can modify the display width of widgets via the settings menu. However, the component indicating the total available number of columns does not meet non-text contrast requirements, making it difficult for low-vision users to operate (DEV-685).

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.

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

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

Many control panel functions are keyboard operable. However, are some exceptions:

Users can’t remove widgets from the dashboard as the remove button in the dashboard settings menu is not keyboard-focusable (DEV-295).

In the table view of element index pages, when a category field is shown, the button to show additional categories is only operable with a pointer device (DEV-1112)

Image editing functions (rotate, crop, focal point) are not accessible to keyboard users (GitHub issue #7386, 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). For categories, users can control hierarchy by choosing a parent directly from the category details page.

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

The control panel does not contain any keyboard traps.

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

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.

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

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

However, previews of GIFs (and other image formats that support animation) do auto-play in the control panel (DEV-1081).

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

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.

Skip links have also been added to element index views so users can bypass elements and jump straight to pagination and Export actions in the footer.

Pages generally have titles that describe their purpose. One exception is element index page titles, which do not update the page title to reflect the user’s location in the index. As a result, a user has to interpret page content (i.e., page number, asset volume, site name, etc.) to find their location (DEV-1077).

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., the announcement disclosure in the header (DEV-1110), 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).

When adding a new rule to the condition builder, focus is not moved to a logical field and instead remains on the ​“Add a filter” combobox (DEV-721). This requires that users tab backwards after choosing to add a new filter.

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

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

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 same page where activating chevron buttons to expand/​collapse subfolders moves focus back to the parent folder element (DEV-370).

Generally meets, with one known exception.

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

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.

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

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 two 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. On desktop screens, the skip link focus outline is not highly contrasted against the background of the global navigation (DEV-552).

No functionality depends on pointer gestures.

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

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

In Color fields, the color picker and hex input do not have visible labels; this will cause issues for users trying to activate either input via the text present in the fieldset legend (DEV-719). This issue is also present for URL fields, as the legend text is not the accessible name of either the select dropdown or the text field (DEV-591).

In addition, the accessible name of the primary navigation link to ​“View site” does not match the visible label, which is the system name (​DEV-952).

No control panel functionality depends on user or device motion.

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

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

No focus events trigger a change of context.

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

On element index screens, when a user changes an element’s status using the ​“Set Status” menu, keyboard focus moves to the last selected element without any warning (DEV-1033).

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.

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

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

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 lacks visible labels for the context menu and status/​sort menus in the toolbar on entry, category, and asset pages. It also does not have visible labels or instructions inside the element index filtering HUD on those same pages (DEV-426, DEV-718). 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). When timezone inputs are present, they do not have a visible label (DEV-1109).

Color fields do not have visible labels for nested color pickers and hex inputs (DEV-719).

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.

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

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.

Most of the control panel uses valid HTML.

However, one custom select component introduces parsing errors caused by duplicate IDs; this is the ​“Sort by” select on element index pages (DEV-722). Because IDs are duplicated across options, screen reader users may not be able to parse the available options or make new selections.

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.

Primary action menus on category and entry edit screens do not have accessible text (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; these include the Widget Settings button on the Dashboard (DEV-955) and the announcements button in the header (DEV-1048)

The ​“Sort by” custom select on element index pages is not used according to specification (DEV-434); although not conveyed programmatically, this element allows for two values to be selected: attribute and direction.

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

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.

On Edit pages, when multiple sites are enabled, 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.”

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, custom constraint inputs 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.

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