Thats easy to say but you can't really complain about something unless you have a suggestion. Why not come up with at least something that works and doesn't look like it came from the 90s. Any suggestions?
Sure, write your own focus style with CSS. We don't complain that browsers use an ugly font by default, we write CSS to apply a nicer one. There is no reason this shouldn't extend to accessibility features too. Look at this very site for examples.
"Thats easy to say but you can't really complain about something unless you have a suggestion."
Accessibility is a right. NOT a privilege. So there's an answer to your question that's simple and accessible and inclusive...
Style your focus indicators. It's been a thing for a long time now. I think that was made clear when I wrote;
"Don't forget to add the focus style back in and make it visible with a high contrast (at least 10:1)."
or
"Default outlines in most cases are not good enough if the user cannot see the outline due to age, degenerating eyesight, glaucoma, astigmatism, other macular/visual degeneration.
Again, make them visible!"
So I'll keep "complaining" about themes like Divi for WordPress that strip the focus indicator out of the theme, or designers that want to get rid of it for "aesthetics" sake, or "it looks ugly.", "Just use the default, that's good enough.", or "Why not come up with at least something that works and doesn't look like it came from the 90s."
Style your focus indicators. It's 2022 You can do a lot with CSS now. Stop removing focus.
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.
Thats easy to say but you can't really complain about something unless you have a suggestion. Why not come up with at least something that works and doesn't look like it came from the 90s. Any suggestions?
Sure, write your own focus style with CSS. We don't complain that browsers use an ugly font by default, we write CSS to apply a nicer one. There is no reason this shouldn't extend to accessibility features too. Look at this very site for examples.
"Thats easy to say but you can't really complain about something unless you have a suggestion."
Accessibility is a right. NOT a privilege. So there's an answer to your question that's simple and accessible and inclusive...
Style your focus indicators. It's been a thing for a long time now. I think that was made clear when I wrote;
"Don't forget to add the focus style back in and make it visible with a high contrast (at least 10:1)."
or
"Default outlines in most cases are not good enough if the user cannot see the outline due to age, degenerating eyesight, glaucoma, astigmatism, other macular/visual degeneration.
Again, make them visible!"
So I'll keep "complaining" about themes like Divi for WordPress that strip the focus indicator out of the theme, or designers that want to get rid of it for "aesthetics" sake, or "it looks ugly.", "Just use the default, that's good enough.", or "Why not come up with at least something that works and doesn't look like it came from the 90s."
Style your focus indicators. It's 2022 You can do a lot with CSS now. Stop removing focus.
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!