Make WordPress Core

Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#21326 closed defect (bug) (fixed)

Screen Options in Admin - Accessibility Enhancement

Reported by: grahamarmfield's profile grahamarmfield Owned by:
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: Accessibility Keywords:
Focuses: Cc:


Screen Options are present on most pages in the admin area but accessing them is a little counter-intuitive for screen reader and keyboard users.

When the screen options link is activated the panel opens out and it is clearly visible for those who are sighted. But keyboard-only users will need to reverse tab in order to access the options.

Blind users with screen readers will typically click on the Screen Options link but will receive no audible feedback that anything has happened. There is no prompt either that they need to reverse tab to access the (now available) input fields/links.

Can I make a suggestion:

When the screen options link is actioned whilst the panel is closed, open the panel and place the focus either onto the heading at the top of the screen options, or onto the first input field or link in the screen options panel.

That way the screen reader user will receive an audible prompt and will (hopefully) realise that they're accessing the options. They will also then be tabbing through the options in a logical manner.

Obviously when clicking the screen options link when the panel is open should put focus onto the screen options link.

This new functionality would be especially helpful on the Widgets page where the accessibility mode has to be enabled in this way.

Happy to discuss.

Attachments (1)

21326.patch (3.1 KB) - added by azaozz 12 years ago.

Download all attachments as: .zip

Change History (12)

#1 @cannona
12 years ago

  • Cc cannona@… added

As a screen reader user, I agree that this would be helpful. It might also be helpful to add an aria-expanded and aria-controls properties to the Screen Options link.

#2 @ceo
12 years ago

  • Cc ceo added

I'll toss my virtual hat into the ring on this one as a screen reader user.

Ideally, what I would LOVE to see is an "accessibility mode" added to the screen options on a few other pages aside from merely the widgets screen, e.g. the custom menu.

12 years ago

#3 @azaozz
12 years ago

In 21326.patch:

  • When opening Screen Options or Help slide-downs, place the focus on the wrapper div (so the next tab would go to the first checkbox/radio button in the options).
  • Added aria-expanded and aria-controls properties.
  • Added aria-controls to the tab switching links on the Help tab.

#4 @azaozz
12 years ago

  • Milestone changed from Awaiting Review to 3.5

#5 @azaozz
12 years ago

In [21457]:

Accessibility: enhance the Screen Options and Help tabs open/close, see #21326

#6 @grahamarmfield
12 years ago

Sounds good, would be great to be able to test that somewhere.

#7 @helenyhou
12 years ago

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

Per UI chat today, seems fixed.

You should be able to test in the betas now, as you also can if you run trunk via SVN or a nightly installation using the Beta Tester plugin.

#8 @azaozz
12 years ago

Looks good here. Also added scrollIntoView on focusing the open/close buttons in [22249].

#9 @grahamarmfield
11 years ago

This is much better than it was, but it could be even better for screen reader users.

In the help panel there is a series of tab links on the left. When each of these links receives focus they reveal the appropriate panel. This is great for sighted users, but screen readers users are not aware that the panels are changing. The tab links are clickable which is how mouse users can change the panels. However, screen reader users clicking on the tab links would then expect the next items in the content flow to be the text they are looking for. But it isn't, and the actual text for that tab link is actually after the For more information links.

Can the keyboard focus be transferred into the appropriate Help panel when the tab link is clicked/actioned? I believe this would make more sense. Shouldn't be any worse experience for mouse users.

I've tested the Screen Options functionality and it's much better than it was.

#10 @grahamarmfield
11 years ago

Have now tested this using Dragon Naturally Speaking (speech recognition software). The Screen Options functionality works fine. There is a small snag with Help, in that when I say "Click Help" it opens the Help menu within the browser without giving me an option to click the WP Help link.

No idea why that should be the case. However once I've mouse commanded and clicked the Help menu open the functionality all works well with Dragon.

#11 @grahamarmfield
11 years ago

Apologies, I realise that the Help panel hasn't really changed at all from 3.4.2 and that the subject of this trac (which I raised myself) refers to the Screen Options - which is now working great.

I intend to raise a separate trac ticket for a11y emhancements to Help Panel - but I realise that won't happen in 3.5.

I promise to try not to scope-creep tickets in future.

Note: See TracTickets for help on using tickets.