text-indent for star screenreader text not sufficient

  • dina_fire

    (@dina_fire)


    12 years ago

    Hey, glad to see you leaving in screenreader text in the
    list items that contain the rating stars – that’s good coding! However, the text-indent style that is supposed to make it not display visibly on actual screens isn’t enough. You have it set to -500px, which just leaves a jumble of overlapping numbers and slashes floating awkwardly in the margins of the site I’m working on. I fixed it by adding this to my stylesheet:

    .ratings a { text-indent:-9999px !important; }

    which bumps it off of any screen size I know of. Alternately, you could use

    clip: rectangle 1px 1px 1px 1px;

    You should fix this in future versions!
    https://www.ads-software.com/extend/plugins/post-ratings/

Viewing 2 replies - 1 through 2 (of 2 total)

  • just puting text on another side of screen is not clean,
    I remove the text indent from css and put
    .ratings a { font-size:1px; }
    like that, you can’t see them, except if you zoom in a lot.
    it’s should just be fixed like that, for blind people terminal, the css is not recognized, so displaying the rating that way is a good idea

    Thread Starter dina_fire

    (@dina_fire)

    The font size trick won’t work for the same reason that font size styling is unreliable: people’s browser setting override your css. If someone with vision problems sets their browser to display text at 16 or 20 pts
    so they can read it, your screenreader text will be clearly visible. Also, I’m not convinced that 1px-sized text will be completely invisible. Using text-indent or clip is more reliable by far.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘text-indent for star screenreader text not sufficient’ is closed to new replies.