WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 4 months ago

#30390 closed defect (bug) (fixed)

Voice Over user can't access Attachment Details after adding an image

Reported by: rianrietveld Owned by: helen
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: has-patch needs-testing
Focuses: ui, accessibility Cc:

Description (last modified by joedolson)

After uploading an image in Add Media -> Insert image, the focus is placed at the URL from Link to Media File.

A Voice Over user can't reach the Attachment Details by tabbing backwards (up). This might be caused by the fact the attachment details are placed within a div with the role "checkbox"

<div tabindex="0" role="checkbox" aria-label="image-alt" aria-checked="false" data-id="69" class="attachment-details save-ready">
		<h3>
			Attachment Details

The screen reader NVDA can reach the field, Voice Over can't.

Cyndy Otty (@ceo) gives a demo https://files.slack.com/files-pri/T024MFP4J-F0311N8AC/insert_media_with_voiceover__wp_4.1-beta1_.mov

Attachments (1)

30390.diff (577 bytes) - added by helen 6 years ago.

Download all attachments as: .zip

Change History (11)

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


6 years ago

#2 @joedolson
6 years ago

  • Description modified (diff)

#3 @ceo
6 years ago

It's worth noting this is an issue that started with and exists in 4.0. (I used the beta for the demo mostly because of the convenience since I didn't have any plugins, etc. enabled on my test site to create any potential conflicts.)

#4 @afercia
6 years ago

Worth nothing the Attachment Details div has role="checkbox" tabindex="0" so it's focusable and announced as "checkbox" but of course is not "checkable". This is exactly what @ceo video shows: VoiceOver focuses that div while seems NVDA doesn't.
Anyway, as far as I can see, that div was meant to provide some information about the image currently being edited since it has an aria-label attribute with the image title or image file name.
That would be probably more appropriate on the h3 heading using screen-reader-text, something like

<h3>Attachment Details <span class="screen-reader-text">{image title or image filename}</span>
	<span class="settings-save-status">
		<span class="spinner"></span>
		<span class="saved">Saved.</span>
	</span>
</h3>

This ticket was mentioned in Slack in #accessibility by ceo. View the logs.


6 years ago

#6 @johnbillion
6 years ago

  • Milestone changed from Awaiting Review to 4.1
  • Version changed from trunk to 4.0

@helen
6 years ago

#7 @helen
6 years ago

  • Keywords has-patch needs-testing added

This affects two things: the attachment details sidebar when in the insert media modal, and the whole modal when in the standalone media library (that is, the one that is accessed from the main admin menu). Worth testing both, before and after the patch. tabindex and the data-id remain, can add/remove attributes as needed.

#8 @ceo
6 years ago

Tested patch and I can now see the Attachment Details heading and get inside of the form fields when uploading new media from the post screen.

In the Media Library itself (via the main navigation), I can get to the form fields as well and edit things, which was not possible before the patch (and one of the main reasons I never used the Media Library because it was all but unusable with a screen-reader).

I also went through and tested the nightly and patch using the Media Uploader from the main navigation (which I did because I read the comment wrong initially, oops), but for what it's worth I can access the form fields when editing the media from there. It's not an altogether easy process.

Anyway, thank you @helen!

Last edited 6 years ago by ceo (previous) (diff)

#9 @helen
6 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 30483:

Media a11y: Don't set role=checkbox for the attachment details view.

Some unnecessary attributes were inherited from the attachment view, which created difficulties with screen readers.

fixes #30390.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


4 months ago

Note: See TracTickets for help on using tickets.