Outline styles

Hi everyone,

I was talking to Jim and mentioned some ‘power’ focus styles I use in testing, and he thought others would like to use something similar.

I use the Stylus plugin with Firefox, and CSS like this:

*:-moz-focusring { /* change to :focus-visible for chrome */
    outline: 0 !important;
    box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1 !important;
    transition: all 0.2s ease-in;
    z-index: 1000;
    overflow: visible;
}

That uses box-shadow to create a solid dark blue ring with a light-yellow halo around it, which works on everything unless the layout hides an indicator.

That was converted to a site-style for this new technique in example 2:
https://www.w3.org/WAI/WCAG21/Techniques/css/C40#examples


That’s a user-agent side approach, the author-side requirement we’re working on is an enhancement to ‘focus visible’ that tries to define a minimum visibility level:
https://docs.google.com/document/d/1g9_WBgfhViWAaRFIWWt10CP5rBsEVIWm3vT1vWqrHvI/edit#


Kind regards,

-Alastair

--

www.nomensa.com<http://www.nomensa.com/> / @alastc