Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus style for any keyboard operable control #574

Closed
afercia opened this issue Apr 29, 2017 · 3 comments
Closed

Focus style for any keyboard operable control #574

afercia opened this issue Apr 29, 2017 · 3 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@afercia
Copy link
Contributor

afercia commented Apr 29, 2017

See WCAG 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
https://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

See also the looong conversation on #127, one of the points discussed there is that there are several ways to meet this requirement but color alone may be not enough. In most of the cases an additional indicator, like a shape, is required unless the color change is very, very, evident like a complete inversion of colors (colors that already have a sufficient contrast ratio).

As inspiration, a couple examples:

  • on Improve the inserter a11y #527 I'm proposing to just pair the inserter items hover and focus styles
  • other controls could use the WordPress "circular focus", see below for a quick experiment

circular focus experiment

@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Apr 29, 2017
@afercia
Copy link
Contributor Author

afercia commented May 19, 2017

Note that the "Understanding SC 2.4.7" notes make clear this WCAG requirement is not intended just for keyboard users, it's for everyone.

@jasmussen
Copy link
Contributor

Some work also being done in #904 and #942.

@mtias
Copy link
Member

mtias commented Aug 31, 2017

I am closing this one as most elements should have focus styles already, and any missing ones we should open specific issues for to keep it tidy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

No branches or pull requests

3 participants