Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using <i> tag for icons breaks A11Y

See original GitHub issue

Do you know that using <i> tag for showing icons is not compliant with A11Y? We should use something like this:

<span class="icon cancel"></span>

instead of:

<i class="icon cancel"></i>

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

mlopezgvacommented, May 29, 2019

In my opinion, A11Y test does not take into acount that:

  • <i> tag is not being used to emphasize any text, because
  • that tag is empty so there shouldn’t be anything to complain about.

It is important when using icons only (ui icon menu or a ui icon buttons without text, for example), and, again, there is no text, so an aria- attribute would be enforced to inform about the element’s meaning.

I am not versed in this A11Y thing, but complaining about incorrectly emphasize an empty node seems outdated to me: using <i> for icon has been done for almost a decade by many frameworks, and the authority behind the A11Y standardization should be noticed and the standard updated.

[From the W3C]: Use the element only when there is not a more appropriate semantic element

smartm0usecommented, May 21, 2019

@lubber-de Yeah, IMO its too large of a change for now and we should address this when we do the icon changes in v3.

I have already done this work. If you need I can create a PR.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Icons and links | Introduction to Accessibility - A11y-101
Enhance icon with text ... This is the easiest way to make your icon links (and buttons) accessible. Just place rock-solid copy next...
Read more >
Should I use <i> tag for icons instead of <span>? [closed]
I am using span to display icons and it seems to be working for me until now. Update: Bootstrap 3 uses span for...
Read more >
Decorative Images | Web Accessibility Initiative (WAI) - W3C
If the image was used to indicate a thematic break, e.g. a scene change in a story, or a transition to another topic,...
Read more >
HTML: A good basis for accessibility - Learn web development
You should now be well-versed in writing accessible HTML for most occasions. ... that accessibility is badly broken if not handled properly.
Read more >
Quick tip: Using alt text properly - The A11Y Project
Don't put line breaks in alt text. Doing so can cause awkward screen reader announcements. For instance, inserting the element's role ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found