Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Getting a screen reader to ignore text

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #40881

    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.

    #114865
    Paulie_D
    Member

    aria-hidden

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

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.