Now that Q1 has wrapped up and Craft 5.7 is out, here’s a look at the accessibility improvements we’ve made since our last accessibility update.
General
In Craft 5.6.7, a bug was fixed that led to inconsistent slideout behavior for users who preferred reduced motion — such as focus not being moved into slideouts, or being unable to activate certain slideouts via keyboard.
We also resolved a bug in 5.6.11 where focus wasn’t returned to the action menu trigger after closing a field layout element’s settings slideout.
In 5.7, we fixed an issue that caused focus to drop when closing the Image Editors and Edit slideouts that were triggered from the action menu.
We also included an update to lightswitch input styles. Now, the background and handle maintain a 3:1 contrast ratio against each other and the meta panes’ background color (#16853).
The user preference for “Always show focus outlines” was removed in this version. The change not only resulted in more maintainable CSS, but is more in-line with our goal to have accessibility features baked into the defaults.
We’ve removed button roles and accessible names from “Reorder” handles throughout the control panel, and the handles have also been removed from the tab order, as they are not keyboard-interactive. In the majority of cases, adjacent “Actions” disclosure menus have non-drag, keyboard-accessible options to reorder the element.
Craft 5.7 includes a new custom field, Button Group.
This field implements a component pattern suggested by Léonie Watson for groups of buttons where selecting one button de-selects the others. It’s common to see this type of component coded with a semantic radio group where input is visually hidden and labels are styled to look like buttons. However, it can cause confusion when you see what looks like a group of buttons, but keyboard focus and selection don’t work as you’d expect because keyboard focus is managed differently for radio inputs.
By using semantic buttons with aria-pressed attributes, the keyboard interaction pattern is more predictable for a more significant number of users.
We’ve already implemented the exclusive button group pattern for UI components like the device switcher inside the Live Preview modal, so we’re excited to make it available for use inside field layouts.
In addition, Craft 5.7 no longer animates thumbnails for animated GIFs and WebP images in the control panel. Until now, animated images’ thumbs have played regardless of users’ reduced motion settings.
Keyboard navigation
In 5.6.3, we fixed a bug where buttons with red and dark gray backgrounds weren’t receiving focus outlines.
In 5.6.10, we fixed a bug where action buttons weren’t receiving focus outlines.
In 5.6.12, we addressed a couple of issues related to tooltips. First, we fixed a bug where tooltips weren’t always being shown when truncated links were focused. In addition, we resolved an issue where tooltips weren’t closing when Esc was pressed. (#16881)
Skip link improvements
In 5.7, we added more skip links to the control panel to aid in keyboard navigation (#16913). In addition to the skip link to jump to the <main> section, we now include the following links:
- “Skip to left sidebar” (in LTR languages) jumps to the secondary navigation. For example, on element index pages, this link would move the keyboard focus to the source sidebar.
- “Skip to right sidebar” (in LTR languages) moves focus to the details sidebar on entry pages.
- “Skip to content” moves the keyboard focus to the primary content on the page. For example, on an entry page, the focus will jump directly to the field layout. On element index pages, the focus will move to the element container.
A “Skip to card view designer” skip link has been added to the field layout designer when it’s followed by the card view designer, so users can quickly navigate to the next section (#16955).
Screen reader accessibility
In 5.6, we updated progress bars to trigger intermittent updates via the global live region. This affects all actions that trigger the display progress bar, like starting a job to index assets or uploading a file.
The default behavior is to give the user a progress update every 5 seconds.
We also fixed some areas where loading spinners were being shown without triggering screen reader status messages; these include some instances of loading spinners on element indexes and those shown when adding addresses and elements via inline-editable Matrix fields.
Timepicker inputs were updated to use the combobox pattern.
A bug was resolved that caused fieldsets not to be associated with their legends due to other elements preceding the legend in the DOM. To prevent this disconnect between fieldsets and their legends, we’ve switched from semantic fieldsets to using an ARIA group and aria-labelledby to reference the legend node.
Tags fields have been updated to use an SVG for the “plus” icon instead of a CSS font icon; this means the decorative icon is no longer read aloud for screen reader users.
In 5.6.12, we fixed a bug where accessible names were not available for global sidebar links when the sidebar was collapsed (#16879).
In 5.7, we updated slide pickers in the Field Layout Manager to have accessible names. We also fixed a bug where indicator icons within field layout element chips didn’t have alternative text.
The heading structure of field layout designers has been improved for navigation by screen reader users. The field layout designer is now preceded by a level 2 heading. Tab titles use level 3 headings and individual fields use level 4 headings (#16955).
We’ve also updated the group of custom constraint inputs in the Image Editor; now, they are grouped together programmatically inside a labeled fieldset (#16914).
Developers
We made global updates to Craft’s ProgressBar component that affect accessibility (see Screen reader accessibility above).
If you’re already handling screen reader status messages elsewhere in your code, you can toggle off the announcements by setting announceProgress to false in the instance settings.
There may be instances where you may need to trigger additional announcements to screen reader users outside of the progress bar announcements, for example:
- If you’re showing a loading spinner when the process starts
- If you display a success or failure message/icon after the progress bar is hidden
In these cases, you may need to make a direct call to Craft.cp.announce() with your message.