Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flysi3000

Accessibility for Banners

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 post
Share on other sites

@joe_midi - sounds good to me, I'll run with that!

Link to post
Share on other sites

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 post
Share on other sites

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 post
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.

×