Hello!
I am trying to get my website https://www.museooggi.it compliant with WCAG 2.0 A and I am using a Chrome browser extension (Accessible Web Helper Extension https://chromewebstore.google.com/detail/accessible-web-helper/gdnpkbipbholkoaggmlblpbmgemddbgb ) to evaluate errors.
Analyzing the home page https://www.museooggi.it :
I get a “critical” (in the terminology of WCAG) error affecting the “search form” as it is expected to have a label while it has not. Where can I add a label description to the “search form” so this wcag requirement is met?
Also, I get a “serious” (in the terminology of WCAG) error affecting every element of the page that is the image part next to the text (I am using Flex block 1 and Flex block 2 displaying image next to text)
and my checker says the problem here is that links must have discernible text. In addition to the mentioned visual elements from Flex block 1 and Flex block 2 also the social icons at the bottom of the page are affected by the same error (email, facebook, linkedin).
Where can I add text so that the link part of the image elements are described?
Thank you for your assistance!
Paolo
Hello,
Our theme might not be fully designed to pass through this test completely, but as far as I know, optimisations have been added.
For example for social icons should be no issue https://i.imgur.com/oVorYz4.png
For the search, I recommend using the live header search.
Thank you!
Hi Anamaria,
thank you for the prompt reply and the assistance!
I followed your recommendation and used the live header search, problem solved!
For social icons, on reading your screenshot I eventually realized my problem is in the social icons that appear in the mobile menu (clicking on the “sandwich” top-left), as next to facebook and linkedin there there is also the email icon/link which is not in the social icons in the footer desktop version. I am looking in the theme/composer settings but I can’t find from where can I manage that menu. Of course I don’t mean the menu itself, I am trying to reach and manage those icons that appear just above the menu.
Regarding the other errors, I understand what you said regarding the design of the theme, although with the only addition of a free plugin I am using it’s scoring pretty high, just below the pass threshold.
Is there any way I can add some code to flex blocks so that the image too has a description attached to the link?
Again thank you so much for the help!
Paolo
Hello Paolo,
Normally, for all social icons is added the name https://i.imgur.com/8aREMDY.png
The social icons from the mobile menu come from the Theme Panel -> Social/Apis -> Social Networks -> https://i.imgur.com/kKYIECB.png. Remove/edit them as needed.
Flex block shows the image like a background image, not using the parameter img and this one wouldn’t need a description.
Thank you!
Thank you very much! 🙂
In order to improve accessibility to WCAG 2.0 AA compliance, it is important to add a Skip to Content link (it will allow you to go directly to the post content, ‘skipping’ the menu for example), for this there must be an element with an ID to which this link can be pointed.
In the case of personalized pages this is easy.
But in the case of predefined post templates (e.g.: style1, style2…) how can we add an ID to the DIV with the ‘.td-container-wrap’ class, considering that this class is indicative of the main content. Is there a snippet we can add? Or will you add this ID in the future to improve the theme’s accessibility?
Thanks.
Hello,
Please use cloud templates -> https://tagdiv.com/why-tagdiv-cloud-library-is-a-better-alternative-to-the-standard-pack/ because the standard templates are limited, so you can create the anchor links.
For standard templates will not be added improvements.
Thank you!
