[Meta] Accessibility plan for Media Library Widget

Blocker is in!

When using a screen reader it only tells you the image file name and not the image title. It may be beneficial to include the visually hidden title of the image in addition to the file name to create a stronger user experience.

When reviewing the library - if the image thumbnails do not load, the window cuts off the text making it impossible to read the file name.

When using a screen reader, if you remove an image it says "button dimmed" and does not alert the user that the image has been removed.

Nice reviews Donna.

#9 - Good catch! We do need to provide feedback about the outcome of pressing the remove button. Tell the user which media item was removed. Also need to convey the outcome of adding media with the dialog. Maybe this can make use of #3020352: Create a new AnnounceCommand to call Drupal.announce on an AjaxResponse?

I noticed when opening a dialog, the focus doesn't move to the dialog. It needs to move to the dialog, otherwise the dialog isn't announced, and can't be dismissed with the escape key. Similar problem to #2805219: Some dialogs do not receive focus when opened?

Elsewhere, I filed an issue about confusing visual tabbing order - #3024184: Make the tabbing order match the visual reading order in MediaLibraryWidget.

Remember to tag issues. I didn't find this one until after updating the triage in the parent roadmap issue.

Bumping this to major based on what we've found so far.

I noticed the #3020716: Add vertical tabs style menu to media library, which wasn't tagged for accessibility. This issue introduces a brand-new vertical tabs implementation, and a dynamic message about the number of selected items. Many accessiblity issues need addressing here, and I've commented there about accessibilty aspects.

Just did some testing using VoiceOver. This is the list if things I found, dropping this here to make sure it doesn't get lost. Most of the issues can be fixed in the media library, some of these are issues we inherited from other places in core.

A. Media library specific issues:

