Kevin Powell - Community•2y ago

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•2y 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•2y 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•2y ago

Thanks!!

Gaming

Programming

Accessible hidden elements