Accessibility Updates for Q2 2025

Image Editor updates

In 5.8, we’ve added full keyboard and screen reader support for image cropping.

How it works

To crop an image with the keyboard, you must be inside the Crop tab panel in the Image Editor.

Use the Tab key to navigate through the interface. When you tab past the constraints radio group, you will be able to tab through the cropping controls.

Press Space or Enter to pick up either the entire cropping rectangle or a single handle.

Picking up the cropping rectangle allows you to move the crop placement. Alternatively, picking up a handle allows you to resize the cropping rectangle.

Use the directional keys to move or resize the cropping rectangle.

Press Space or Enter—or tab to the next item—to drop the item in place.

Accessibility considerations

HTML <canvas> elements are notoriously tricky when it comes to accessibility. Canvases allow you to draw 2D content to your heart’s content. But to make canvas contents accessible, you have to be intentional about providing fallback content.

Before this update, the only way to crop an image was to hover a “grab” point on the cropping rectangle and hold the mouse down to drag it across the canvas.

This worked well for most mouse users. But to make it accessible to keyboard and screen reader users, we had to consider:

1. How to make the interaction possible for keyboard users
2. How to convey the related information (instructions, positioning, etc.) to assistive technology users

Visible focus

The cropping rectangle and handles need visible focus outlines to be keyboard-accessible. Using native HTML elements as a fallback to canvas content helps us with that.

First, we explored the Salesforce drag-and-drop pattern for interacting with a canvas. This pattern lets keyboard users move items around a 2D space by activating “handles.” The handles use native buttons, and activating one lets you move an item using the keyboard only.

By using buttons to interact with the canvas, we can also harness their built-in focus and blur events.

When focus lands on one of the buttons, we update the canvas with a corresponding focus outline. When a button loses focus, we clear the outline from the canvas and draw the next one in the sequence.

Buttons have other semantics that we can harness for a more accessible experience. That brings us to…

Accessible name and state

Assistive technology users — like screen reader users — benefit from accessible names and states.

Here’s a simplified look at the button markup:

<button type="button" aria-pressed="false" data-crop-editor="rectangle">
  Cropping Rectangle
</button>
<button type="button" aria-pressed="false" data-crop-editor="tl">
  Top-Left Handle
</button>
<button type="button" aria-pressed="false" data-crop-editor="t">
  Top Handle
</button>
...

Using native buttons allowed us to include:

1. Accessible names. Each button has inner text that specifies the item it controls.
2. State information. We also added the aria-pressed attribute to clarify which handle was active.

Instructions and status messages

When a user activates a handle, we announce the item’s position and instructions for moving it:

Cropping Rectangle picked up. Centered at X axis: 50%, Y axis: 50%. Use the arrow keys to change position, Tab or Spacebar to drop.

We update the live region with the modified position while the user is making edits. And when the user deactivates the handle, we announce that the item has been dropped.

What’s next

This is a huge improvement for keyboard and screen reader users, but we still need to make it conform to WCAG 2.2 AA.

In future updates, we’ll ensure crop editing via a pointer device doesn’t rely on dragging movements. This will help the Image Editor conform with SC 2.5.7: Dragging Movements (Level AA).

We’re also working on implementing the keyboard drag-and-drop for the focal point tool.

Other updates

General

In 5.8 we added user preferences to update the on-screen position of Notifications and Slideouts. These new preferences allow you to customize which corner the Notification toasts appear in and whether Slideouts show on the left or right side of the screen.

You can find this setting in My Account → Preferences → Accessibility.

When we updated Lightswitch fields to better meet minimum contrast requirements, we inadvertently made it harder for some users to differentiate between the “On” and “Off” states.

To fix this issue, we made some color adjustments and added a checkmark icon to the lightswitch handle to make the “On” state more apparent (#17492).

Screen reader accessibility

In 5.7.11, we fixed a bug where autosuggest inputs weren’t getting correct aria-describedby and aria-labelledby values (#17413).

We also fixed a bug where checkbox accessible names on element index screens didn’t match the visible label provided by the entry title (#17399).