Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#42055 closed defect (bug) (fixed)

Customize Themes: improve the Theme details modal accessibility

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.8
Component: Customize Keywords: has-patch
Focuses: accessibility Cc:


When using role="dialog" on a "modal", Windows screen readers switch to "forms mode", that is arrow keys navigation doesn't work and only the Tab key works.

This is because a "dialog" is expected to contain mostly interactive content, such as form inputs, buttons, etc., with a specific task users have to accomplish. If a dialog contains also text, it should be associated with a form element using aria-describedby otherwise the screen reader will just ignore it.

However, modal dialog are often used for "mixed" content (interactive elements and blocks of text) or also for just text. In this case, the Theme detail modal contains both interactive elements and lots of tet with information about the theme.

A common technique in these cases is to keep the benefits of the dialog role but also switch the modal content back to role="document". Basically, when using role="dialog" there's always the need to evaluate the nature of the dialog content.

  • exclusively or mostly interactive content: keep just the dialog role an associate any text with aria-describedby to the proper form controls
  • mixed content: switch back to document role or re-evaluate if the dialog role is appropriate to begin with

See the note "When a dialog opens, focus placement depends on the nature and size of the content."

See also:

Id also propose to standardize this behavior between the Theme details modal in the Customizer and the one in the Themes screen.

Attachments (1)

42055.diff (3.0 KB) - added by afercia 7 years ago.

Download all attachments as: .zip

Change History (3)

7 years ago

#1 @afercia
7 years ago

  • Keywords has-patch added; needs-patch removed

in 42055.diff

  • switch back the Theme details modals content to role="document"
  • standardizes the modals interaction making the one in the Themes screen work as the one in the Customizer
    • adds role="dialog"
    • adds an aria-label "Theme Details"
    • makes the modal overlay focusable
  • set initial focus on the Themes screen modal overlay rather than the primary button

Note: the patch strips out some trailing spaces.

#2 @afercia
7 years ago

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

In 41658:

Accessibility: Improve the Theme Details modal accessibility.

  • sets the modal content to role="document" to make screen readers switch back to browse mode
  • standardizes the Themes screen and Customizer modals interaction
  • Themes screen modal: sets initial focus on the modal overlay instead of the primary button, avoiding to "skip" content for keyboard and screen reader users

Fixes #42055.

Note: See TracTickets for help on using tickets.