Search code examples
cssinternet-explorerwebborderoutline

Creating a browser agnostic or IE alternate internal button border for focus? (accessibility related)

Couple extra requirements I'm working under:

  • Needs to be reactive/mobile friendly

  • Needs to also be compatible with chrome, firefox, and ideally opera.

    <button class="outline">
Lol A button
</button>

button{
  background-color: blue;
  color: white;
  padding: 15px;
}
.outline:focus{
  outline: 2px solid white;
  outline-offset: -6px;
}

JS Fiddle example of what I'm doing now

Edit:

JS Fiddle Example of the trouble I'm having with past similar question answers

If you take a look at the second link and tab through the examples, possibly try changing some of the internal borders in the box class, you'll see that this option is pretty rigid, and I have failed to get a proper offset inner border with a sufficient gap from the outside edge.

In particular, 2px would probably be the minimum gap between the inner border and the outer edge. The intended use is like 4-6px in, so that there is a really clear border so I can create a 7.5:1 contrast ratio for high visibility of the focus box. In my particular use case, this is not possible with an external border without breaking the site color scheme, so it's really undesirable.

I'm kind of dubious about getting this to work as a generic solution across 3+ types of buttons as well, and also looking nice on mobile.

Additionally, if the correct answer here is just, "that's impossible you need to do something else entirely," that's fine as long as it really is true. I don't have the CSS experience to know for sure.

Solution

  • I was never able to find a solution like what I was looking for. Instead I ended up doing this:

    box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;

    Basically, you have to use a box shadow to mimic an outline, so I used two box shadows that match the colors/look of the button to create the same effect with an expansion of the button. This meets accessibility contrast requirements by sandwiching a color band in between the button and the outer band. As long as this inner band and the button are different enough in contrast, and the outer band matches the button, or another high contrast color.

    Not really what I wanted, but there's not a lot (any) of other options that work in the context of this problem (older IE compatibility) unfortunately.