Using <i> tag for icons breaks A11Y

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>

[mlopezgva]

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

[smartm0use]

@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.