Social media links in footer have wrong semantics and no accessible name
In the torproject.org footer we have some social media links, whose HTML is similar to
<h4>
<a class="text-white px-3" target="_blank" href="https://forum.torproject.net">
<i class="fab fa-discourse"></i>
</a>
</h4>
with the CSS
i.fa-discourse::before {
/* Glyph icon. */
content: "\uf393";
}
There are three problems:
- The wrapping
<h4>
should not be there because these are not headings. - The
<i>
is semantically inappropriate for the context. - The link has no accessible name. Technically, "\uf393" will act as the accessible name, but it is not useful for a screen reader.
I suspect the last two come from a "font awesome" style of using icons, which is not an accessible or semantic design. If you are not using an <img>
, you need to add an aria-label
or a title
with the accessible name on the <a>
element, and hide your icon's unicode with aria-hidden="true"
.
Edited by henry