Accessibly Hiding Focus Outlines

1 · · Aug. 9, 2020, midnight
This article was updated on 13 August 2020 to include performance considerations with the Javascript solution. By default, browsers provide styling for elements when they receive focus. This varies from browser to browser, but is typically an outline around an element. In Chrome, the focus style manifests as a blue glowing outline. In Firefox it’s a thin dotted outline that inherits the element’s colour. The focus ring (as it’s commonly known) should be regarded as a feature, not a bug. It’s esp...