Last, but not least, the track row acts as a button to start the playback. To review, open the file in an editor that reveals hidden Unicode characters. Some additional a11y improvements are that I apply the same effect on hover and on focus, like when going through the 'More by. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. no-focus-outline button :focus ) Īnd a video showing what it looks like when tabbing: Hide the outline using CSS only in and elements that descend from that class.ĬSS.Add a no-focus-outline CSS class to the element.I then applied it to one of the Spotify sites I work on. They take accessibility seriously and their player is a very good example to get inspiration from. as we're not forcing/redefining the focus ring for everything, but leaving it up to the browser to deal with it on links etc, you're seeing this discrepancy between regular.

In the past I have made the same mistake of hiding the outline altogether, but no more!Ī few months ago I came across a similar technique David Gilbertson describes, while inspecting the markup on . when in device toolbar mode, chrome uses a different -webkit-focus-ring-color to mimic what is actually used on android/chrome by default, which is different from the two-tone black/white default focus ring on desktop. The post explains some a11y-friendly alternatives to not display it, and show it when needed. It's a really good post about outline, that CSS property lots of devs tend to hide. Because you have 4 numeric attributes, you can have 3 ranges: min to low low to high high to max The optimum value us a number that can sit within any of those ranges. It’s a bit unintuitive at first, if you ask me. Last week I came across Removing that ugly :focus ring (and keeping it too). The default appearance is a small colored bar, and the color depends on these attributes.

Webkit focus ring color