Craft CMS Accessibility Conformance Report

The control panel generally meets this criterion. 

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.

Some exceptions are:

• Images not using the native Alternative Text field will lack alt text in the control panel.
• Some decorative CSS content is not hidden from screen reader users; this usually does not affect operability.
• In the breadcrumb navigation, the globe icon identifying the site breadcrumb is marked as decorative but should be considered functional.
• In the 2FA setup, the QR code image is marked decorative when it should be considered functional.
• The selected icon does not have a text alternative in the icon field.
• In the Support widget on the Dashboard, GitHub issue status icons don’t have text alternatives.

Only video assets — not audio assets — are previewable in the control panel.

The control panel does not provide native functionality to relate supplementary audio tracks to video assets. However, authors can add text alternatives to videos via the Alternative Text native field. This alternative text is visible when previewing videos throughout the control panel.

Craft CMS does not provide the ability to attach caption tracks to uploaded videos. Videos previewed in the control panel will only have captions if they have been hard-coded into the video files.

The CMS does not have native fields for linking audio descriptions to uploaded video assets. As a result, video previews in the control panel will only have audio descriptions if they are integrated into the video assets themselves.

However, plain text transcripts can be associated with videos via the native Alternative Text field.

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

Craft CMS does not provide the option to attach audio descriptions 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.

A great deal of the control panel implements techniques for conveying information and relationships in accessible ways, with the following exceptions:

Globally:

• The Notification heading is on all pages, even when no active notifications exist.

On the Dashboard:

• In the Support widget, the ​“Similar issues on GitHub” heading marks the beginning of a new section when it should be nested inside the previous heading instead.

My Account region:

• h2 headings may not accurately reflect the page structure. On some pages, they are duplicated; on others, they do not maintain a meaningful hierarchy with other headings.
• The passkey table does not identify the passkey name as a table row header.

Image Editor:

• The custom constraint fields that show when the ​“Custom” option is selected are not identified as a group of related controls.
• Rotate slider label text is marked as a list but should be hidden from the accessibility tree.

On edit screens:

• The ​“field modified” indicator can interfere with fieldset legends, causing the legend not to be associated with group fields. This is not the case when fields are unmodified.
• The ​“Metadata” heading may be placed incorrectly on detail pages in multi-site installs. Instead of preceding the metadata info, it’s located above the per-site status container.
• Matrix fields are part of a group of fields but are not identified as such.

The control panel presents content in a meaningful sequence.

The exception is when an author has modified a field; the ​“This field has been modified” message is located before the field label, so it may be confused as referring to the previous field.

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

View and operation are not restricted to a single display orientation.

The Profile page uses valid input purposes for username, full name, and email address to make it easier to fill out forms. 

There are a couple of exceptions in the Addresses slideout:

• Organization native field
• Full Name native field

If additional custom fields are added to the user profile page, there’s no way for developers to identify input purposes.

Input purposes have been identified for many Address field inputs. However, Selectize fields (used for fields like country, administrative area, and preferred language) do not work well with browser autocomplete.

With default settings enabled, color is used to differentiate:

• Status icons (i.e., live, pending, expired)
• Inline links

Users can update their preferences so that:

1. Shapes represent statuses
2. Links are underlined

With these settings enabled, there are still two exceptions to meeting this criterion:

• Icon-only links (i.e., the globe icon on element index pages) do not receive an underline.
• In the Support widget, GitHub issue status icons do not use shapes.
• When editing fields inline in an element index, red borders are used to indicate fields with validation errors

The control panel generally supports viewport widths of 320px (the equivalent of 400% zoom at 1280px wide), with some exceptions.

Dashboard:

• Widget reordering is not available.

My Account area:

• When generating Recovery Codes for Two-Step Verification, the codes are clipped (although they can be downloaded).

In element indexes:

• Some fields in the element index filter may overflow the disclosure container and cause horizontal scrolling.
• When enabling inline editing, fields may overlap and become overly-truncated.

