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.
Updates
On April 21, 2023, the following conformance level changes were made:
- 2.2.2 Pause Stop Hide was changed from Supports to Partially Supports
- 2.4.2 Page Titled was changed from Supports to Partially Supports
- 1.4.5 Images of Text was changed from Supports to Partially Supports
On October 8, 2024, the following changes were made:
- 2.4.1: Bypass Blocks was changed from Supports to Partially Supports
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.0 |
Level A (Yes) Level AA (Yes) Level AAA (No) |
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 ContentThe 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. 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 |
Not Applicable |
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 (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. |
1.3.1 |
Info and Relationships
Level A |
Partially Supports |
Show remarks for Authoring Tool 1.3.1 Info and RelationshipsA 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:
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 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 SequenceThe 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 CharacteristicsReferences 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 OrientationThe 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 PurposeThe 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). |
1.4.1 |
Use of Color
Level A |
Partially Supports |
Show remarks for Authoring Tool 1.4.1 Use of ColorGenerally 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). |
1.4.10 |
Reflow
Level AA 2.1 only |
Partially Supports |
Show remarks for Authoring Tool 1.4.10 ReflowWhen 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). 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 ContrastOn 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). 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 SpacingThere 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 FocusThe display of additional content is not triggered by hover or focus. |
1.4.2 |
Audio Control
Level A |
Partially Supports |
Show remarks for Authoring Tool 1.4.2 Audio ControlIn 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. 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). On the Dashboard page, badges indicating draft entries are below the minimum contrast threshold (DEV-661). 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). 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 textIn 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 |
Partially Supports |
Show remarks for Authoring Tool 1.4.5 Images of TextThe 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). |
2.1.1 |
Keyboard
Level A |
Does Not Support |
Show remarks for Authoring Tool 2.1.1 KeyboardMany 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 and Entry index pages, users are unable to interact with options in the primary action menu using the keyboard alone (DEV-684). In the table view, when a category field is shown, the button to show additional categories is only operable with a pointer device (DEV-1112) Keyboard users are unable to edit existing addresses in the My Account section when the native Addresses field is present in the user field layout (DEV-689). 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-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. 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 TrapGenerally 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 ShortcutsThe 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 AdjustableAdjustable 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 |
Partially Supports |
Show remarks for Authoring Tool 2.2.2 Pause, Stop, HideGenerally 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). |
2.3.1 |
Three Flashes or Below Threshold
Level A |
Supports |
Show remarks for Authoring Tool 2.3.1 Three Flashes or Below ThresholdThere are no flashing elements in the Craft CMS control panel. |
2.4.1 |
Bypass Blocks
Level A |
Partially Supports |
Show remarks for Authoring Tool 2.4.1 Bypass BlocksA 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. However, there are some pages with nested toolbars and navigation that require additional tabbing through the |
2.4.2 |
Page Titled
Level A |
Partially Supports |
Show remarks for Authoring Tool 2.4.2 Page TitledPages 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). |
2.4.3 |
Focus Order
Level A |
Partially Supports |
Show remarks for Authoring Tool 2.4.3 Focus OrderGenerally 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). 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 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 WaysNo 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 LabelsHeadings 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 VisibleCustom 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.
|
2.5.1 |
Pointer Gestures
Level A 2.1 only |
Supports |
Show remarks for Authoring Tool 2.5.1 Pointer GesturesNo 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 CancellationThe 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 NameThe 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). |
2.5.4 |
Motion Actuation
Level A 2.1 only |
Supports |
Show remarks for Authoring Tool 2.5.4 Motion ActuationNo 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 PageThe 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 PartsWhile 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 FocusNo 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 InputSome 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). |
3.2.3 |
Consistent Navigation
Level AA |
Supports |
Show remarks for Authoring Tool 3.2.3 Consistent NavigationCraft 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 IdentificationGenerally 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:
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 IdentificationCraft 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 InstructionsThe 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. |
3.3.3 |
Error Suggestion
Level AA |
Supports |
Show remarks for Authoring Tool 3.3.3 Error SuggestionWhen 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 ParsingMost 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, ValueFor 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), the Widget Settings button on the Dashboard (DEV-955), the announcements button in the header (DEV-1048), 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, 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. 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. In the address tab of the Account page, users are not able to use the spacebar key to activate the address Delete button; this goes against authoring guidelines for button-type components (DEV-699). |
4.1.3 |
Status Messages
Level AA 2.1 only |
Partially Supports |
Show remarks for Authoring Tool 4.1.3 Status MessagesVarious 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:
|