Admin Accessibility: Adding attachments can be problematic

[carlj11]

Admin mode, adding attachments

• create a media embed block
• click “add attachment”
• choose a thumbnail size, or choose whether to show the title; no way to choose the media to be added

A set of choices opens but the screen reader has no idea that the page has changed, so you need to code this semantically like a modal / dialog (i.e. it doesn’t need to look like one visually).

• add role="dialog" to the container • add aria-labelledby=“id-of-popup-title” to the container
• if a message should be announced (say instructions or whatever) you can add aria-describedby=“id-of-message” to the container as well
• add this to the DOM
• shift focus to a focusable item inside the popup container
  • if it’s just a message then this is the close or OK button which dismisses the popup
  • if there are other things in there like options to choose, then focus on the first of these (which should of course be properly labeled)

• be sure that when the popup is closed / dismissed, focus returns to the “add attachment” button, or whatever control launched the popup

There is now a dialog element in HTML which has become widely supported which may be useful.

See: ARIA: dialog role - Accessibility | MDN