On edit screens:

• Element chips with long titles overflow the layout and cause a slight horizontal scroll.
• Opening a timezone dropdown causes a horizontal scroll.
• The blue vertical indicator adjacent to modified fields is not visible.
• Live Preview is not visible.

Generally meets, with the following exceptions:

• Globally, input borders do not have sufficient contrast against their background. This is relevant on detail pages, and when inline editing mode is enabled on element indexes.
• Pagination buttons on element index pages, when the page is scrolled, and the glass effect is active.
• The Pending status icon is under minimum contrast ratio in all contexts. Other status icons may not meet minimum contrast in certain states. However, status information is also available in other places, like detail pages, and based on index filter views.
• The ​“ON” lightswitch state in the entry details sidebar.
• In the date picker, the current date indicator has low contrast.
• Some icons are under minimum contrast ratios. These are:
  • Device-type icons in Live Preview, and the active device-type indicator
  • The ​“Toggle sidebar” button on details pages in the expanded state

For the most part, focus outlines meet non-text contrast, with the following exceptions:

• Inside disclosure menus (2.9:1 contrast ratio)
• Inside selected element cards and chips
• Fields using Selectize
• Lightswitch fields
• Disabled button focus outlines
• Orientation inputs inside the Image Editor
• Number and text fields inside Table fields
• Focus outlines of controls with dark backgrounds have poor contrast. These include:
  • Controls with red backgrounds, usually primary action buttons like ​“Save,” ​“New entry,” etc.
  • Controls with dark gray backgrounds, such as active sidebar items

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

The control panel includes custom tooltips that appear on hover and focus. These are hoverable, persistent, and dismissible via the ESC key.

However, there is a known bug where dismissing a tooltip that’s inside a disclosure menu causes the menu to close.

The control panel does not feature auto-playing audio.

Most text in the control panel meets minimum contrast requirements. Exceptions include:

• The name of the current context in the header (i.e., the active version/​draft)
• The hover state of inactive tabs
• Pagination text on element index pages when the page is scrolled and the glass effect is active
• For destructive actions in the Actions menu on the element index footer, the red text color is not contrasted enough against the background color when the item has visual focus.
• The ​“Buy now” link in the footer when trials are installed.
• Required asterisks are under the contrast minimum for text, although they meet non-text contrast minimums.

There is a known bug with inputs that use Selectize, where the contrast of the selected option drops under the minimum when it’s hovered.

The control panel supports browser zoom to 200% without loss of content or functionality.

There are no images of text in the control panel except for logotypes.

Many control panel functions are keyboard-operable, with the following exceptions:

Globally:

• Date pickers aren’t keyboard-accessible. However, authors can input dates via the associated text input.
• Resize handles can only be operated via pointer input.

On the Dashboard:

• Widget reordering can’t be performed with the keyboard.
• There are two bugs related to focusable elements that can be resolved by reloading the page:
  • The settings button for newly-created widgets is not keyboard-focusable. This is resolved by reloading the page.
  • When a widget is removed, and the action is undone, the same ​“Remove” button in the widget manager cannot be activated via the keyboard.

In element indexes:

• Table columns can’t be reordered via keyboard
• Entry nesting can’t be changed on element index screens, as the move handle is not keyboard accessible. An alternative is to update the parent element on the entry edit screen.
• The button to expand additional categories in the table view is not keyboard accessible

On detail pages:

• Table field rows can’t be reordered via keyboard.
• Matrix field checkboxes can’t be activated via keyboard. This prevents keyboard users from performing bulk options on Matrix items, such as expand/​collapse and disable/​enable.

In the Image Editor:

• Crop and focal point tools aren’t keyboard-accessible

There is a single bug that introduces a focus trap in the control panel:

• When opening a slideout on large viewports where the sidebar is toggled open initially, users can’t tab out of the details sidebar. A workaround is to resize the viewport window so the sidebar is closed on open or to edit entries on their dedicated edit pages.

