Add semantic accessibility to icons?

I was thinking about how my current profile page/homepage works in screen readers and how it could be better, and I was reading these docs at Font Awesome, where they give an example:

  <i aria-hidden="true" class="fas fa-car" title="Time to destination by car"></i>
  <span class="sr-only">Time to destination by car:</span>

I’m wondering if we could look at an addition argument to the {icon} tags where if you put something like

{cake-candles title="The day I was born"}

it would result in something like

  <i aria-hidden="true" class="fa-solid fa-cake-candles" title="The day I was born"></i>
  <span class="sr-only">The day I was born:</span>

?

1 Like

Working on this!