Hi we want to have w3c and WCAG 2.0 (Level AA) combatible template but with ja builder we cant change code to achieve that.
How we can correct these errors below? Can we do that with T4 Page builder?
Accessibility Review (Guidelines: WCAG 2.0 (Level AA))
Export Format:
Report to Export:
Known Problems(25)
Likely Problems (0)
Potential Problems (197)
HTML Validation
CSS Validation
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 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 388, Column 1:
<input name="f------" class="form-control " type="text" data-name="Όνομα" placeholder="Όνο ...
Check 206: input element, type of "checkbox", 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 395, Column 152:
<input type="checkbox" name="consent" value="1" required>
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 388, Column 1:
<input name="f------" class="form-control " type="text" data-name="Όνομα" placeholder="Όνο ...
Check 95: textarea element missing an associated label.
Repair: Add a label element immediately before or after the textarea element. Set the for attribute value of the label element to the same value as the id attribute value of the textarea element. Add label text to the label element. Or, set the title attribute value to the textarea element to the label text. Or, add a label element that surrounds the textarea element and add label text.
Error Line 394, Column 142:
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 131, Column 81:
<i class="material-icons">trending_up</i>
Error Line 139, Column 80:
<i class="material-icons">verified_user</i>
Error Line 149, Column 80:
<i class="material-icons">flight_takeoff</i>
Error Line 159, Column 80:
<i class="material-icons">language</i>
Error Line 169, Column 80:
<i class="material-icons">picture_in_picture</i>
Error Line 179, Column 80:
<i class="material-icons">location_searching</i>
Error Line 395, Column 331:
<i class="fa fa-external-link" aria-hidden="true"></i>
Error Line 396, Column 107:
<i class="material-icons fa-spin">autorenew</i>
Error Line 433, Column 185:
<i class="fa fa-facebook" aria-hidden="true"></i>
Error Line 433, Column 360:
<i class="fa fa-twitter" aria-hidden="true"></i>
Error Line 433, Column 543:
<i class="fa fa-linkedin" aria-hidden="true"></i>
Error Line 433, Column 720:
<i class="fa fa-google-plus" aria-hidden="true"></i>
Error Line 433, Column 913:
<i class="fa fa-pinterest" aria-hidden="true"></i>
2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
Success Criteria 2.4.6 Headings and Labels (AA)
Check 37: Header nesting - header following h1 is incorrect.
Repair: Modify the header levels so only an h1 or h2 follows h1.
Error Line 123, Column 1:
<h1 class="jub-h1 " data-placeholder="text">ΥΠΗΡΕΣΙΕΣ</h1>
Error Line 297, Column 1:
<h1 class="jub-h1 " data-placeholder="text">Φωτογραφίες</h1>
Check 38: Header nesting - header following h2 is incorrect.
Repair: Modify the header levels so only an h3 or any header less than h3 follows h2.
Error Line 191, Column 1:
<h2 class="jub-h2 " data-placeholder="text">ΣΥΝΕΡΓΑΣΙΕΣ</h2>
3.1 Readable: Make text content readable and understandable.
Success Criteria 3.1.1 Language of Page (A)
Check 48: Document language not identified.
Repair: For HTML documents add the lang attribute and a valid ISO-639-1 two letter language code to the opening HTML element. For XHTML documents add both the lang and xmllang attributes with a valid ISO-639-1 two letter language code to the opening HTML element.
Error Line 2, Column 1:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" con ...
Check 49: Document has invalid language code.
Repair: Add a valid 2 letter or 3 letter language code as defined in the ISO 639 specification to the HTML 'lang' attribute. For XHTML, both 'lang' and 'xml:lang' must be set.
Error Line 2, Column 1:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" con ...
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 388, Column 1:
<input name="f------" class="form-control " type="text" data-name="Όνομα" placeholder="Όνο ...
Error Line 392, Column 1:
<input name="f-email" class="form-control " type="email" data-name="Email" placeholder="Email" re ...
Error Line 395, Column 152:
<input type="checkbox" name="consent" value="1" required>