• Closed by: Fred
  • Closed on: 02.12.21, 11:41
  • Reason: Closed
  • Comment: Glad to help!

Ticket #22365 - Accessibility and Aria Labels

Hello, I am trying to make the website conform with WCAG 2 accessibility requirements but I cannot find where I can make changes to the code so that I can minimize the errors on wave evaluation tool.

More specifically there are empty link errors and missing form label errors like you can see in the following screenshots :

http://prntscr.com/1ui5vs4

http://prntscr.com/1ui6lkf

Where can I edit these so that I can add link text and Aria labels?

Comments

Fred 02 Oct 2021, 21:57

Hi, Theofanis.
First file /themes/alysum/templates/catalog/_partials/facets.tpl
Second one /themes/alysum/modules/contactform/views/templates/widget/contactform.tpl

Theofanis Bellos 26 Nov 2021, 11:20

Sorry for the late reply, but I was absent and didn’t have the time to try changes until now.
I have tried to add aria labels on those files and other files as well, but the changes I make do not seem to be reflected on the front end. I have tried clearing cache although it is disabled but nothing changed.

Theofanis Bellos 26 Nov 2021, 11:30

In case needed, I use the https://wave.webaim.org/ tool to check for Accessibility errors, you can check the errors there

Fred 26 Nov 2021, 11:38

I see you are using Elementor. You need this file in this case /modules/pkelements/views/templates/pkcategories.tpl

Theofanis Bellos 30 Nov 2021, 22:42

Yes, this did the job! Thank you!

I am only left with only some accessibility errors which are from the pkheaderitems bar.tpl and the slider module.
All the input fields from this bar are missing form labels I have tried several ways to add labels to them but unfortunately I could not.
As for the slider module, the links generated do not contain alt text

Attachments:

error1.png (22 KiB)
error2.png (28.9 KiB)
Fred 01 Dec 2021, 12:07

I just added missed labels into the bar.
As for the slider, I’m not sure that’s possible. the code is generated in the module core files and we are not able to change it.

Theofanis Bellos 02 Dec 2021, 10:57

Much better now, thank you! There is an error for duplicate labels with this implementation but i went through it.
I saw that the slider was generating link from a minified javascript file, for the moment I have disabled the slider links so that I don’t have any errors.

Thank you again for your help, you can mark this as closed.

Fred 02 Dec 2021, 11:41

You are welcome!