1. ‘Add media’ in widget should be a button, not a link. It could use more information that this opens a dialog to select media items (#3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link).
2. The title of the dialog is 'Media library'. I think this could be more clear, like 'Select media items from the library' or something (#3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link).
3. Vertical tabs menu is not presented as navigation (#3035331: Improve keyboard focus behaviour of vertical tabs in MediaLibraryWidget).
4. Clicking vertical tabs doesn’t shift the user to the new content, next element becomes the ‘Select media’ button (#3035331: Improve keyboard focus behaviour of vertical tabs in MediaLibraryWidget).
5. Order of the checkbox and filename is wrong in the grid view
6. Aria live content '0 of 5 items selected' is read every time the user navigates in the dialog, not just when the selection changes.
7. The grid view contains a link you can't click
8. After adding a new media item the number of selected files is wrong, I've added a file and still it seems nothing is selected (#3034243: Improve selection text in Media Library).
9. After adding a new media item the focus shift to the dialog instead of the form of the added media item.
10. After saving the media item I'm returned to the library, but it is not announced that the item is saved and added to the selection.
11. After saving the new media item, the focus is set on the dialog. I would expect that the focus is shifted to the added item in the selection.
12. After selecting items from the library the focus shifts to the save button of the parent form. I would expect to be back in the widget to verify my selection (#3016807: Improve refocus on submit buttons of Media Library Widget modals / #3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link).
13. After clicking the hide/show weights link I am not sure what happened (#3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link).
14. The text 5 items remaining is part of the element description but below the add button. After changing the selection the number of remaining items are not communicated to the user (#3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link).

B. Inherited core issues:

1. When clicking the ‘Add media’ in the widget it doesn’t tell you that the dialog is loading (#2973140: Convey AJAX progress messages to assistive technology.).
2. The focus doesn’t seem to shift to the dialog to announce it, instead I hear the text ‘0 of 5 items selected’ (#2805219: Some dialogs do not receive focus when opened).
3. Dialog buttons are twice in the page

It would be nice to get some feedback on this initial list. Not sure if all of these are actually issues, nor do I have a solution for everything. I'm far from specialized in accessibility but definitely trying to learn.

Once we have a clear list of the actual problems and how to fix them we can start opening issues.

Created issues for the things I found. Still todo:

1. Order of the checkbox and filename is wrong in the grid view
2. Aria live content '0 of 5 items selected' is read every time the user navigates in the dialog, not just when the selection changes.
3. The grid view contains a link you can't click
4. After adding a new media item the focus shift to the dialog instead of the form of the added media item.
5. After saving the media item I'm returned to the library, but it is not announced that the item is saved and added to the selection.
6. After saving the new media item, the focus is set on the dialog. I would expect that the focus is shifted to the added item in the selection.

Can you please use more specific child issues? If there are 10 problems, use 10 child issues. There's a bit more admin overhead there but it will make reviewing this much easier, when we have to (a) triage must/should/could, and (b) assess whether the module passes the accessiblility gate.

Also, using separate child issues makes it easier to finish the quick wins, or identify novice tasks for contributors who would like to get involved in accessibility issues.

Remember to add the accessibility tag on the child issues.

#12.A.12 has two related issues in it. Which one is the implementation to fix it? That's what I mean by accessibility reviewers getting lost.

Copied the points from #12 to the issue summary.

#12.B.2

The focus doesn’t seem to shift to the dialog to announce it, instead I hear the text ‘0 of 5 items selected’ (#2805219: Some dialogs do not receive focus when opened).

This is conflating two issues which are already mentioned.

• "The focus doesn’t seem to shift to the dialog" - this is #2805219: Some dialogs do not receive focus when opened sure enough, and it was already in the issue summary before #12. Note the "to announce it" is a red herring. The issue is really about the focus shift, which affects all keyboard users regardless of whether a screen reader is used. The screen reader announcement just happens as consequence of the focus shift.
• "instead I hear the text ‘0 of 5 items selected’" - that's the same as 12.A.6

Updating IS about this.

Fixing issue shortcodes

Separated child issues for these, from #12.A.3 and #12.A.4

• "Vertical tabs menu is not presented as navigation." is now #3035408: Identify purpose of vertical tabs in MediaLibraryWidget dialog for assistive tech users.
• "Clicking vertical tabs doesn’t shift the user to the new content, next element becomes the ‘Select media’ button." Re-scoped #3035331: Improve keyboard focus behaviour of vertical tabs in MediaLibraryWidget

@seanb

Aria live content '0 of 5 items selected' is read every time the user navigates in the dialog, not just when the selection changes.

I haven't encountered this in my screen reader testing. Can you clarify what you mean by "every time the user navigates in the dialog"?

The grid view contains a link you can't click

I noticed this too. Bizarrely it has pointer-events:none on AND a click handler. Keyboard users and speech control users can operate it though, and it triggers an "Unsaved changes to the form will be lost. Are you sure you want to leave?" dialog.

Is what is the purpose of the link? It seems as if you don't want anyone to use it. If that's the case, remove the link.

I've started to break up #3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link into separate issues.

I think we can treat #3016807: Improve refocus on submit buttons of Media Library Widget modals as the issue for "After selecting items from the library the focus shifts to the save button of the parent form. I would expect to be back in the widget to verify my selection". There's already plenty analysis there.

These two are the effectively same, noted differently in #10 and #12.

• "Announce outcome of adding media via the dialogs"
• "The text 5 items remaining is part of the element description but below the add button. After changing the selection the number of remaining items are not communicated to the user."

I've combined them an filed #3035446: Inform assistive tech users about the outcome of using the MediaLibraryWidget dialog as the implementation issue.

I've finished splitting up these into child issues now. That leaves #3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link as re-scoped as for the button/link semantics.

Adding #5 to the issue summary, so it isn't lost.

When using a screen reader it only tells you the image file name and not the image title. It may be beneficial to include the visually hidden title of the image in addition to the file name to create a stronger user experience.

I think that's down to the fact that when media entities are created, the entity title is auto-populated from the file name (or in the case of remote video, from the youtube/vimeo name). The actual entity title field is hidden from the entity form. Having said that, image media items have an alt text field.

The experience here rather depends on content editors giving their files sensible names before uploading them. I have a rather pessimistic view about content editors in that regard :-) If there are any improvements to be made here, it probably falls under the general usability topic rather than accessibility.

Moved #3035435: Make the show/hide row weights button more informative for assistive tech users. to the inherited core issues section. The issue applies to the equally to the "show row weights" in our tabledrag. Since the tabledrag is already used for most multivalue fields, it will be good to address those together in a holistic way, and avoid inconsistency.

Adding #6 to the issue summary so it doesn't get lost.

Adding details from #9 to the issue summary.

I couldn't replicate it the "button dimmed" in other screen readers though. It could do with steps to reproduce, and more investigation.

It would be good to double-check the list of issues from comment #18 at #3020716-18: Add vertical tabs style menu to media library to confirm which have been addressed. I was in some confusion about that last week. Anything left over from that can be noted here.

triage #3035316: ‘Add media’ in MediaLibraryWidget should be a button, not a link as a should have, added to parent.

I haven't started sorting the list here yet, the main Media Library roadmap is the canonical triage priority.

a11y triage - must-have #3016807: Improve refocus on submit buttons of Media Library Widget modals

Fixing tag

Starting a must/should/could triage.

looked through must-haves on parent road map, found some must-haves there now have needs a11y review

triaged a big batch, quite a lot classed as should/could have

Dialog buttons are twice in the page

This one is a known compromise. I filed #3037781: Accessibility problem with invisible buttons in AJAX dialogs to see if we can improve on it. Not a blocker for media library.

.

Created a new issue #3039829: Remove link to media item from media library view. for

The grid view contains a link you can't click. See comment #25.

#2805219: Some dialogs do not receive focus when opened was listed here, but is no longer relevant, since #3035446: Inform assistive tech users about the outcome of using the MediaLibraryWidget dialog fixed it — confirmed by @seanB in #2805219-21: Some dialogs do not receive focus when opened.

Moved many completed issues to the "Done" column.

Adding #3041111: Items selected from the media library cannot be reordered by weight as a should-have.

Upon further discussion with @xjm and @seanB, upgrading #3041111: Items selected from the media library cannot be reordered by weight to a must-have. We can downgrade it later if the accessibility maintainers agree.

Replaced #3041111: Items selected from the media library cannot be reordered by weight (now closed as a duplicate) with #3039829: Remove link to media item from media library view. in the must-have list.

#3035408: Identify purpose of vertical tabs in MediaLibraryWidget dialog for assistive tech users. has landed!

Removing #2113931: File Field design update: Upload field. from the IS, since it has been de-scoped in the parent roadmap.

Under Should have,

Order of the checkbox and filename is wrong in the grid view

It looks like this has been resolved by adding the filename into the announcement of the checkbox, and perhaps can be removed from the list?

Reviewing the triage list:

• When using a screen reader, if you remove an image it says "button dimmed" and does not alert the user that the image has been removed. See comment #9 and 10. Announce outcome of pressing the remove button on a media item UPDATE: as far as I can tell, this is no longer an issue. When something is removed, an announcement, "[filename removed]", is made.
• #3020716: Add vertical tabs style menu to media library. This issue introduces a brand-new vertical tabs implementation, and a dynamic message about the number of selected items. Some accessibility issues were addressed there, and other follow-ups have been identified here.UPDATE: I think this is resolved in other issues and is no longer a concern
• Aria live content '0 of 5 items selected' is read every time the user navigates in the dialog, not just when the selection changes. UPDATE: I'm not experiencing the same, so perhaps it has been resolved?
• After saving the media item I'm returned to the library, but it is not announced that the item is saved and added to the selection. UPDATE: this is still an issue. I couldn't find an issue for this, so we may still need to create one
• After saving the new media item, the focus is set on the dialog. I would expect that the focus is shifted to the added item in the selection. UPDATE: this appears to have been resolved. Focus is now set to the added item in the selection.

Some of the issues have indeed been fixed. Updating the IS.

When using a screen reader, if you remove an image it says "button dimmed" and does not alert the user that the image has been removed. See comment #9 and 10. Announce outcome of pressing the remove button on a media item UPDATE: as far as I can tell, this is no longer an issue. When something is removed, an announcement, "[filename removed]", is made.

Is fixed in #3035446: Inform assistive tech users about the outcome of using the MediaLibraryWidget dialog

Add vertical tabs style menu to media library. This issue introduces a brand-new vertical tabs implementation, and a dynamic message about the number of selected items. Some accessibility issues were addressed there, and other follow-ups have been identified here.UPDATE: I think this is resolved in other issues and is no longer a concern

We still have #3035331: Improve keyboard focus behaviour of vertical tabs in MediaLibraryWidget but I think that is the last one.

Aria live content '0 of 5 items selected' is read every time the user navigates in the dialog, not just when the selection changes. UPDATE: I'm not experiencing the same, so perhaps it has been resolved?

This has been improved in #3033943: MediaLibraryWidget selected items count is not conveyed to assistive tech correctly

After saving the media item I'm returned to the library, but it is not announced that the item is saved and added to the selection. UPDATE: this is still an issue. I couldn't find an issue for this, so we may still need to create one

Created #3081526: Add announcement after clicking 'Save and select' in the media library.. Still need to be triaged.

After saving the new media item, the focus is set on the dialog. I would expect that the focus is shifted to the added item in the selection. UPDATE: this appears to have been resolved. Focus is now set to the added item in the selection.

Just looked at the code for now, but I can't remember us changing anything that should have fixed this. It also seems to conflict with: After adding a new media item the focus shift to the dialog instead of the form of the added media item. Merged those 2 things in new issue #3081523: Improve the focus behaviour after clicking 'Save and select' in the media library., still need to be triaged.

I think we're nearing a point where we can flatten this onto the main meta!

I made these two issues "should-haves" based on @rainbreaw's reviews here and there:

• #3081526: Add announcement after clicking 'Save and select' in the media library.
• #3081523: Improve the focus behaviour after clicking 'Save and select' in the media library.

That leaves these two three other issues that might still need to be filed:

• When reviewing the library - if the image thumbnails do not load, the window cuts off the text making it impossible to read the file name. See comments #6-7.

• Order of the checkbox and filename is wrong in the grid view

• When using a screen reader it only tells you the image file name and not the image title. It may be beneficial to include the visually hidden title of the image in addition to the file name to create a stronger user experience. Comments #5 and #29. Maybe a general usability issue rather than accessibility

I tried reproducing #6/#7 with the intent of creating an issue, but I could not reproduce the symptoms. It's quite possible this has been addressed in the year since it was reported, but I didn't want to remove it from the issue summary (in "Should-have") as I may have an incorrect understanding.
This is what I see in the media library widget dialog:

This is what I see in the media library field in the node form:

When reviewing the media library, close icon is coming in node form, if u click close icon it automatically deleted i think may be we can provide alert the user that the image has been removed.

Thanks @J.Gayathri! Could you file a dedicated issue for that accessibility bug?

Ideally (if it's alright with the accessibility maintainers) I would like to close this issue and track all the accessibility work that's needed still on the main roadmap. (That way we don't have to check for issues in two places.)

#62: There is already a message conveyed to screen reader users, when the item is removed. Do you mean a visible message?

#63: Some stuff is still marked needs triage. IIRC there was an early issue about the tabs in the dialog, but I'm not sure if all issues there got follow-ups. We can close this plan after checking that one.

Media Library is now a stable core module and has been since Drupal 8.8. I think it's therefore time to close out this meta in favor of a consolidated #2825215: Media initiative: Roadmap, which is part of the Easy Out of the Box Initiative. I've moved the outstanding issues from this one's summary over to that meta.