SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Location
    France
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tips to provide accessible content but hide it from non-disabled browsers

    Hi folks,

    One more time I'm wondering if what I usually do to provide accessible content is good or not. Is it really accessible, is it visible for search engines, isn't it seen as spamdexing ?...

    Help me !

    Well, here is a situation and my solution. Is it good ? what do you do in that situation ?...

    I have a header that is treated as an image. This image conveys text but for me, it's not an illustration, therefore it shall not be treated as an <img>.
    What I do :
    HTML Code:
    <h2><span class="accessibility">Last News</span></h2>
    with this stylesheet :
    HTML Code:
    h2 {
    background:url("last-news.png") no-repeat;
    height:60px;
    width:180px;
    }
    .accessibility {
    font-size:0;
    height:0;
    left:-9999em;
    overflow:hidden;
    position:absolute;
    top:-9999em;
    width:0;
    }
    With this technique, the text content is here (so it's accessible), and a modern browser hides the text and replaces it with the image. But what about the search engines ? Do they see the text ? Do they think it's spamdexing ?
    What do you think of this "accessibility" class ?

  2. #2
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, the principle behind what you're doing is correct!

    I use it all the time. The search engine will see the text and I'm pretty sure it won't get annoyed at your using this technique.

    A better method is it use 'text-indent:' and then something like -9999em

    This way you dont have to use position,left,top or overflow.

    Here's an example for a site I reccently created, note: it's for the main logo of the site.

    " #header > #logo{
    width:100px;
    height:90px;
    text-indent:-6000px;
    background:url('../images/logo.png') no-repeat;
    float:left;
    }"

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    McBenny, What you did is fine. Remember search engines see the code, not the web page. So it sees the words, not what you are doing to them. As long as you aren't putting female/male body part names, drugs to enhance those parts, or other drugs you are fine. i disagree with many with using text-indent. However you can make the class:
    Code css:
    .accessibility {
    left:-9999em;
    position:absolute;
    }
    What you are doing is actually called [css] image replacement
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    One problem with this:

    if the image doesn't load, or if the user has images turned off (slow wi-fi connection, using a mobile, whatever), there's nothing to read. Sure, it's accessible to screen readers and the googles, but it's not accessible to everyone (unless they turn the CSS off too).

    I rather like this version of image replacement so long as your images are large enough

    McBenny:
    you have
    .accessibility {
    font-size:0;
    height:0;
    left:-9999em;
    overflow:hidden;
    position:absolute;
    top:-9999em;
    width:0;
    }

    be aware there are two problems in there you may or may not run into: first, Opera has a limit (in pixels) for page widths and heights (!). I've found Opera showing stuff I'm pulling up with -9999em on the screen because 9999em hits that limit. Also Konqueror web browser has a similar issue with left -9999em: it can and will sometimes wrap that around to the far right side of your page, giving you a ginormous scrollbar.

    Both those are taken care of by reducing the ems to -999 (just three 9's). I know, I've run into all of those problems : )

    Second issue, one I don't know how relevant it is now: Window-Eyes screen reader for Windows used to (not sure about versions after 7) read out stuff that was positioned above the top of the page first, before the rest of the page, and then it would announce it again when the user got to the real location.

    To avoid this I tend to stick to using left rather than also top (in some places I've needed to use top as well but most of the time left is good enough).

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Location
    France
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    be aware there are two problems in there you may or may not run into: first, Opera has a limit (in pixels) for page widths and heights (!). I've found Opera showing stuff I'm pulling up with -9999em on the screen because 9999em hits that limit. Also Konqueror web browser has a similar issue with left -9999em: it can and will sometimes wrap that around to the far right side of your page, giving you a ginormous scrollbar.

    Both those are taken care of by reducing the ems to -999 (just three 9's). I know, I've run into all of those problems : )

    Second issue, one I don't know how relevant it is now: Window-Eyes screen reader for Windows used to (not sure about versions after 7) read out stuff that was positioned above the top of the page first, before the rest of the page, and then it would announce it again when the user got to the real location.

    To avoid this I tend to stick to using left rather than also top (in some places I've needed to use top as well but most of the time left is good enough).
    Well thank you very much for this information, that's typically what I wanted to hear in exposing my technique. I'll adapt my class to match your requirements.

    One thing I was wondering was the font-size. Doesn't a search engine consider that the text may not be indexed as its size is 0 ?

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Doesn't a search engine consider that the text may not be indexed as its size is 0 ?
    Since that was at one time a popular blackhat technique for spamming search engines, I can't say they don't react at all to that (I still haven't figured out how, since the spiders themselves do not look at the CSS sheet at all).

    So far as I know it would be indexed, but again, sighted users without the image can't read a 0px font size : ) Lindsay method has that problem.

    Here's what you want to do with any webpage you've built:

    View it with images and Javascript and CSS off. This is how a search engine sees your page. (well, they'll read your alt text, but they'll also index the image file so it appears in their image searches)

    View it with CSS on and images off. This is a user with a slow connection or a device they've turned images off so they don't spend 30 minutes loading your page.

    View with CSS and images on but Javascript off. This is how a user without JS sees your page. It doesn't have to look pretty, but the forms and links must work, and the text must be readable. Basically, the page has to function.

    A "typical" screen reader user with a non-ancient reader will get your page mostly like it is with CSS and images off, except they can tell the semantics of the page (headers, lists, tables, forms, links and non-links), and display: none and visibility: hidden are honoured by many readers (so that's why people use negative text-indent: this is still read out by screen readers fine).

    More screen reader users have Javascript on by default than not (they still surf through a browser), but they come across more sites that don't work with a reader with Javascript so more screen reader users may have it turned off than the general population (or selectively turned off per domain).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •