Accessibility forms issues

[sylwekb]

Hello

I'm improving some elements for accessibility and found these errors on product pages and forms. Are the login and registration forms built into the template, or is it the Prestashop 8.1.7 engine that has these errors? I'm using Axe Dev Tools for Firefox. https://addons.mozilla.org/pl/firefox/addon/axe-devtools/  

In which files should I fix these errors?

Ensure buttons have discernible text
more information Link opens in a new window
Element Location:

.bootstrap-touchspin-up

<button class="btn btn-touchspin js-touchspin bootstrap-touchspin-up" type="button"><i class="material-icons touchspin-up"></i></button>

To solve this problem, you need to fix at least (1) of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text
more information Link opens in a new window
Element Location:

<button class="btn btn-touchspin js-touchspin bootstrap-touchspin-down" type="button"><i class="material-icons touchspin-down"></i></button>

To solve this problem, you need to fix at least (1) of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"


Ensure every form element has a label
more information Link opens in a new window
Element Location:

input[type="email"]

<input class="form-control" name="email" type="email" value="" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

<input class="form-control js-child-focus js-visible-password" name="password" type="password" value="" pattern=".{5,}" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

input[name="firstname"]

<input class="form-control" name="firstname" type="text" value="" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

input[name="lastname"]

<input class="form-control" name="lastname" type="text" value="" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

input[type="email"]

<input class="form-control" name="email" type="email" value="" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

.js-child-focus

<input class="form-control js-child-focus js-visible-password" name="password" type="password" value="" pattern=".{5,}" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

<input name="psgdpr" type="checkbox" value="1" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

<input name="customer_privacy" type="checkbox" value="1" required="">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label
more information Link opens in a new window
Element Location:

<input name="newsletter" type="checkbox" value="1">

To solve this problem, you need to fix at least (1) of the following:

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

[compsoul.dev]

I am actually planning to rework my templates soon to meet WCAG requirements properly too, so I feel you. If you want to fix accessibility issues (and if I understood your chaotic message right), most of what youre looking for can be fixed by editing the .tpl files (especially the file): templates/_partials/form-fields.tpl But serious, good on you for caring about accessibility in your shop. If you have any questions along the way, feel free to reach out.

Edited July 15 by compsoul.dev (see edit history)

[sylwekb]

This chaotic list is an audit performed by the Axa Dev Tools automatic validator. Do you have a code example of what specifically needs to be added to the fields to ensure they work accessibility  properly and don't cause any issues with Prestashop after changes?

 

[compsoul.dev]

I get it youare looking for a magic button or even better, a module that "fixes accessibility." But sorry, that is not how accessibility works  You have to go through each issue one by one, clean up the markup, and often fix how PrestaShop spits out form fields in the first place. The reason you r getting repetitive errors is because presta generates some fields poorly. Let me explain one of the most common ones:

 

Quote

Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>

Means your <input> isn’t associated with any label – screen readers can’t figure out what the field is for. Here is a better, accessible example I use on my own store:
 

<label class="form-label input-email input-placeholder" for="email">
  <input id="email" class="input-type-email" name="from" type="email" value="" placeholder="twó[email protected]" autocomplete="email" required="">
  <span class="input-label input-label-required">Adres e-mail</span>
</label>

Quote

aria-label attribute does not exist or is empty

Use aria-label="Your email" for simple elements
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label

 

Quote

aria-labelledby attribute does not exist...

Use when another element describes this one, e.g. <span id="desc">Email</span>
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby

 

Quote

Element has no title attribute

A quick fix (but not ideal alone): add title="Enter your email"
https://www.w3.org/WAI/WCAG21/Techniques/html/H65
 

Quote

Element has no placeholder attribute

Add something meaningful like placeholder="[email protected]" But remember: placeholder should never be the only visible label. It s just a bonus hint.
https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text
 

Quote

Element's default semantics were not overridden with role="none" or role="presentation"

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role

[sylwekb]

I know perfectly well that there's no magic button or module that will do this for us. Some offer additional, paid accessibility modules for PrestaShop, but they can cause more problems for people with disabilities. In practice, these modules nothing but additional confusion. Such people often have their own scanners.