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.
Solved
SP Page Builder
Font Awesome Icon Accessibilities
Accepted answer
Marked as the solution
Paul Frankowski Senior Staff
4 years ago
· edited
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.
2 more replies
Paul Frankowski Senior Staff
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.
Directive Team Asked this
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!
Log in to reply.