Grow your CSS skills. Land your dream job.

Getting a screen reader to ignore text

  • # November 19, 2012 at 9:03 pm

    I’ve started rolling out icon fonts on the site I work for, but there’s a problem: I need IE7 support. Were it up to me we’d accept the visual loss for IE7 users. However, it’s not and word has come down from on high that IE7 users need to see icons.

    This leads me to one issue: How do I stop screen readers from reading out text? In order to get them to show in IE7 I need to actually have them in the markup. Which is kind of annoying as a link that looks like a settings cog and says “Settings” will be read as “S Settings”. Small thing but annoying.

    Since I can’t use pseudo-elements like :before and :after, is there a way I can make screen readers ignore the S (which will be in a SPAN tag)?

    [solution:]

    Using `aria-hidden=”true”` with `speak:none;` in the CSS gets me 99% of the way there. Is it perfect? No, but until I can drop IE7 I don’t think that’s going to happen.

    # November 20, 2012 at 5:22 am

    hmmm… my best guess would be set its default state to display: none then have a media query for visual devices set to display the icon front text.
    http://www.w3.org/TR/CSS2/media.html not sure if it will work but worth looking at.

    Alternatively take a look for a polyfil out there for IE7 to enable :after :before aswell

    # November 20, 2012 at 5:51 am

    aria-hidden

    would be one way but I’m unsure about IE7 support.

    http://css-tricks.com/html-for-icon-font-usage/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".