Keyboard shortcuts include modifier keys to prevent accidental activation.

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.

Users have the ability to adjust the display time of notification toasts in their preferences or make them persistent. However, users may encounter short toast display times before updating this setting unless developers have set a longer or indefinite duration time.

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

However, previews of GIFs and other image formats that support animation do auto-play.

No flashing elements exist in the Craft CMS control panel; however, authored content could pose a risk since GIFs and animated images auto-play.

A skip link is provided to bypass the global navigation menu. In addition, skip links are used in other parts of the UI to help users bypass lengthy content blocks.

However, there are some exceptions:

• On edit screens, there is no skip link to bypass the toolbar, so users have to tab through to get to the main field layout
• In areas with nested sidebars — like the My Account section — there is no skip link to bypass the sidebar navigation
• There is no skip link on element index pages to bypass the search bar and jump directly to the index.

The control panel generally meets this criterion. However, if notifications toasts are made persistent, open notifications could obscure keyboard focus on other parts of the page.

Pages generally have titles that describe their purpose. Exceptions are:

• The site name is not included in the page title on multi-site installs.
• Page titles in the My Account area do not specify the exact account page the user is on (i.e., Profile, Addresses, etc.); instead, they have titles of ​“My Account” or the user’s username.
• Element index page titles 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, search query, source name, etc.) to find their location

Generally meets, with some exceptions.

There are some instances where the focus order is unexpected:

• On screens with a search or title input, keyboard focus is moved to the input on page load. Users can turn off this feature in their accessibility preferences under the ​“Disable autofocus” checkbox.
• On element index pages, the search bar and filters precede the source navigation sidebar in the DOM. This is unexpected, as the sidebar could be perceived as coming first in the operational order.
• Toggling a table header on an element index causes focus to move to the beginning of the table
• When tabs overflow, and a user selects a tab from the adjacent disclosure menu, focus moves to the active tab button instead of returning to the disclosure trigger.
• Dashboard widgets may have a non-intuitive focus order because they follow the order set by the masonry layout grid.
• When activating a ​“Copy” button, focus moves to the adjacent input instead of remaining on the button.
• In element selector modals:
  • Off-screen sidebar navigation is in the focus order.
  • When closing the sidebar, focus isn’t returned to the menu toggle.

There are some instances where focus is dropped. These include:

Globally:

• When undoing an action from a notification toast
• After closing a notification toast

On the Dashboard:

• When checking for an update

On element indexes:

• After setting a new status on an entry from the footer ​“Actions” control
• After activating inline editing or saving edited content
• After activating the ​“Previous”/”Next” pagination buttons, if the previously-active button becomes disabled
• On mobile/​zoomed screens — because the source sidebar is collapsed on source selection — focus is dropped when choosing a source

The purpose of each link in the site can be determined from the link text alone or from the programmatic context of the link.

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.

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.

The control panel implements focus indicators for all focusable elements.

The only known exceptions are:

• Time fields with overflowing dropdowns do not scroll the programmatically focused option into view.
• In the Actions menu in the element index footer, visible focus may disappear when there are disabled options in the menu.
• There is no visible focus outline for the iframe in the Live Preview modal.

The control panel does not rely on multipoint or path-based gestures.

Actions that might be invoked on the down event can either be canceled or reversed in a separate action. 

For example, assets can be picked up and moved between folders. When the asset is released outside the target area, it reverts to its current folder. Actions like table row reordering can be undone in a separate action.

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

On the Dashboard page:

• In the widget manager, the widget label could be considered the visible label of the widget width control, leading to issues with voice users trying to activate the ​“Number of columns” input.

On element indexes:

• Because the ​“Status” select in the header doesn’t have a visible label, the chosen option could be confused with the control’s accessible name.
• In the ​“View” menu, the fieldset legend ​“Sort by” could be confused for the accessible name of the ​“Sort attribute” select.
• For untitled entries, the visible label of the select checkbox does not match the accessible name, which defaults to the entry ID.

