Page MenuHomePhabricator

MultiMediaViewer: Accessibility for keyboard users and screen readers
Open, LowPublic


This should take care of the most severe problems:

  • The thumbs should have aria-haspopup
  • The image displayed in the mediaviewer, possibly should copy over the alt attribute of the original image.. Although we might consider using aria-describeby=file description instead.
  • aria-hidden should be applied to all the content and interface elements outside the modal dialog when the light box is open. (difficult, because we have multiple divs and skins that need this that are direct children of body tag)
    • This should apply the inert and dialog hacks that ooui etc implements as well.
  • The content should somehow indicate that the user is no longer in the same 'view'. role=dialog or role=document (probably due to the FS and opaque nature of the view and separate content context of the view it should be document ???? verify)
  • The dialog/document needs a label (using aria-labelledby or aria-label) (where did the user end up ????)
  • When the dialog opens, remember the current focused element, put focus on the first focusable element in the dialog. When closing the dialog, restore the focus.
  • There are several interface buttons in MMV, that are not actual buttons. (role=button or <button> should be used). Things that take you away form the page can be <a> elements.
  • Image buttons require labels. Use aria-labelledby or aria-label if you don't want them to be visible.
  • div's need tabindex="-1" to make them keyboard actionable. They should respond to space and enter keys, as if they are clicks.
  • Use this file needs to have aria-haspopup
  • Use this file dialog needs equal amount of keyboard navigation love
  • mw-mob-image-category is a listitem, but the list that it includes is not a list. (use hlist)
  • view more in the license box needs aria love

Version: master
Severity: major



Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:51 AM
bzimport set Reference to bz62923.
bzimport added a subscriber: Unknown Object (MLST).

"div's need tabindex="-1" to make them keyboard actionable"

that should be tabindex="0" of course

Merging bug 66357:

Navigation buttons (next/prev, close, fullscreen) should be first in tab order (with an easy-to notice focused style) so they are easily accessible from the keyboard.

  • Bug 66357 has been marked as a duplicate of this bug. ***
Gilles subscribed.

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Updated the ticket as some of this has since been fixed. What mostly remains is how this is a bit of a dialog yet not really a dialog at the same time. (Its also a navigation action, and is in the back/next page cache, so this thing is a tad more complex).