Accesibility test for Account page

Date of execution: 2021-03-11 14:43:02.926

Violations

ImpactTotal
All violations46
Minor0
Moderate3
Serious34
Critical9

IncompleteTotal
All Incomplete violations28

Violations

DescriptionHelp URLImpactFailures
Ensures buttons have discernible texthelp urlcritical
Failure SummaryFailure Description
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element has a value attribute and the value attribute is empty Element has no value attribute or the value attribute is empty 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none" Element has no title attribute or the title attribute is empty

html:
<button type="submit" name="submit_search" class="btn btn-default button-search"> <span>Search</span> </button>

target:
  • .button-search
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element has a value attribute and the value attribute is empty Element has no value attribute or the value attribute is empty 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none" Element has no title attribute or the title attribute is empty

html:
<button type="submit" name="submitNewsletter" class="btn btn-default button button-small"> <span>Ok</span> </button>

target:
  • button[name="submitNewsletter"]
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholdshelp urlserious
Failure SummaryFailure Description
Fix any of the following: Element has insufficient color contrast of 2.82 (foreground color: #777777, background color: #333333, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<span class="shop-phone"> <i class="icon-phone"></i>Call us now: <strong>0123-456-789</strong> </span>

target:
  • .shop-phone
Fix any of the following: Element has insufficient color contrast of 2.67 (foreground color: #9c9b9b, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input class="search_query form-control ac_input" type="text" id="search_query_top" name="search_query" placeholder="Search" value="" autocomplete="off">

target:
  • #search_query_top
Fix any of the following: Element has insufficient color contrast of 2.82 (foreground color: #777777, background color: #333333, font size: 9.8pt, font weight: bold). Expected contrast ratio of 4.5:1

html:
<span class="ajax_cart_no_product">(empty)</span>

target:
  • .ajax_cart_no_product
Fix any of the following: Element has insufficient color contrast of 4.14 (foreground color: #777777, background color: #f6f6f6, font size: 9.0pt, font weight: bold). Expected contrast ratio of 4.5:1

html:
<span class="navigation_page"> Authentication</span>

target:
  • .navigation_page
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input onkeyup="$('#firstname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_firstname" name="customer_firstname" value="">

target:
  • #customer_firstname
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input onkeyup="$('#lastname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_lastname" name="customer_lastname" value="">

target:
  • #customer_lastname
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="is_required validate form-control" data-validate="isEmail" id="email" name="email" value="mckhztsidgzv@localhost.local">

target:
  • #email
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="password" class="is_required validate form-control" data-validate="isPasswd" name="passwd" id="passwd">

target:
  • #passwd
Fix any of the following: Element has insufficient color contrast of 4.32 (foreground color: #777777, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<span class="form_info">(Five characters minimum)</span>

target:
  • .password > .form_info
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<select id="days" name="days" class="form-control">

target:
  • #days
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<select id="months" name="months" class="form-control">

target:
  • #months
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<select id="years" name="years" class="form-control">

target:
  • #years
Fix any of the following: Element has insufficient color contrast of 4.32 (foreground color: #777777, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<label for="newsletter">Sign up for our newsletter!</label>

target:
  • label[for="newsletter"]
Fix any of the following: Element has insufficient color contrast of 4.32 (foreground color: #777777, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<label for="optin">Receive special offers from our partners!</label>

target:
  • label[for="optin"]
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" id="firstname" name="firstname" value="">

target:
  • #firstname
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" id="lastname" name="lastname" value="">

target:
  • #lastname
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" id="company" name="company" value="">

target:
  • #company
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" name="address1" id="address1" value="">

target:
  • #address1
Fix any of the following: Element has insufficient color contrast of 3.83 (foreground color: #f13340, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<span class="inline-infos">Street address, P.O. Box, Company name, etc.</span>

target:
  • .required:nth-child(5) > .inline-infos
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" name="address2" id="address2" value="">

target:
  • #address2
Fix any of the following: Element has insufficient color contrast of 4.32 (foreground color: #777777, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<span class="inline-infos">Apartment, suite, unit, building, floor, etc...</span>

target:
  • .is_customer_param > .inline-infos
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" name="city" id="city" value="">

target:
  • #city
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<select name="id_country" id="id_country" class="form-control"> <option value="">-</option> <option value="21" selected="selected">United States</option> </select>

target:
  • #id_country
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<textarea class="form-control" name="other" id="other" cols="26" rows="3"></textarea>

target:
  • #other
Fix any of the following: Element has insufficient color contrast of 3.86 (foreground color: #ff0000, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<p class="inline-infos">You must register at least one phone number.</p>

target:
  • .account_creation:nth-child(2) > .inline-infos
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" name="phone" id="phone" value="">

target:
  • #phone
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" name="phone_mobile" id="phone_mobile" value="">

target:
  • #phone_mobile
Fix any of the following: Element has insufficient color contrast of 2.77 (foreground color: #9c9b9b, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<input type="text" class="form-control" name="alias" id="alias" value="My address">

target:
  • #alias
Fix any of the following: Element has insufficient color contrast of 3.83 (foreground color: #f13340, background color: #fbfbfb, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

html:
<span><sup>*</sup>Required field</span>

target:
  • .pull-right > span
Ensures the order of headings is semantically correcthelp urlmoderate
Failure SummaryFailure Description
Fix any of the following: Heading order invalid

html:
<h3 class="page-subheading">Your personal information</h3>

target:
  • .account_creation:nth-child(1) > h3
Ensures every form element has a labelhelp urlcritical
Failure SummaryFailure Description
Fix any of the following: 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 Form element does not have an implicit (wrapped)

html:
<input class="search_query form-control ac_input" type="text" id="search_query_top" name="search_query" placeholder="Search" value="" autocomplete="off">

target:
  • #search_query_top
Fix any of the following: 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 Form element does not have an implicit (wrapped)

html:
<select id="days" name="days" class="form-control">

target:
  • #days
Fix any of the following: 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 Form element does not have an implicit (wrapped)

html:
<select id="months" name="months" class="form-control">

target:
  • #months
Fix any of the following: 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 Form element does not have an implicit (wrapped)

html:
<select id="years" name="years" class="form-control">

target:
  • #years
Fix any of the following: 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 Form element does not have an implicit (wrapped)

html:
<input class="inputNew form-control grey newsletter-input" id="newsletter-input" type="text" name="email" size="18" value="Enter your e-mail">

target:
  • #newsletter-input
Ensures the page has only one main landmark and each iframe in the page has at most one main landmarkhelp urlmoderate
Failure SummaryFailure Description
Fix all of the following: Page does not have a main landmark

html:
<html lang="en" class="">

target:
  • html
Ensures links have discernible texthelp urlserious
Failure SummaryFailure Description
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none"

html:
<a href="" title=""> <img class="img-responsive" src="http://automationpractice.com/modules/blockbanner/img/sale70.png" alt="" title="" width="1170" height="65"> </a>

target:
  • a[href=""]
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none"

html:
<a target="_blank" href="https://www.facebook.com/groups/525066904174158/"> <span>Facebook</span> </a>

target:
  • .facebook > a[target="_blank"]
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none"

html:
<a target="_blank" href="https://twitter.com/seleniumfrmwrk"> <span>Twitter</span> </a>

target:
  • .twitter > a[target="_blank"]
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none"

html:
<a target="_blank" href="https://www.youtube.com/channel/UCHl59sI3SRjQ-qPcTrgt0tA"> <span>Youtube</span> </a>

target:
  • .youtube > a[target="_blank"]
Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have 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's default semantics were not overridden with role="presentation" Element's default semantics were not overridden with role="none"

html:
<a target="_blank" href="https://plus.google.com/111979135243110831526/posts"> <span>Google Plus</span> </a>

target:
  • .google-plus > a[target="_blank"]
Ensures does not disable text scaling and zoominghelp urlcritical
Failure SummaryFailure Description
Fix any of the following: maximum-scale on tag disables zooming on mobile devices

html:
<meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0">

target:
  • meta[name="viewport"]
Ensures related elements have a group and that the group designation is consistenthelp urlcritical
Failure SummaryFailure Description
Fix any of the following: All elements with the name "id_gender" do not reference the same element with aria-labelledby Element does not have a containing fieldset or ARIA group

html:
<input type="radio" name="id_gender" id="id_gender1" value="1">

target:
  • #id_gender1
Ensures all page content is contained by landmarkshelp urlmoderate
Failure SummaryFailure Description
Fix any of the following: Some page content is not contained by landmarks

html:
<html lang="en" class="">

target:
  • html

Incomplete

DescriptionHelp URLImpactFailures
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholdshelp urlN/A
Failure SummaryFailure Description
N/A

html:
<span>Register<i class="icon-chevron-right right"></i></span>

target:
  • #submitAccount > span
N/A

html:
<sup>*</sup>

target:
  • span > sup
N/A

html:
<h4>Newsletter</h4>

target:
  • #newsletter_block_left > h4
N/A

html:
<h4>Follow us</h4>

target:
  • #social_block > h4
N/A

html:
<h4>Categories</h4>

target:
  • .blockcategories_footer > h4
N/A

html:
<a href="http://automationpractice.com/index.php?id_category=3&amp;controller=category" title="You will find here all woman fashion collections. This category includes all the basics of your wardrobe and much more: shoes, accessories, printed t-shirts, feminine dresses, women's jeans!">

target:
  • .tree > .last > a
N/A

html:
<h4>Information</h4>

target:
  • #block_various_links_footer > h4
N/A

html:
<a href="http://automationpractice.com/index.php?controller=prices-drop" title="Specials"> Specials </a>

target:
  • a[title="Specials"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=new-products" title="New products"> New products </a>

target:
  • a[title="New\ products"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=best-sales" title="Best sellers"> Best sellers </a>

target:
  • a[title="Best\ sellers"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=stores" title="Our stores"> Our stores </a>

target:
  • a[title="Our\ stores"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=contact" title="Contact us"> Contact us </a>

target:
  • a[title="Contact\ us"]
N/A

html:
<a href="http://automationpractice.com/index.php?id_cms=3&amp;controller=cms" title="Terms and conditions of use"> Terms and conditions of use </a>

target:
  • a[title="Terms\ and\ conditions\ of\ use"]
N/A

html:
<a href="http://automationpractice.com/index.php?id_cms=4&amp;controller=cms" title="About us"> About us </a>

target:
  • a[title="About\ us"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=sitemap" title="Sitemap"> Sitemap </a>

target:
  • a[title="Sitemap"]
N/A

html:
<div> © 2014 <a class="_blank" href="http://www.prestashop.com" target="_blank">Ecommerce software by PrestaShop™</a> </div>

target:
  • .bottom-footer > div
N/A

html:
<a class="_blank" href="http://www.prestashop.com" target="_blank">Ecommerce software by PrestaShop™</a>

target:
  • ._blank
N/A

html:
<a href="http://automationpractice.com/index.php?controller=my-account" title="Manage my customer account" rel="nofollow">My account</a>

target:
  • a[title="Manage\ my\ customer\ account"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=history" title="My orders" rel="nofollow">My orders</a>

target:
  • a[title="My\ orders"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=order-slip" title="My credit slips" rel="nofollow">My credit slips</a>

target:
  • a[title="My\ credit\ slips"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=addresses" title="My addresses" rel="nofollow">My addresses</a>

target:
  • a[title="My\ addresses"]
N/A

html:
<a href="http://automationpractice.com/index.php?controller=identity" title="Manage my personal information" rel="nofollow">My personal info</a>

target:
  • a[title="Manage\ my\ personal\ information"]
N/A

html:
<h4>Store information</h4>

target:
  • #block_contact_infos > div > h4
N/A

html:
<li> <i class="icon-map-marker"></i>Selenium Framework, Research Triangle Park, North Carolina, USA </li>

target:
  • div > .toggle-footer > li:nth-child(1)
N/A

html:
<li> <i class="icon-phone"></i>Call us now: <span>(347) 466-7432</span> </li>

target:
  • div > .toggle-footer > li:nth-child(2)
N/A

html:
<span>(347) 466-7432</span>

target:
  • .toggle-footer > li:nth-child(2) > span
N/A

html:
<li> <i class="icon-envelope-alt"></i>Email: <span><a href="mailto:%73%75%70%70%6f%72%74@%73%65%6c%65%6e%69%75%6d%66%72%61%6d%65%77%6f%72%6b.%63%6f%6d">support@seleniumframework.com</a></span> </li>

target:
  • div > .toggle-footer > li:nth-child(3)
N/A

html:
<a href="mailto:%73%75%70%70%6f%72%74@%73%65%6c%65%6e%69%75%6d%66%72%61%6d%65%77%6f%72%6b.%63%6f%6d">support@seleniumframework.com</a>

target:
  • span > a