Addressing accessibility issues with FontAwesome

Per the discussions in #1849712: Add theming template and prepare logic for rendering icons, #1836160: Support icon fonts in menu links, #1979088: Discussion of standards and general conciseness around the web; icon accessibility should be made invisible so screen-readers don't pick them up: aria-hidden="true". This is automatically applied to any icon using the Icon API:

In template_preprocess_icon() line 75:

  // Prevent screen readers from reading icons
  $attributes['aria-hidden'] = 'true';

PS: normally I don't like hi-jacking issues, but I really would dislike to see others (mainly rob) waste time on something that I'd really like to consolidate into just one project; given the amount of discussions and time that has already been put into develop a comprehensive approach for this long overdue issue in Drupal. I'd rather see focus on making the API better so we could eventually put some iteration of it in core.

Referencing:
#1849712: Add theming template and prepare logic for rendering icons
#1836160: Support icon fonts in menu links

Actually, I completely agree with you. I perhaps probably should have explained more about what I was talking about. I don't think the icons themselves shouldn't be readable. We should probably have a "label" or "title" that would prepend/append the icon. This would allows up to have a tooltip pop-up (using the title attribute) on the icon and also give screen-readers the ability to read the icon (with the hidden element). We need this separation for reasons pertaining to styling.

This is actually already do-able with the icon_menu sub-module in the Icon API. Simply wrap the menu item's "title" with a wrapper and give it the class "element-invisible".

  <ul class="menu">
    <li><a href="#><i class="icon icon-house" aria-hidden="true"></i><span class="element-invisible">Home</span></a></li>
  </ul>

Yes, I'm aware of the <button/> method. I was under the impression though (from all the posts I've read), that the label/title accessibility portion usually pertains to the wrapping or adjoining markup yes? The aria-hidden="true" would pertain to the icon itself, yes?

PS, the <a href="#">...</a> in the example above should have read <a href="/">...</a> as if it were part of the menu system links. I don't think we want to make these buttons ;)

I believe we have it included. If you find any bugs or the module is not accessibility yet, please change the status, and we would be happy if you could point wherein the code that needs to be fixed. If you can or have a patch to it, we appreciate for contribution. :)

Please reopen the issue later if you or someone is still facing the same problem, please correct the right version.

Please to reopen the issue, if you still face the issue :)