Find a better alternative of { outline: none; }

Question

Find a better alternative of { outline: none; }

outloudvi opened this issue 4 years ago · comments

In 363a73d we removed outlines for focused elements due to design considerations. Since we have aria-label stuffs, we thought that the removal of outline would not affect accessibility a lot. However, as said by http://outlinenone.com/, it DOES have a huge effect on a11y. As a site that stresses a11y, we need to find a alternataive of outline.

Natalie Stroud · Answer 1 · Sat Jun 27 2020 10:34:29 GMT+0800 (China Standard Time)

Hello! I'd recommend keeping the outline for keyboard focus but if it's decided to keep them out for design purposes - change the design for an incredibly visible focus indicator (i.e. change background color on focus + hover)

How to Design Useful and Usable Focus Indicators

Hope this helps! Have a great weekend

Outvi V · Answer 2 · Sun Jun 28 2020 13:18:13 GMT+0800 (China Standard Time)

Thanks for your suggesstion, @stroudn1! We are also considering the visible focus indicator. Changing background color is a good idea. Also, currently we bold the text on hovering, so maybe we can just copy the :hover behaviour to :focus.