On edit screens:

• For some custom fields that use fieldsets, the fieldset legend could be confused for the accessible names of the inputs. These include color, date, and URL fields.
• The Tag field takes its accessible name from the placeholder text, which may differ from the custom field name.
• Matrix field ​“Add” button labels do not match the accessible name

No control panel functionality depends on user or device motion.

Single-pointer activation has been implemented in relational fields to allow entry reordering as an alternative to dragging via the move handles.

On the Dashboard:

• Widgets can only be reordered with a dragging motion.

On edit screens:

• Reordering multiple matrix field items simultaneously is only possible using dragging movements; however, single items can be reordered without dragging.
• Reordering rows in a Table field requires dragging.

In the Image Editor:

• Crop and focal point tools require dragging
• The rotation slider can’t be changed via clicking. Because this is keyboard-focusable, one workaround is to use the keyboard to update the value.

Interactive elements generally meet size or spacing requirements, with a few exceptions:

• In element indexes:
  • When the search query is filled, the ​“Clear” button is not sufficiently spaced from the filter button
  • When inline editing is enabled, Money field inputs are too close to ​“Clear” buttons
• Slide picker inputs — like the one used for choosing widget width on the Dashboard page — have touch targets that are narrow and closely spaced
• In the structured index view (e.g., on the Category page), checkboxes are not sufficiently spaced from move handles

The human language of each page can always be programmatically determined.

Administrators and developers are responsible for translating field names, options, 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. Also, text that has not yet been translated by authors (i.e., entry titles, alternative text) does not correctly identify the original language.

Globally, font icon CSS content has not been hidden from screen reader users. This can cause some English strings to remain in the document when setting the preferred language to a non-English language.

If a user is signed out of their session, and the default control panel language differs from their preferred language, the authentication modal will not correctly identify the human-readable language.

Untranslated strings have not been given wrappers identifying their language. The following items will affect screen reader users whose preferred language is not set to English:

Globally:

• Product, brand, and edition names (i.e., Craft CMS, CraftQuest, etc.)
• In the breadcrumb navigation:
  • The ​“Select site” button
  • Status and ​“selected” text alternatives
• “Draft #” text in the context menu

On indexes:

• On the element index header:
  • The ​“Display as cards” button
  • The ​“View settings” button

On the Dashboard:

• RSS feed content
• GitHub issue titles

In the Image Editor:

• Constraint and orientation radio input labels

On edit screens:

• Error icon alternative text in the error summary container
• Icon button names and alternative text in the Icon field
• Remove buttons in multi-select fields
• Default ​“Add a row” button text for table fields

No focus events trigger a change of context.

A change of context occurs on selection on the Login screen when 2FA is active, and the user changes the value of the ​“Try another way” control; focus is moved to the new input without warning.

On element index pages, when changing the value of the Actions menu in the footer (which presents as a combobox), a change of context occurs due to focus being dropped.

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.

A bug with ​“truncation tooltips” causes the accessible name of entry links to be doubled when a tooltip is present. As a result, some links may be identified inconsistently based on whether the title is truncated. For example, a link to the entry ​“My Blog Post” may be referred to as ​“My Blog Post My Blog Post” only when the title is truncated.

In addition, the link to the Profile page in the My Account menu is named “{{ username }} {{ email }}”; in the My Account area, it’s called ​“Profile.”

There is no help mechanism in the control panel’s layout template.

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

However, there are two exceptions:

1. When inline editing is enabled for an element index, error messages are general and don’t support users in correcting specific errors. However, editing a single entry via the edit screen gives users access to instructive error messages.
2. Date and Time fields do not throw errors when users enter data in the incorrect format.

Generally meets, with the following exceptions:

Globally:

• Individual fields inside the Date and Time fieldsets do not have visible labels.
• Date and time fields have only visually-hidden formatting instructions.

Dashboard:

• The ​“Number of columns” widget manager input has no visible label.
• In the Feed widget, the limit input is not marked as required but does not allow a non-empty value.

