Forem

hiro
hiro

Posted on • Originally published at b.0218.jp

2

[Accessibility] Points to Consider When Adding aria-label to Icon Font Elements

Premise of Icon Fonts

The following is an example of defining Font Awesome:

.fab {
  font-family: "Font Awesome 5 Brands";
}

.fa-twitter::before {
  content: "\f099";
}
Enter fullscreen mode Exit fullscreen mode
<span class="fab fa-twitter"></span>
Enter fullscreen mode Exit fullscreen mode

Icon fonts render icons by placing character glyphs corresponding to the icons in pseudo-elements.

Purpose of Accessibility

Similar to the alt attribute of <img>, alternative text can be described using aria-label, allowing screen readers to convey appropriate meaning.

Implementation

Decorative Icons

For decorative icons that do not need to be read by screen readers, add aria-hidden="true".

<span class="fab fa-twitter" aria-hidden="true"></span>
Enter fullscreen mode Exit fullscreen mode

Meaningful Icons

For icons that need a description for screen readers, add aria-label.

<span class="fab fa-twitter" aria-label="Twitter"></span>
Enter fullscreen mode Exit fullscreen mode

Icons Accompanied by Text

If there is meaningful text alongside the icon, having aria-label can cause screen readers to read it twice. In such cases, add aria-hidden="true" as shown below.

<a href="https://twitter.com/">
  <span class="fab fa-twitter" aria-hidden="true"></span>
  Twitter
</a>
Enter fullscreen mode Exit fullscreen mode

Related

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)