Make WordPress Core

Opened 5 years ago

Last modified 15 months ago

#34957 assigned enhancement

#a11y-focus: Standardizing the handling of :focus and :hover

Reported by: adamsoucie Owned by: adamsoucie
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: color-contrast
Focuses: ui, accessibility Cc:


After the discussion of 34876 with @mor10 and @michaelarestad, we've realized there are two main cases:

  • Times when the :focus and :hover states can be the same
  • Times when they need to be different

In order to tackle the general :focus problem we'll need to:

  1. Define which elements fall into which category
  2. Establish a standard implementation for each category
  3. Implement the new standards

This could quickly evolve into a larger project, but we want to start resolve the :focus/:hover to make sure that gets addressed. This ticket is intended to start the conversation and put the attention on :focus.

This is an important a11y issue, as 34876 shows there are still elements that lack a :focus state completely. As part of this plan, we'll identify those elements lacking :focus and address both the lack of :focus and the correct implementation at the same time.

Change History (10)

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

5 years ago

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

5 years ago

#3 @afercia
5 years ago

  • Milestone changed from Awaiting Review to 4.5
  • Owner set to adamsoucie
  • Status changed from new to assigned
  • Version changed from trunk to 4.4

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

5 years ago

#5 @adamsoucie
5 years ago

Based on today's a11y Slack chat, we're establishing :focus as the standard, with :hover being somewhat of an extension of :focus.

To quote Joe Dolson:

"One important thing to keep in mind about the difference between :focus and :hover is the type of action that initiates them; :hover is initiated by direct action (a user points at the item that will change) and :focus by indirect action (a user presses tab or changes focus, with no definite knowledge of where the changed item will appear). This is the key reason that :focus needs to be a strong and obvious change, where there can be more flexibility with :hover. (Although the perceivable characteristics obviously still need to be present.)"

Step 1 has been decided that :focus and :hover need to be different in all cases.

Moving on to Step 2, due to 34904. This provides us with the standard to implement. Once that's complete, we'll move to Step 3.

#6 @michaelarestad
5 years ago

Added a quick patch to #34904. Would love some feedback.

After that, I think we can go through each interactive element (starting with buttons, links, and form fields) and then move on to menus and other misc links to make sure the focus state change (background/text/border) is clear and consistent.

This ticket was mentioned in Slack in #core by jorbin. View the logs.

4 years ago

#8 @jorbin
4 years ago

  • Milestone changed from 4.5 to Future Release

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

4 years ago

#10 @afercia
15 months ago

  • Keywords color-contrast added
Note: See TracTickets for help on using tickets.