Accessible hidden elements
I was using the fieldset tag and noticed that it needs a legend tag. As I don't want to show the legend tag text, what's the best way to hide this while remaining accessible? I've seen somewhere to set the z-index to a ridiculously low negative number but that just seems odd, but I'm not sure if I set the display to none if it would remove it from being accessible? Thanks!
3 Replies
Doing some research, I've found this code snippet:
This seems equally as ridiculous as the z-index method, but curious what you guys think
the above snippet doesnt hide the information from assistive technology but will remove it from a sighted user
I have a class of sr-only that I use through-out my projects that makes sure they are hidden with the use of !important
adding this class to words that are shown next to an icon can give more context to someone navigating with assistive technologies
i.e.
`
we can use this to label things appropriately when there is inconsistencies in screen readers also
Thanks!!