Menu icon Foundation
Maybe add an Hide-text class ?

Hello.
In all my website project I always add this class to my theme:

Maybe it would be a good idea to add it to Foundation? I use this to have my website accessibility compliant.
Thanks.

.hide-text{
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
            

         

hide textutility classesaccessibility

Hello.
In all my website project I always add this class to my theme:

Maybe it would be a good idea to add it to Foundation? I use this to have my website accessibility compliant.
Thanks.

.hide-text{
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Cool. We actually have a class for this already:

/* Screen reader-specific classes */
  .show-for-sr {
    @include element-invisible;
  }
  .show-on-focus {
    @include element-invisible;

    &:focus,
    &:active {
      @include element-invisible-off;
    }
  }

Gary Meehan over 4 years ago

Hey Raifi, should this class be in the visibility.scss component?

Rafi Benkual over 4 years ago

Hi Gary, they are in there as of 5.5.1.

Zackery Gianotti almost 4 years ago

I was not able to find this in the DOCs anywhere. Will it be added? (or did I just miss it?) I looked in typography, utility classes, and accessibility but was not able to find it. Searching for screen reader did not yield any results. (Except in the Forum of course!) Thanks for answering this question Rafi!

Rafi Benkual almost 4 years ago

I'm seeing it here: http://foundation.zurb.com/docs/components/visibility.html

<p class="show-for-sr">

and

<p aria-hidden="true">

Does that help?

Zackery Gianotti almost 4 years ago

Thanks Rafi. I guess I didnt realize it would be under visibility. Which makes sense in retrospect. Maybe it should also be mentioned in Accessibility since that is really what it is for. Just a thought. As always, I appreciate your assistance! - Cheers!