Designing Accessible Keyboard Focus States With CSS
A small CSS decision can have a much bigger impact on how easily someone is able to navigate your website.
We can adjust a property's outline’s width, style and color with the outline property.
outline: [width] [style] [color];
Sometimes developers use this property to completely remove the outline an element might have on focus. For example:
button:focus { outline: none;}
It feels like a small design request. A designer might not want an outline on focus and the page might not match the mockup. A developer takes the request, adds 3 lines of code and removes the outline. The page passes automatic accessibility checks and the team believes the task is done. However, the little outline has a big accessibility task. When the outline is gone, some people may not be able to use the page at all. This article will cover why the outline is important for accessibility, WCAG...
Copyright of this story solely belongs to hackernoon.com. To see the full text click HERE
