Enable CSS outlines
akselinurmio opened this issue · comments
Currently in our base styles (_base.scss) there is a global property outline: none; that disables all outlines on every element and pseudo-element. And yet we are not providing any alternatives to it.
I suggest that as a first step we remove that property and by doing that improve accessibility of our future sites a lot. The outline styles can of course be styled per-project basis, but that is often forgotten if no outline is visible in the first place.
Expected Behavior
All of our sites should be navigatable without any mouse, touch or cursor device.
Current Behavior
No current position on the page is shown when navigating with Tab key.
Steps to Reproduce
- Go to any site with outlines disabled.
- Press Tab key as many times as you like.
Context (Environment)
It's widely considered as a Bad Thing™ to disable outlines without providing an alternative. They can be styled or removed, but on every meaningful link or interactive element, there should be clear sign of the currently focused element.
Refer for example to:
👍 for the issue. I've always removed the outline on the accessibility-focused sites I've built and just used the browser defaults. Sometimes one might want to style them to match the theme of the site like you said, but typically speaking using the default provided by the browser is what users have learned to expect and thus is the most optimal solution from accessibility perspective.