WCAG link without text for an tag

Question

I am using an <i> tag to display social media icons and links. However, WCAG calls for having text or an img with alt attribute for compliancy.

I'd like to know if putting a title attribute on the <i> tag will be compliant:

<i class="this-is-the-icon" title="Icon Title"></i>

If not, what is a workaround to make sure that these hrefs are compliant?

This might help: [HTML5 i tag validity with icons](https://stackoverflow.com/q/22466223/1591669) — unor, Mar 07 '18 at 19:21
"These Hrefs"? Providing more code for context would help provide a more accurate answer. I don't know if your contains just background images but if so, I would find alternatives so that it contains actual text or icon images. But again, sharing more code would help provide a better answer that is more sustainable than the solution Stu mentioned below. — aditya, Mar 31 '18 at 01:55

score 0 · Answer 1 · answered Mar 06 '18 at 07:52

Use screen reader only text. This will be invisible to sighted users, but screen readers will still read it out.

<i class="this-is-the-icon"><span class="screen-reader-only">Icon 
Title</span></i>

.screen-reader-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

This is the approach advocated by WebAim [https://webaim.org/techniques/css/invisiblecontent ]

WCAG link without text for an tag

1 Answers1