Jump to content
Search Community

Accessibility for Banners

flysi3000 test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

We just got a request to add some accessibility features to a banner. One request is to add a pause button to the banner so that the user can start and stop it to make the copy more readable. The other is to add hidden off-screen text for screen readers.

 

Has anyone ever had such a request? Of course, the pause button thing is easy, but I'm just wondering about the experience. And is there a recommended method for adding hidden text that is still detected by screen-readers? I know that using display: none; or visibility: hidden; will also remove it from screen readers - should I just use negative positioning?

 

Any suggestions would be greatly appreciated.

Link to comment
Share on other sites

  • 2 weeks later...

I've actually never heard of accessibility for banners, and I'm not sure how screen readers work when they get to iframe'd content, perhaps check the IAB site and see what they suggest?

 

But let us know what you do find out!

Link to comment
Share on other sites

  • Solution

Hello, just add my two cents! ;)

 

When hiding elements for screen readers, you really don't want to use text-indent: -9999px. That is because search engines like Google will take that as you trying to be sneaky and hide content from its bot, so you can take a hit on your SEO page ranking. Also using text-indent will trigger a focus indicator like a dotted outline that extends off the screen. So you would also have to add outline: 0 none transparent for that CSS rule to prevent that.

 

If it were me I would just use position:absolute and use left: -9999px. So if you need to show stuff for only screen readers, you can use the following instead:

.hide-text {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    outline: 0 none transparent; /* just in case this rule is on an anchor tag */
    overflow:hidden;
}

Or you could you CSS clip to hide your element:

.hide-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    outline: 0 none transparent; /* just in case this rule is on an anchor tag */
}

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...