Change in code or creation of override to pass accessibility test - Forum | JoomShaper
Solved Helix Framework

Change in code or creation of override to pass accessibility test

Asked by Alexander I. 5 years ago Last activity 5 years ago

Hi,

In order for our project to pass an accessibility test, the below code output:

<a id="offcanvas-toggler" aria-label="Navigation" class="offcanvas-toggler-right d-block d-lg-none" href="#">
<i class="fa fa-bars" aria-hidden="true" title="Navigation"></i>
</a>

Needs to be chaged to this:

<a id="offcanvas-toggler" aria-label="Navigation" class="offcanvas-toggler-right d-block d-lg-none" href="#">
<span class="fa fa-bars" aria-hidden="true" title="Navigation"></span>
</a>

(Font Awesome < i > element to be replaced with < span > because accessibility checking tools see < i > as italics and give a fail mark to the page)

As far as I can tell, this needs to be changed in the file templates/shaper_helixultimate/features/menu.php but any change I make there, even such a minor one, completely breaks the front end.

Any ideas on how to proceed?

Thanks,
Alex

Accepted answer

Marked as the solution
Ofi Khan Staff
5 years ago

I agree with you on accessibility. We are trying to give as much possible custmomization option as we can. I will share your idea with the developers.

2 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
5 years ago

Hello Alexander I.

Sorry, we do not provide customization support. It breaks because there are CSS associated with it. For example, if there is CSS for #offcanvas-toggler i, this will not affect if you change i tag to span.

Best regards

Alexander I. Asked this
5 years ago

Hi Ofi,

Actually the whole front end breaks up (strange?!?!), not just the styles for the offcanvas-toggler.

Thanks for your reply anyway.

As accessibility is becoming an even bigger deal, maybe this could be included in a future update of Helix Ultimate?

Best regards,
Alex

Log in to reply.