Support Forum › Forums › Woncep – Fashion Style WooCommerce Theme › Accessibility Check Known Problems
- This topic has 4 replies, 2 voices, and was last updated 3 years, 3 months ago by pcnw.
-
AuthorPosts
-
September 8, 2021 at 10:27 am #2534pcnwSupport Expired
I have a hard time trying to solve Known Problems for Accessibility validation.
– All icons that uses i tag are not validating.
– All links from Newest Products module have no title attribute.
– The input elements from the drop-down login form has problem with no text in label and missing associated label.Have you got any suggestions to solve this?
See the report from achecker.achecks.ca/checker, below:
1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Success Criteria 1.3.1 Info and Relationships (A)
Check 118: input element, type of “password”, missing an associated label.
Repair: Add a label element that surrounds the control’s label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.
Error Line 1765, Column 17:
<input name=”password” type=”password” required placeholder=”Password”>
Check 213: input element, type of “text”, has no text in label.
Repair: Add text to the input element’s associated label that describes the purpose or function of the control.
Error Line 1761, Column 17:
<input name=”username” type=”text” required placeholder=”Username”>
Check 207: input element, type of “password”, has no text in label.
Repair: Add text to the input element’s associated label that describes the purpose or function of the control.
Error Line 1765, Column 17:
<input name=”password” type=”password” required placeholder=”Password”>
Check 57: input element, type of “text”, missing an associated label.
Repair: Add a label element that surrounds the control’s label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.
Error Line 1761, Column 17:
<input name=”username” type=”text” required placeholder=”Username”>
1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.Success Criteria 1.4.4 Resize text (AA)
Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.
Error Line 211, Column 4:
<i aria-hidden=”true” role=”presentation” class=”eicon-menu-bar”></i>
Error Line 229, Column 4:
<i aria-hidden=”true” role=”presentation” class=”eicon-menu-bar”></i>
Error Line 249, Column 17:
<i class=”woncep-icon-bars”></i>
Error Line 265, Column 53:
<i class=”woncep-icon-search”></i>
Error Line 269, Column 56:
<i class=”woncep-icon-user”></i>
Error Line 277, Column 21:
<i class=”woncep-icon-heart”></i>
Error Line 304, Column 53:
<i class=”woncep-icon-search”></i>
Error Line 308, Column 56:
<i class=”woncep-icon-user”></i>
Error Line 316, Column 21:
<i class=”woncep-icon-heart”></i>
Error Line 921, Column 52:
<i class=”fa fa-play”></i>
Error Line 1217, Column 5:
<i aria-hidden=”true” class=”woncep-icon- woncep-icon-rocket”></i>
Error Line 1239, Column 5:
<i aria-hidden=”true” class=”woncep-icon- woncep-icon-history”></i>
Error Line 1261, Column 5:
<i aria-hidden=”true” class=”woncep-icon- woncep-icon-credit-card”></i>
Error Line 1532, Column 7:
<i class=”woncep-icon- woncep-icon-facebook”></i>
Error Line 1632, Column 8:
<i aria-hidden=”true” class=”woncep-icon- woncep-icon-map-marker-alt”></i>
Error Line 1640, Column 8:
<i aria-hidden=”true” class=”woncep-icon- woncep-icon-mobile-android-alt”></i>
Error Line 1648, Column 8:
<i aria-hidden=”true” class=”woncep-icon- woncep-icon-envelope”></i>
Error Line 1776, Column 54:
<i class=”woncep-icon-times”></i>
Error Line 1814, Column 61:
<i class=”woncep-icon-times-circle”></i>
2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.Success Criteria 2.4.4 Link Purpose (In Context) (A)
Check 174: Anchor contains no text.
Repair: Add text to the a element or the title attribute of the a element or, if an image is used within the anchor, add Alt text to the image.
Error Line 265, Column 13:
<i class=”woncep-icon-search”></i>
Error Line 269, Column 13:
<i class=”woncep-icon-user”></i>
Error Line 304, Column 13:
<i class=”woncep-icon-search”></i>
Error Line 308, Column 13:
<i class=”woncep-icon-user”></i>
Error Line 1024, Column 7:
<a href=”https://argaleios.gr/product/%ce%ba%ce%b5%ce%bd%cf%84%ce%b7%cf%84%ce%bf-%cf%84%ce%b5%cf%84% …
Error Line 1039, Column 7:
<a href=”https://argaleios.gr/product/%ce%ba%cf%81%ce%b7%cf%84%ce%b9%ce%ba%ce%b7-%ce%b2%ce%b5%ce%bb% …
Error Line 1054, Column 7:
<a href=”https://argaleios.gr/product/%ce%ba%cf%81%ce%b7%cf%84%ce%b9%ce%ba%ce%b7-%ce%b2%ce%b5%ce%bb% …
Error Line 1069, Column 7:
<a href=”https://argaleios.gr/product/%ce%ba%ce%b1%cf%81%ce%b5-%ce%ba%ce%b1%ce%b9-%cf%84%cf%81%ce%b1 …
Error Line 1086, Column 7:
<a href=”https://argaleios.gr/product/%ce%b2%cf%85%ce%b6%ce%b1%ce%bd%cf%84%ce%b9%ce%bd%ce%b7-%ce%b2% …
Error Line 1101, Column 7:
<a href=”https://argaleios.gr/product/%cf%80%ce%b5%cf%84%cf%83%ce%b5%cf%84%ce%b1-%ce%b3%ce%b1%ce%bc% …
Error Line 1116, Column 7:
<a href=”https://argaleios.gr/product/%cf%83%ce%b5%ce%bc%ce%b5%ce%bd-%ce%ba%ce%bf%cf%86%cf%84%ce%bf- …
Error Line 1126, Column 955:
<a href=”https://argaleios.gr/product/fantastic-iron-shoes/” class=”woocommerce-LoopProduct-link woo …
Error Line 1776, Column 17:
<i class=”woncep-icon-times”></i>
Error Line 1814, Column 17:
<i class=”woncep-icon-times-circle”></i>
3.3 Input Assistance: Help users avoid and correct mistakes.Success Criteria 3.3.2 Labels or Instructions (A)
Check 188: Label text is empty.
Repair: Add text to the label element.
Error Line 1761, Column 17:
<input name=”username” type=”text” required placeholder=”Username”>
Error Line 1765, Column 17:
<input name=”password” type=”password” required placeholder=”Password”>September 8, 2021 at 10:42 am #2536Hello,
I don’t know what your check tool is supposed to solve, but I find its error messages unreasonable.
We use the w3c validator to check Markup Validation and we also had to pass the themeforest team’s extremely rigorous testing to be able to sell this theme on themeforest.
Therefore, I do not think our theme has a problem with your testing tool, all notices are for reference only.
September 9, 2021 at 11:11 pm #2540pcnwSupport ExpiredI am trying to validate this website for Accessibility with Guidelines: WCAG 2.0 (Level AA).
I am using this Web Accessibility checker: https://achecker.achecks.ca/checker/
The 3 problems that I have has nothing to do with Html validation and the w3c validator can not check website for accessibility .I need to solve theese:
– All icons that uses i tag must use span tag instead.At least for the search icon, the account icon, the wish-list icon and the cart icon, in the header.
– All links from Newest Products module have no title attribute. Must add the TITLE attribute.
– The input elements from the drop-down login form has problem with no text in label and missing associated label.Can you show me where are the php files for the above?
September 10, 2021 at 10:44 am #2542Hi again,
#1. Replacing the i tag to the span tag will lose all the style of these icons, all the icons on our theme use the i tag. We have a lot of customers and have never seen a request from a tool to change from the i tag to the span tag of the icon class, which is strange.
#2. We use the default woocommerce template to display the list of products, it is completely normal to not have title attribute in the a tags. If you must add m, you will have to override and edit a lot of functions
#3. I see the label is still displayed in this form: https://prnt.sc/1ro91h1
September 11, 2021 at 5:36 pm #2552pcnwSupport Expired -
AuthorPosts
The topic ‘Accessibility Check Known Problems’ is closed to new replies.