Accessibility: Screen reader not describing selection area action

[dfragosodiaz]

Hello. Thank you for your contributions to this great tool.

We are facing an accessibility issue on changing the selection area (Moving position or Enlarging/Decreasing the image region). The screen reader is not announcing respective information about the action occurred. I see the default accessibility labels being called out, but actions like increasing or decreasing image area or dragging the cursor are not being announced. We are using v9.0.2, and I see that accessibility implementation in the latest version is not too different from what we have. Do you have any plans on improving the accessibility of this library? I've been researching and I am not sure if this is a known issue? Any help would be appreciated. Thank you!

[dominictobias]

Hey I'd like to improve it, however I'm no expert so if you have any suggestions about how it can be improved please let me know/link to the resource

[dfragosodiaz]

Here are some of the specifications we received from the accessibility team to make our site more accessible using the cropping tool. PWD Impact: Users who rely on screen readers would get impacted if no information about the action occurred on moving or enlarging/decreasing of image region is not being announced

Test Environment: OS: Windows 11 Enterprise 22H2 (OS Build 22621.1555)
Browsers: Edge Chromium Version 111.0.1661.44 (Official build) (64-bit) URL: any url where the cropping tool is being used Screen Readers: NVDA (2022.4) Repro Steps:

Step 1: Step 1: Enable NVDA and Open the page where the control is used Step 2: Open an image ready to crop Step 3: Try adjusting the image size/region (i.e., either move the position of the crop region or enlarge the crop region or decrease the crop region) and observe the screen reader announcement and verify whether screen reader is announcing respective information about the action occurred or not

Actual Result: On changing the selection area (Moving position or Enlarging/Decreasing the image region, screen reader is not announcing respective information about the action occurred

Expected Result: On changing the selection area (Moving position or Enlarging/Decreasing the image region, screen reader is announcing respective information about the action occurred

MAS Reference: MAS 1.3.1 – Info and Relationships WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

[dfragosodiaz]

Also, I've been reading your documentation and examples, and is there a way to show the current dimensions of the image in the cropping box? For example, I drag the bottom right corner of the box and the dimensions visibly change for the height and width?

[nkuczma]

Hi! I also encounter some accessibility issues. My problem was that while NVDA was enabled, navigating by keyboard was not possible - NVDA intercepted all arrow keys actions.

My workaround was to add wrapper for <ReactCrop>, wrap it with div that has role="application", and use aria-activedescendant and aria-owns on input, to manage focus, so NVDA is in "form mode" and allows native keys usage.

<input
  type="file"
  accept="image/*"
  onChange={onSelectFile}
  aria-activedescendant="crop-image"
  aria-owns="crop-image"
/>

...

<div role="application" id="crop-image">
    <ReactCrop
        crop={crop}
        onChange={handleCropChange}
        onComplete={(c) => setCompletedCrop(c)}
        aspect={aspect}
    >
        ...
    </ReactCrop>
</div>

I also added screen reader annoucements to onChange event in handleCropChange function. Here's small demo: https://codesandbox.io/s/react-image-crop-demo-forked-accessibility-2lt4kq

@DominicTobias it would be great to have that kind of functionalities built-in. I would also ask for option to change content of the aria-labels and messages, because I need to translate them to different language than English and I'm looking for a workaround for that too :)

[dominictobias]

@nkuczma I forgot to document but ariaLabels is already a prop where you can pass in a non-english object: https://github.com/DominicTobias/react-image-crop/blob/master/src/ReactCrop.tsx#L106

As for the other stuff if either of you have concrete suggestions of what to change (or raise a PR) that would be great as I'm not clued up on this stuff and tbh not inclined to install accessibility tools myself and figure it out (i.e. exactly what should change in the html and how to do transient stuff on events)