Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
But hear me out, if you are careful box-shadow is far better as a focus indicator as you can add curves to corners and even animate it!
Now sadly you can’t just do it without thought, there are a few hoops you need to jump through to fall back gracefully for older browser and account for high contrast mode etc, but it is a viable way to make focus indicators beautiful!
Yet again, :focus-visible requires some careful thought for fall back as support is good but not 100%, but :focus-visible is also the modern way to do focus indicators so they don’t appear accidentally when you tap on mobile etc.
Above all, remember this: even if something looks like it is ugly, if it improves accessibility then it also improves usability, and end users are more bothered about usability and actually being able to complete an action than aesthetics if you HAVE to make a choice! ❤️
"box-shadow is a versatile property which web developers can use to achieve various different glow and nested border effects. However, this property is reverted in forced color modes. If you use box-shadow to denote state this state information will be lost in forced color modes unless you plan accordingly." -blogs.windows.com/msedgedev/2020/0...
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Hence why the “few hoops”, this certainly isn’t a full tutorial, however the trick is that you set a transparent outline and a couple of media queries so that when the box shadow is deactivated by high contrast (for example) a standard outline is show. Maybe I should do a full article at some point.
Thanks for sharing, I really should have made that more clear that you can’t just rely on shadows!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Yes…my suggestion is to…remove outline! 🤣
But hear me out, if you are careful box-shadow is far better as a focus indicator as you can add curves to corners and even animate it!
Now sadly you can’t just do it without thought, there are a few hoops you need to jump through to fall back gracefully for older browser and account for high contrast mode etc, but it is a viable way to make focus indicators beautiful!
Yet again,
:focus-visiblerequires some careful thought for fall back as support is good but not 100%, but:focus-visibleis also the modern way to do focus indicators so they don’t appear accidentally when you tap on mobile etc.Above all, remember this: even if something looks like it is ugly, if it improves accessibility then it also improves usability, and end users are more bothered about usability and actually being able to complete an action than aesthetics if you HAVE to make a choice! ❤️
"box-shadow is a versatile property which web developers can use to achieve various different glow and nested border effects. However, this property is reverted in forced color modes. If you use box-shadow to denote state this state information will be lost in forced color modes unless you plan accordingly." -blogs.windows.com/msedgedev/2020/0...
Hence why the “few hoops”, this certainly isn’t a full tutorial, however the trick is that you set a transparent outline and a couple of media queries so that when the box shadow is deactivated by high contrast (for example) a standard outline is show. Maybe I should do a full article at some point.
Thanks for sharing, I really should have made that more clear that you can’t just rely on shadows!