Font Awesome Icon Accessibilities - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

Font Awesome Icon Accessibilities

DT

Directive Team

SP Page Builder 3 years ago

We have multiple FA icons loading throughout the site with the default "aria-hidden=true" code attatched to it. How can we remove this code so it can be read by screen readers and other accessability tools? I tried removing the html from the module but that didn't work.

0
3 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #83526

In general those icons are not needed for users with disabilites, that's why we used those extra aria to "hide" them.

But yes, it's possibile to correct that. You have to override Feature addon (and Icon addon) and edit site.php file where you have to remove that extra phrase. Tip #7 from: https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-3/how-to-tips


Social icons on the top1 have only aria-label that is 100% correct by all validators.

Icons used on top2 - indeed have aria-hidden - but anyway you have wrong contrast color there, Accessibility issue! To edit aria code you have to edit that file: templates/valur-purple/features/contact.php

ABout social icons at the bottom3 I don't know how you created it. If it was just custom HTML, just edit it.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #83361

Hi,

Where you have those icons? Are those Social Icons in the top from Template?

AND Template name or site URL please - otherwise I am blind.

0
DT
Directive Team
Accepted Answer
3 years ago #83488

The URL is https://valor.mspwebsite.com, and we need all of fa icons on the site to be screen reader enabled but for starters yes the social icons in the top bar and the feature box icons linked below the showcase. Here's a screenshot for reference - https://drive.google.com/uc?id=1HB5zteKxyJQ_BLvOLcFnzaBBMjqzlSTq

thank you!

0