In element indexes:

• Condition rule inputs do not have a visible fieldset name or visible labels for the individual inputs
• The ​“Select” checkbox in the table header has no visible label.
• When inline editing mode is enabled:
  • Required fields are not identified
  • Instructions are not provided 

Image Editor:

• Constraint and orientation fieldset legends are visually-hidden.
• Orientation radio inputs use images instead of clear, visible labels.
• Custom constraint ratio text inputs do not have visible labels.
• The rotation slider input does not have a visible label.

On edit screens:

• URL field: individual fields inside the fieldset do not have visible labels.
• Color picker field: individual inputs do not have visible labels.
• Matrix fields: the ​“Select” checkbox has no visible label.

When input errors are automatically detected, error messages are shown near the input with suggestions for correcting 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.

The control panel does not require that users enter information again in the same process.

Password entry by password managers is supported. All inputs related to authentication — including 2FA verification and recovery code inputs — allow copy and paste.

Generally meets, with some exceptions.

Globally:

• The ​“Try another way” control in the Verification and Recovery Codes authentication forms does not have an accessible name. This control is located between the ​“Verify” and ​“Sign in with a Passkey” buttons
• A bug with ​“truncation tooltips” causes the accessible name of entry links to be doubled when a tooltip is present. As a result, some links may be identified inconsistently based on whether the title is truncated. For example, a link to ​“My Blog Post” entry may be referred to as ​“My Blog Post My Blog Post” only when the title is truncated.
• Some HUD menus (like Export, Widget Manager, Announcements, etc.) do not toggle closed when the trigger is re-activated. However, they can still be closed with the ESC key.
• Some modals, like those related to authentication, cannot be closed via the ESC key.
• Some fields present themselves as text inputs, although they function as comboboxes. Their keyboard functionality may not be entirely consistent with comboboxes. These fields include:
  • Selectize fields, like Timezone, Multi-select, and Dropdown fields
  • Tag fields
• In the breadcrumb navigation, the Site name link goes to the current page instead of a general ​“site” page
• When tab interfaces overflow the container, and additional items are shown in a disclosure menu, the button identifying the currently selected tab does not have any state information. However, the tabs contained in the tab list do communicate this information.
• Drag targets for reordering elements are marked as buttons but are only interactive for users with pointer devices.

My Account pages:

• The active link in the My Account sidebar navigation does not have a state value.
• The disclosure menu for updating 2FA apps and recovery codes has an accessible name of ​“ellipsis”

In element indexes:

• Keyboard interaction for the ​“Status” filter is inconsistent with WAI-ARIA Authoring Practices. When the same character is typed in succession, the combobox doesn’t cycle between options starting with that character.
• When enabling inline editing, many fields don’t have accessible names. A workaround is to limit editing to detail pages.
• Tag field listboxes contain interactive elements

On edit screens:

• One element chip or thumbnail container in relational fields (e.g., Assets, Entries, Categories fields) is in the focus order, although it should not be interactive.
• In the Icon field, the selected icon does not have an image role.
• Multi-select field: ​“Remove” controls function like buttons but do not have button roles.
• Matrix field: checkboxes in the title bar do not have a checkbox role or communicate state.

The CMS uses live regions in various places to announce status messages to screen reader users. These include:

• Toast notifications
• Updates to element indexes resulting from searching, filtering, sorting, etc.

There are some exceptions, including:

• Most buttons that convey status via a loading spinner, except for the ​“Sign in” button
• Status of Preview Modal template refresh
• The ​“Saving…” message altering the focal point in the Preview modal
• Completion of actions taken in the Image Editor, such as flipping or rotating an image
• Loading spinners when:
  • Searching/​filtering element index modals
  • Searching within the Icon field modal
  • Checking for updates in the Updates Dashboard widget
  • Storing entry changes; while the in-progress state isn’t announced, the storage completion state is.
  • Tag field values are loading or successfully loaded