0

I have an anchor tag that does not have any text in it and just uses the <i> element along with glyphicons. While doing accessibility testing I found out that anchor tags should have text. One strategy is to put the text and visibly hide it using CSS.

I hide it visually using this CSS:

font: 0;
line-height: 0;
color: transparent;

However, this makes the glyphicon go away as well. Is there a way I can just hide the anchor tag but keep the glyphicon as-is?

My achor tag is below for example:

<a class="something"><i class="glyphicons glyphicons-some-icon"></a>

Community
  • 1
  • 1
Anthony
  • 33,838
  • 42
  • 169
  • 278
  • for what i know there is no such feature where child element can ignore parent style ..http://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles and please correct me if im wrong –  Jun 02 '16 at 02:18
  • 2
    Why don't you add some text in a `` and then hide that instead? – 4castle Jun 02 '16 at 02:19
  • You're looking for `aria-label`. – SLaks Jun 02 '16 at 02:20
  • @SLaks won't I have to add an extra label with aria-label? – Anthony Jun 02 '16 at 02:24
  • @SLaks If I add `aria-label` I get an error `broken ARIA reference` – Anthony Jun 02 '16 at 02:27

0 Answers0