Change In Code Or Creation Of Override To Pass Accessibility Test
Alexander I.
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
Ofi Khan
Accepted AnswerI 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.
Ofi Khan
Accepted AnswerHello 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.
Accepted AnswerHi 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