Accessibility
Hi, for the italpizza.com website we are facing a process to make it accessible (in Italy it will be mandatory to have accessible websites from June 28th).
I would need support for some problems encountered:
- An element (link) was detected inside another element (link)
CODE
<a href="https://www.facebook.com/Italpizzait/" target="_blank" class="" tabindex="-1" title=""> <div class="mask"></div> <img width="100" height="100" src="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png" class="scale-with-grid entered error" alt="" style="" decoding="async" data-lazy-srcset="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png 100w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-50x50.png 50w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-75x75.png 75w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-85x85.png 85w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-80x80.png 80w" data-lazy-sizes="(max-width:767px) 100px, 100px" data-lazy-src="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png" data-cmp-ab="2" data-cmp-info="10" data-ll-status="error" sizes="(max-width:767px) 100px, 100px" srcset="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png 100w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-50x50.png 50w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-75x75.png 75w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-85x85.png 85w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-80x80.png 80w"> ...</a>
Screen: https://scan.userway.org/scanning/6826fe42272ba76fb97ea64b/3300836758344613.jpeg
Could you help me?
Thanks,
Lisa
Comments
Hi,
I do not see any link inside of a link on your website. Can you tell me what tool did you use to check that?
Best regards
Hi, thanks for the quick response. The analysis was done by the Userway team (I don't know which tool was used for the analysis). But this error is repeated several times and it seems to me that it concerns the "image" element
I just checked your website with this tool: https://wave.webaim.org, and it does not show any problem related to what you showed on your screenshot.
If you could ask the team that did the analysis for you for more details, I could take a closer look at this.
Best regards
Ok, I also ask you another thing if possible: I was asked to add an aria label to indicate to assistive technologies, such as screen readers, the function of the button. How can I do it?
https://userway.it/hubfs/screenshots-per-report/Italpizza/4_italpizza.png
You can use the Link title filed in the element settings:
Best regards
Thanks for your help!
I would also need support for this change request: https://italpizza.com/consumatore/
Verify that all the contents and possible operations on the page are also usable from the keyboard
https://userway.it/hubfs/screenshots-per-report/Italpizza/6_italpizza.png
How can I fix it?
I checked that, and these accordions are usable from the keyboard.
See the following screen recording:
Can you tell me more about it, please?
Thanks
Ok, thanks.
And I was also notified of this problem, but I didn't quite understand it:
The list does not contain list elements Check for list elements within the elements that enclose the list. If there is an <ol> or <ul> element, it should contain at least one <li> element. If there is a <dl> element, it should contain at least one <dt> element. https://italpizza.com/pizze/
Remove the list element ( <ol> , <ul> or <dl> ) or populate it with list elements ( <li> or <dt> , respectively). For example: <ul><li>Apples</li><li>Oranges</li></ul>
Could you help me?
Do you know to which part it refers, please?
Thanks
Yes, sure: https://italpizza.com/pizze/
This is the "portfolio" element
There is no option to change it as it is a construction of that element, and modifying it will break it and its functionalities.
Anyway, you can recreate this layout using Query Loop.
https://www.youtube.com/watch?v=maE0FuFIhjQ&list=PLyfUqkbtW2kxq8AY0SivMxX7kf2H9Y-Wf
Best regards
Hi,
I have to get back to the original point: I asked for more information, which I'll provide below.
- An element (link) was detected inside another element (link)
CODE
<a href="https://www.facebook.com/Italpizzait/" target="_blank" class="" tabindex="-1" title=""> <div class="mask"></div> <img width="100" height="100" src="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png" class="scale-with-grid entered error" alt="" style="" decoding="async" data-lazy-srcset="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png 100w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-50x50.png 50w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-75x75.png 75w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-85x85.png 85w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-80x80.png 80w" data-lazy-sizes="(max-width:767px) 100px, 100px" data-lazy-src="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png" data-cmp-ab="2" data-cmp-info="10" data-ll-status="error" sizes="(max-width:767px) 100px, 100px" srcset="https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1.png 100w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-50x50.png 50w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-75x75.png 75w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-85x85.png 85w, https://italpizza.com/wp-content/uploads/2023/04/facebook-bianco1-80x80.png 80w"> ...</a>
Screen: https://scan.userway.org/scanning/6826fe42272ba76fb97ea64b/3300836758344613.jpeg
We checked the indicated point, and the scanner's warning is due to the presence of two links in the same div, one in the main div and the other slightly lower (but still contained within the same div).
Currently, the social media buttons (not just the Facebook one, but the other three as well) are read by the screen reader as, literally, "image with link link." Action should be taken to ensure that the message is read in Italian and clearly describes the link's destination.
Could you help me?
Thanks,
Lisa
Please go to Betheme -> Theme options -> Global -> Image frame, select style Disable hover effect, and check if the problem persists.
Also, you can try to replace the image element for socials with the Icon element.
Best regards
Hi,
I think I figured out the problem: the display:none command hides these icons with links that are read by media. Is there a way to remove them and not just hide them?
If you would like to remove them from the code, you need to write own code in child theme to overwrite theme functions. With custom css you can hide them only as you said.
Hi,
ok, thanks a lot, I decided to recreate the element.
Can you help me with this problem?
If a nearby text element (usually <div> or <span>) acts as a label or descriptive text, assign it the id referenced by the aria-labelledby or aria-descriptionby attribute. If no descriptive text element exists, create it and assign it that id.
<button class="show-password-input" aria-label="Show password" aria-describedby="undefined"></button>
Screen: https://scan.userway.org/scanning/682703c81117c45aa63a99e9/2922304151305138.jpeg
From what I see, it is added by WooCommerce, not the theme.
Please switch to a different theme for testing and verify if the result remains the same.
If so, you will have to contact Woo support regarding this.
Best regards
Okay, thanks, I'll check with them.
I just have one last question: they've reported a problem with the search bar in the navigation menu.
Specifically:
However, during our tests with screen readers, we found two real issues related to the user experience:
The search bar's close button is simply read as a "link," without any useful information about its purpose;
Once the search text is entered, the focus gets stuck within the keyword entry bar, preventing navigation to the underlying screen with the results.
Is there a way to fix this?
I have passed it on to the dev team and we will take a look at this.
Best regards
Thanks, let me know
Hi, any news?
We have it on our to-do list and will be fixed in the upcoming updates.
Best regards
Hi, I saw that there was a theme update available. Can you confirm that it included the update we mentioned?
Thanks
Not yet, but we have it done, and we plan to release another update (which includes that) tomorrow.
Best regards
Ok thank for your help :)
Have a nice day
Hi, I've been told that the search lens isn't an accessible element.
The problem is that it generates empty <ul>s, when they should contain at least one <li> element.
Is there a fix?