It’s been another big year for accessibility improvements in Craft CMS! We’re closing out 2024 with the first in a series of quarterly updates about our progress toward key content and authoring guidelines.
New ATAG Report
In October, we published our Authoring Tools Accessibility Guidelines (ATAG) report for Craft 5.3.0, joining the Web Content Accessibility Guidelines (WCAG) conformance report for Craft 5.0.0 from earlier this year as the second official audit of accessibility features.
Content Management
In Craft 5.6, we’re adding a new “Advanced Fields” setting to Link fields. With this update, developers can expose additional controls to authors for deeper customization of link attributes.
One of these advanced fields is “ARIA Label”. This setting can be great for things like “Learn More” links, where adding an ARIA label to the link can provide extra context to screen reader users about the link’s purpose.
Remember: with great power comes great responsibility! We recommend brushing up on ARIA labels so that the impact of each control is understood, prior to enabling them.
Control Panel
General
In Craft 5.5, we updated parts of the Image Editor to ensure that all input labels—specifically, the Orientation and Constraint inputs in the Crop tab—used translated strings.
We also updated the layout of the Recovery Codes slideout to ensure the recovery codes generated don’t overflow the container on narrow and zoomed viewports.
In Craft 5.6, we’re adding a visible label to the text input inside the custom radio and checkbox options. This resolves issues caused by a lack of accessible names for the radio/checkbox inputs when no text value is filled and ensures the accessible name of the text input always matches the visible label.
Keyboard navigation
In Craft 5.5, a bug was fixed that caused keyboard focus to be dropped if reaching the first or last page of a paginated index. Now, if the currently-focused control becomes disabled, focus will move to another active control inside of the pagination container.
We also fixed some bugs present in the mobile layout of element selector modals; previously, focus was not managed when closing the source sidebar, and sidebar items were still in the focus order.
Screen reader accessibility
In Craft 5.5, we updated the Preview File modal to ensure that any “Saving…” status messages are communicated via the global live region.
More screen reader improvements are on the way, in Craft 5.6:
- In the breadcrumb navigation, the globe icon identifying the multi-site breadcrumb link will be considered a functional image.
- The Selectize asset bundle will include selectize-plugin-a11y, which will make multiple fields throughout the control panel accessible as comboboxes.
- In addition, the timepicker input included in Date Time fields will be updated to use an editable combobox pattern.
- The Image Editor has been updated so that the list that provides the visible markings for the rotation slider is hidden from assistive technology.
Dragging motion
A couple of UI areas have been updated to allow for operation without dragging movements.
In Craft 5.5, we updated the Image Editor focal point tool to allow for operation without dragging movements. To change an image’s focal point, pick up the focal point with a single pointer click or tap, then click or tap on another part of the image to drop it.
You’ll be able to tell you’re in focal point “Edit” mode because of the extra ring around the focal point, as well as a grabbing cursor on non-touch devices. You can exit the “Edit” mode by clicking or tapping the focal point tool to drop it back in place.
An extra focus outline and grab cursor indicate when the focal point is “picked up.”
In Craft 5.6, the Image Editor rotation slider will also be operable with a single pointer action. To change the rotation, click or tap on the desired rotation on the slider to update its value.
Developers
In 5.5, we updated the control panel’s iconSVG() Twig function to accept alternative text for functional icons.
For example, if you’re including a checkmark icon in the control panel to convey that an action is successful (but there’s no place nearby for equivalent text), you could use the following snippet:
{{ iconSvg('check', altText: 'Success'|t('app')) }}
This renders the SVG with an image role and alternative text.
We’re excited to continue improving accessibility in Craft CMS, as well as our testing and reporting processes. If you have any feedback or questions, you can reach us at accessibility@craftcms.com.