WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#30706 closed defect (bug) (fixed)

Add aria-describedby to autofocused fields

Reported by: joedolson Owned by: azaozz
Milestone: 4.3 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch
Focuses: accessibility, administration Cc:

Description

There are various areas in the WordPress admin where autofocus is used to push focus to a particular location on a screen. These need to be reviewed to address whether the context is clear to screen readers, and add an appropriate aria-describedby attribute so that the context of the focused field is adequately clear.

I'll address this early in the 4.2 cycle.

Attachments (2)

30706.patch (1.1 KB) - added by joedolson 5 years ago.
Add aria-label to header image control.
30706.diff (1.1 KB) - added by obenland 5 years ago.

Download all attachments as: .zip

Change History (14)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


6 years ago

#2 @azaozz
6 years ago

  • Keywords 4.2-early added
  • Milestone changed from Awaiting Review to Future Release

#3 @johnbillion
6 years ago

  • Version trunk deleted

#4 @iseulde
6 years ago

  • Keywords needs-patch added

#5 @obenland
5 years ago

  • Owner set to azaozz
  • Status changed from new to assigned

#6 @obenland
5 years ago

  • Keywords 4.2-early removed
  • Milestone changed from Future Release to 4.3

#7 @joedolson
5 years ago

Notes: it appears that the function install_theme_search_form(), which used autofocus is no longer used. It may be worthwhile to go through and remove the old code. When the theme search was replaced, it looks like all the add_action() calls in theme-install.php were just commented out, but the code hasn't been pulled out.

Most of the uses of autofocus appear to be in the customizer or tinymce at this point; it appears that most of the search forms that used to take autofocus have been replaced in recent versions.

In the customizer, I think that the button labels *may* be sufficiently clear, but confirmation of location would probably be valuable. For the header image, all that's read is "Add new image". You have just activated the link "Header", but confidence that you're in the right place would be beneficial.

The background image is theoretically fine, because that control includes a label. But a button with a label only reads out the label, and not the button text.

Patch adds an aria-label to the Header image button that gives context.

I'm not sure where to go to address the background image. This could be solved by adding an aria-labelledby with two ID references - one to the label and one to the button. Or it could be solved with an aria-label that provided full context.

The third autofocus area in core is the Widgets panel; right now, that doesn't really seem to do anything - focus is actually placed on the back button in the customizer, not the widgets panel. I think that if the section title received focus, that would be just fine.

@joedolson
5 years ago

Add aria-label to header image control.

#8 @joedolson
5 years ago

  • Keywords has-patch added; needs-patch removed

#9 @obenland
5 years ago

@joedolson, is the patch all that needs work? You mentioned reviewing "various areas in the WordPress admin".

#10 @joedolson
5 years ago

Most of the areas that used to use autofocus seem to be gone, so there's less that's relevantt. It turns out that there isn't a lot of autofocusing going on in the WP admin anymore, at least, not that I could find by searching for 'autofocus'.

Unless more autofocus has been added in the last 6 weeks; I haven't checked that.

#11 @obenland
5 years ago

Do you want to add something for background and widgets as well, or is headers the only place where we need more context?

@obenland
5 years ago

#12 @obenland
5 years ago

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

In 33158:

Better context for autofocused elements for screen readers.

Props joedolson for initial patch.
Fixes #30706.

Note: See TracTickets for help on using tickets.