Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Result and recommended action
Summary of results
At the start of testing, the new Media Manager was completely inaccessible to keyboard and screen reader users. Corrections made by @wilsonge during testing slightly improved some elements.
Failures and recommendations
1. Too much menu objects
The problem occurs on all backend pages. There are 5 different menu objects on the Media Manager page.
Currently there is no mechanism for quick access to these different menus for keyboard and screen reader users. Only mouse users can easily access these menus. The keyboard user must hit the tab key 26 times to move the cursor to the first object - folder or file.
2. An interactive object inaccessible to keyboard users
Grid views: Folder tree is not accessible. Info block is accessible for screen reader user only on browse mode (navigation through headers). More info: see below : 6. File/folder information accessible only for sighted users
3. Unexpected highlighting of objects
4. File Directory Treeview not accessible
The widget is not accessible from the keyboard. The user of the screen reader does not obtain any information about the structure of the folders.
5. Focus does not returns to the element that invoked the dialog
When a dialog modal window closes, the focus does not return to the element that invoked the dialog.
6. File/folder information accessible only for sighted users
Sighted users can associate folder/file information with the selected folder or file. Unfortunately, blind users do not have this possibility at all.
7. Unexplained meaning of icons
Option icons have their names accessible in the Accessibility tree. Unfortunately, neither the keyboard user nor the mouse user knows these names.
8. Screen reader announces the list, but does not announce the number of items
A group of options in the context menu is covered by list tags. But the screen reader does not inform the user how many items make up the list. Probably because of the complicated code.
9. Enter and Space keys do not activate the action buttons
When the screen reader is on, the Enter and Space keys do not activate the action buttons (Download, Rename item...) in the context menu.
10. Link used instead of checkbox
<div class="media-view-icons"> <a href="#" aria-label="Toggle select all" class="media-toolbar-icon media-toolbar-select-all"> <span aria-hidden="true" class="fa fa-square-o"></span> </a> </div>
Link “Toggle select item” should be a checkbox. Anachor is an incorrect tag at this point. It is not possible to communicate the status of the switch to the users of the screen reader.
<div class="media-browser-item selected"> <div class="media-browser-item-directory"> <div class="media-browser-item-preview"> <div class="file-background"> <div class="folder-icon"> <span class="fa fa-folder-o"></span> </div> </div> </div> <div class="media-browser-item-info">banners</div> <a href="#" aria-label="Toggle select item" class="media-browser-select"></a> <div class="media-browser-actions"> <button type="button" aria-label="Open item actions" class="action-toggle"> <span aria-hidden="true" class="image-browser-action fa fa-ellipsis-h"></span> </button> <!----> </div> </div> </div>
11. Screen reader does not announce folder/file names
When a folder or file is focused, the screen reader does not announce the folder/file name. The screen reader user does not get the necessary information, is confused. He only hears a message: "Select item visited link".
12. Keyboard user cannot open a folder
Only a mouse user can open a folder. To do this, you must double-click the cart (folder icon). This is a bad solution, also does not meet accessibility requirements.
13. Keyboard user cannot open a file to preview
Only a mouse user can open a file to preview. To do this, you must double-click the card (file thumb). This is a bad solution, also does not meet accessibility requirements.
14. Modal not have accessible name
The dialog box does not have an accessible name. Use aria-labelledby and title marker id
<div role-”alertdialog” class=”modal-dialog modal-sm” aria-labelledby=”modal-title-ID”> <div class=”modal-content”> <div class=”modal-header”> <h3 id=”modal-title-ID” class=”modal-title”>Rename</h3> <!---->
15. Inaccessible buttons in the modal window
In addition, the
16. Modals "Share the file" completely inaccessible for screen reader
Can we figure our way through this list in terms of what has/hasn't been done. I think the majority is still done (there's a few outstanding items I think). Things I think are left