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
vince
vince3y ago
Doing some research, I've found this code snippet:
.hide-element {
border: 0;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip; rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.hide-element {
border: 0;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip; rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
This seems equally as ridiculous as the z-index method, but curious what you guys think
Coder_Carl
Coder_Carl3y ago
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
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !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.
<i class="fal fa-check-circle">
<span class="sr-only">Meaningful description</span>
<i />
<i class="fal fa-check-circle">
<span class="sr-only">Meaningful description</span>
<i />
` we can use this to label things appropriately when there is inconsistencies in screen readers also
vince
vince3y ago
Thanks!!
Want results from more Discord servers?
Add your server