From ade77216bd023fc2696ea66c6e47427b7833e2ae Mon Sep 17 00:00:00 2001 From: Liliia Pelypenko Date: Wed, 23 Dec 2020 17:04:03 +0900 Subject: [PATCH 1/5] Added "To solve this violation, you need to..." --- .gitignore | 1 - artifacts/accessibilityReport.html | 2111 ++ artifacts/tcAllPassedOnlyViolations.html | 79 + artifacts/tcInapplicablePresent.html | 2834 ++ artifacts/tcIncludingCustomSummary.html | 2117 ++ artifacts/tcOnlyPasses.html | 191 + artifacts/tcPassesAndViolations.html | 2455 ++ artifacts/tcWithTheKey.html | 513 + artifacts/tsAllOptionalParametersPresent.html | 2796 ++ artifacts/urlIsNotPassed.html | 2105 ++ docs/index.html | 193 +- src/util/AxeReport.ts | 6 + src/util/prepareReportData.ts | 34 +- src/util/template/pageTemplate.html | 110 +- temp/tcPassesViolationsIncomplete.html | 1854 +- test/__snapshots__/index.test.ts.snap | 26349 +++++++++------- test/index.test.ts | 104 +- 17 files changed, 32546 insertions(+), 11306 deletions(-) create mode 100644 artifacts/accessibilityReport.html create mode 100644 artifacts/tcAllPassedOnlyViolations.html create mode 100644 artifacts/tcInapplicablePresent.html create mode 100644 artifacts/tcIncludingCustomSummary.html create mode 100644 artifacts/tcOnlyPasses.html create mode 100644 artifacts/tcPassesAndViolations.html create mode 100644 artifacts/tcWithTheKey.html create mode 100644 artifacts/tsAllOptionalParametersPresent.html create mode 100644 artifacts/urlIsNotPassed.html diff --git a/.gitignore b/.gitignore index fd705c5..3329823 100644 --- a/.gitignore +++ b/.gitignore @@ -108,4 +108,3 @@ Temporary Items dist/ build/ .idea -/artifacts diff --git a/artifacts/accessibilityReport.html b/artifacts/accessibilityReport.html new file mode 100644 index 0000000..9d5dd7a --- /dev/null +++ b/artifacts/accessibilityReport.html @@ -0,0 +1,2111 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+ + diff --git a/artifacts/tcAllPassedOnlyViolations.html b/artifacts/tcAllPassedOnlyViolations.html new file mode 100644 index 0000000..16a7695 --- /dev/null +++ b/artifacts/tcAllPassedOnlyViolations.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
axe-core found 0 violations
+ + + + + + diff --git a/artifacts/tcInapplicablePresent.html b/artifacts/tcInapplicablePresent.html new file mode 100644 index 0000000..6a02098 --- /dev/null +++ b/artifacts/tcInapplicablePresent.html @@ -0,0 +1,2834 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'inapplicable' axe checks means?

+

+ The inapplicable array lists all the rules for which no matching + elements were found on the page. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAG
1accesskey attribute value must be uniqueaccesskeysBest practice
2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
3ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
4Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
5ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
6<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
7<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
8<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-listWCAG 2.0 Level A
9<dt> and <dd> elements must be contained by a <dl>dlitemWCAG 2.0 Level A
10Elements in the focus order need a role appropriate for interactive contentfocus-order-semanticsBest practice
11HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
12Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
13Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A
14Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
15Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
16Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
17Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
18Document must not have more than one banner landmarklandmark-no-duplicate-bannerBest practice
19Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practice
20Document must not have more than one main landmarklandmark-no-duplicate-mainBest practice
21<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
22Timed refresh must not existmeta-refreshWCAG 2.0 Level A
23<object> elements must have alternate textobject-altWCAG 2.0 Level A
24Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
25[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
26scope attribute should be used correctlyscope-attr-validBest practice
27Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
28Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
29The skip-link target should exist and be focusableskip-linkBest practice
30svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
31Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A
32All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level A
33All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A
34lang attribute must have a valid valuevalid-langWCAG 2.0 Level AA
35<video> or <audio> elements do not autoplay audiono-autoplay-audioWCAG 2.0 Level A
+
+
+
+
+
+ + diff --git a/artifacts/tcIncludingCustomSummary.html b/artifacts/tcIncludingCustomSummary.html new file mode 100644 index 0000000..1f4486b --- /dev/null +++ b/artifacts/tcIncludingCustomSummary.html @@ -0,0 +1,2117 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+ + diff --git a/artifacts/tcOnlyPasses.html b/artifacts/tcOnlyPasses.html new file mode 100644 index 0000000..0a2b676 --- /dev/null +++ b/artifacts/tcOnlyPasses.html @@ -0,0 +1,191 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 0 violations
+ + + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'inapplicable' axe checks means?

+

+ The inapplicable array lists all the rules for which no matching + elements were found on the page. +

+

+ Visit axe API Documentation + to learn more. +

+
+
+
+
+
+ + diff --git a/artifacts/tcPassesAndViolations.html b/artifacts/tcPassesAndViolations.html new file mode 100644 index 0000000..6d8c782 --- /dev/null +++ b/artifacts/tcPassesAndViolations.html @@ -0,0 +1,2455 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
+
+
+
+ + diff --git a/artifacts/tcWithTheKey.html b/artifacts/tcWithTheKey.html new file mode 100644 index 0000000..907e13e --- /dev/null +++ b/artifacts/tcWithTheKey.html @@ -0,0 +1,513 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results for DEQUE project +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 0 violations
+ + + +
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
+
+
+
+
+
+ + diff --git a/artifacts/tsAllOptionalParametersPresent.html b/artifacts/tsAllOptionalParametersPresent.html new file mode 100644 index 0000000..7ad20a8 --- /dev/null +++ b/artifacts/tsAllOptionalParametersPresent.html @@ -0,0 +1,2796 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results for DEQUE project +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'inapplicable' axe checks means?

+

+ The inapplicable array lists all the rules for which no matching + elements were found on the page. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAG
1accesskey attribute value must be uniqueaccesskeysBest practice
2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
3ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
4Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
5ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
6<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
7<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
8<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-listWCAG 2.0 Level A
9<dt> and <dd> elements must be contained by a <dl>dlitemWCAG 2.0 Level A
10Elements in the focus order need a role appropriate for interactive contentfocus-order-semanticsBest practice
11HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
12Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
13Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A
14Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
15Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
16Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
17Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
18Document must not have more than one banner landmarklandmark-no-duplicate-bannerBest practice
19Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practice
20Document must not have more than one main landmarklandmark-no-duplicate-mainBest practice
21<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
22Timed refresh must not existmeta-refreshWCAG 2.0 Level A
23<object> elements must have alternate textobject-altWCAG 2.0 Level A
24Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
25[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
26scope attribute should be used correctlyscope-attr-validBest practice
27Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
28Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
29The skip-link target should exist and be focusableskip-linkBest practice
30svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
31Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A
32All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level A
33All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A
34lang attribute must have a valid valuevalid-langWCAG 2.0 Level AA
35<video> or <audio> elements do not autoplay audiono-autoplay-audioWCAG 2.0 Level A
+
+
+
+
+
+ + diff --git a/artifacts/urlIsNotPassed.html b/artifacts/urlIsNotPassed.html new file mode 100644 index 0000000..6111093 --- /dev/null +++ b/artifacts/urlIsNotPassed.html @@ -0,0 +1,2105 @@ + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+ + + diff --git a/docs/index.html b/docs/index.html index b0300d2..c9a7fe5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,17 +12,28 @@ .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + } AXE Accessibility Results for DEQUE project -
- +
+
Page URL: http://example.com/
- Test Case: Full page analysis +
+
Test Case: Full page analysis
Steps:
  1. Open https://dequeuniversity.com/demo/mars/
  2. Analyze full page with all rules enabled
    3. -
- -
+ +
axe-core found 6 violations
- - - - - - + + + + + + @@ -146,16 +157,28 @@
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html>"html"1<html>"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
@@ -189,16 +212,28 @@
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html>"html"1<html>"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
@@ -232,21 +267,33 @@
- - - + + + + - - + - + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div> + 1<div> <h1>Example Domain</h1> <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p> <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div>"div""div" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
@@ -280,26 +327,56 @@
- - - + + + + - - - + + + + - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
@@ -333,11 +410,11 @@
- - - - - + + + + + @@ -520,10 +597,10 @@
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - + + + + @@ -1033,9 +1110,9 @@
#DescriptionAxe rule IDWCAG#DescriptionAxe rule IDWCAG
- - - + + + diff --git a/src/util/AxeReport.ts b/src/util/AxeReport.ts index 788b1bd..99f07b9 100644 --- a/src/util/AxeReport.ts +++ b/src/util/AxeReport.ts @@ -7,9 +7,15 @@ export interface Summary { nodes: number; } +export interface FixSummary { + highlight: string; + list?: string[] +} + interface NodeResult { html: string; targetNodes: string; + fixSummaries: FixSummary[]; index: number; } diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts index a6978f7..b1bd599 100644 --- a/src/util/prepareReportData.ts +++ b/src/util/prepareReportData.ts @@ -1,8 +1,7 @@ -import { AxeReport } from './AxeReport'; +import { AxeReport, FixSummary, Summary } from './AxeReport'; import { getWcagReference } from './getWcagReference'; import { PreparedResults } from '../index'; import { Result } from 'axe-core'; -import { Summary } from './AxeReport'; function simplifyAxeResultForSummary(results: Result[]): Summary[] { return results.map(({ nodes, description, help, id, tags, impact }, resultIndex) => ({ @@ -12,9 +11,24 @@ function simplifyAxeResultForSummary(results: Result[]): Summary[] { help, wcag: getWcagReference(tags), impact: impact || 'n/a', - nodes: nodes.length + nodes: nodes.length, })); } + +function prepareFixSummary(failureSummary: string, defaultHighlight: FixSummary): FixSummary[] { + const failureSummariesSplit = failureSummary.split('\n\n'); + return failureSummariesSplit.map((summary) => { + const fixSummarySplit = summary.split('\n'); + if (fixSummarySplit.length == 0) { + return defaultHighlight; + } else { + return { + highlight: fixSummarySplit.shift() || '', + list: fixSummarySplit, + }; + } + }); +} /** * Prepare report splitting it into sections: * - total accessibility violations (counting nodes) @@ -36,7 +50,8 @@ export function prepareReportData({ }, 0); if (violations.length === 0) { return { - violationsSummary: 'axe-core found 0 violations', + violationsSummary: + 'axe-core found 0 violations', checksPassed: passedChecks, checksIncomplete: incompleteChecks, checksInapplicable: inapplicableChecks, @@ -58,9 +73,16 @@ export function prepareReportData({ description, help, helpUrl, - nodes: nodes.map(({ target, html }, nodeIndex) => { + nodes: nodes.map(({ target, html, failureSummary }, nodeIndex) => { const targetNodes = target.map((node) => `"${node}"`).join(', '); - return { targetNodes, html, index: nodeIndex + 1 }; + const defaultHighlight = { + highlight: 'Recommendation with the fix was not provided by axe result', + }; + const fixSummaries: FixSummary[] = failureSummary + ? prepareFixSummary(failureSummary, defaultHighlight) + : [defaultHighlight]; + + return { targetNodes, html, fixSummaries, index: nodeIndex + 1 }; }), }; } diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html index 7aa710a..6fd9969 100644 --- a/src/util/template/pageTemplate.html +++ b/src/util/template/pageTemplate.html @@ -12,17 +12,28 @@ .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + } AXE Accessibility Results{{#projectKey}} for {{projectKey}} project{{/projectKey}} -
- - {{#url}}Page URL: + {{#url}} +
+
+ Page URL: {{url}} -
{{/url}} - {{#customSummary}} - {{{customSummary}}} {{/customSummary}} - -
+
+ + {{/url}} {{#customSummary}} +
{{{customSummary}}}
+ {{/customSummary}} +
{{{violationsSummary}}}
{{#violationDetails.length}}
#Rule IDEnabled#Rule IDEnabled
- - - - - - + + + + + + {{/violationDetails.length}} @@ -124,17 +137,32 @@
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
- - - + + + + {{#nodes}} - - - + + + + {{/nodes}} @@ -171,11 +199,11 @@
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
{{index}}{{html}}{{targetNodes}}{{index}}{{html}}{{targetNodes}} + {{#fixSummaries}} +

{{highlight}}

+
    + {{#list}} +
  • {{.}}
    • + {{/list}} +
+ {{/fixSummaries}} + +
- - - - - + + + + + @@ -236,11 +264,11 @@
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - - + + + + + @@ -300,10 +328,10 @@
#DescriptionAxe rule IDWCAGNodes with incomplete check#DescriptionAxe rule IDWCAGNodes with incomplete check
- - - - + + + + @@ -349,9 +377,9 @@
#DescriptionAxe rule IDWCAG#DescriptionAxe rule IDWCAG
- - - + + + diff --git a/temp/tcPassesViolationsIncomplete.html b/temp/tcPassesViolationsIncomplete.html index eb1475f..5d0d42f 100644 --- a/temp/tcPassesViolationsIncomplete.html +++ b/temp/tcPassesViolationsIncomplete.html @@ -12,17 +12,28 @@ .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + } AXE Accessibility Results -
- +
+
Page URL: https://dequeuniversity.com/demo/mars/
- - -
+ +
axe-core found 85 violations
#Rule IDEnabled#Rule IDEnabled
- - - - - - + + + + + + @@ -221,18 +231,35 @@
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
- - - + + + + - - + - + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> + 1<button class="ui-datepicker-trigger" type="button"> <!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> </button>".departure-date > .ui-datepicker-trigger:nth-child(4)"".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
@@ -266,69 +293,171 @@
- - - + + + + - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> + 1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> &nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> + "#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> &nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> + "#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> </p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]""li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
@@ -362,16 +491,28 @@
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
@@ -405,73 +546,166 @@
- - - + + + + - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> + 1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> <form id="search" action="/demo/mars/mars2" method="get"> <input type="hidden" name="fn" value="Search"> <input type="text" class="search" name="query" placeholder="search"> <input type="submit" class="control-search"> </form> </div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> + ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> <input type="hidden" name="fn" value="Search"> <input type="text" class="search" name="query" placeholder="search"> <input type="submit" class="control-search"> </form>":root > form[method="get"][action="\/demo\/mars\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> + ":root > form[method="get"][action="\/demo\/mars\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> <h1 style="color:#eee;">Destination Mars </h1> <h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)""#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
@@ -505,21 +739,50 @@
- - - + + + + - - - - - - - - + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -553,16 +816,28 @@
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
@@ -596,31 +871,90 @@
- - - + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]"1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\32 10"][height="\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -654,16 +988,32 @@
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
@@ -697,31 +1047,70 @@
- - - + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
@@ -755,16 +1144,28 @@
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
@@ -798,16 +1199,28 @@
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]"1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\.html\?a\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
@@ -841,54 +1254,201 @@
- - - + + + + - - - - - - - + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]"
2<a href="mars2.html?a=crater_adventure"> + 1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> + ":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> + ":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\.html\?a\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]"":root > a[href="mars2\.html\?a\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\.html\?a\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\ Mars\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\ world\ that\ never\ was"]" + +

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"
    • +
+ +
@@ -922,77 +1482,188 @@
- - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> + 1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> <span class="traveler-label">Traveler</span> </span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> + "#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> <select id="traveler0" class="traveler-type"> <option value="0">Adult (26+)</option> <option value="1">Youth (12-25)</option> @@ -1000,127 +1671,352 @@
<option value="3">Senior (60+)</option> </select> </span>
"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]""#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\.\.\/images\/f\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
@@ -1154,26 +2050,56 @@
- - - + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
@@ -1207,11 +2133,11 @@
- - - - - + + + + + @@ -1563,11 +2489,11 @@
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - - + + + + + diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index b0cb366..28e31d8 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`createHtmlReport() test All optional parameters present 1`] = ` +exports[`Successful tests All optional parameters present 1`] = ` " @@ -15,17 +15,28 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + } AXE Accessibility Results for DEQUE project -
- +
+
Page URL: https://dequeuniversity.com/demo/mars/
- Test Case: Full page analysis +
+
Test Case: Full page analysis
Steps:
  1. Open https://dequeuniversity.com/demo/mars/
  2. Analyze full page with all rules enabled
    3. -
- -
+ +
axe-core found 85 violations
#DescriptionAxe rule IDWCAGNodes with incomplete check#DescriptionAxe rule IDWCAGNodes with incomplete check
- - - - - - + + + + + + @@ -229,18 +240,35 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
- - - + + + + - - + - + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> + 1<button class="ui-datepicker-trigger" type="button"> <!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> </button>".departure-date > .ui-datepicker-trigger:nth-child(4)"".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
@@ -274,69 +302,171 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> + 1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> &nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> + "#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> &nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> + "#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> </p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]""li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
@@ -370,16 +500,28 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
@@ -413,73 +555,166 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> + 1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> <form id="search" action="/demo/mars/mars2" method="get"> <input type="hidden" name="fn" value="Search"> <input type="text" class="search" name="query" placeholder="search"> <input type="submit" class="control-search"> </form> </div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> + ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> <input type="hidden" name="fn" value="Search"> <input type="text" class="search" name="query" placeholder="search"> <input type="submit" class="control-search"> </form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> + ":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> <h1 style="color:#eee;">Destination Mars </h1> <h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)""#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
@@ -513,21 +748,50 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - - + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -561,16 +825,28 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
@@ -604,31 +880,90 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -662,16 +997,32 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
@@ -705,31 +1056,70 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
@@ -763,16 +1153,28 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
@@ -806,16 +1208,28 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
@@ -849,54 +1263,201 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> + 1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> + ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> + ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
@@ -930,77 +1491,188 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> + 1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> <span class="traveler-label">Traveler</span> </span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> + "#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> <select id="traveler0" class="traveler-type"> <option value="0">Adult (26+)</option> <option value="1">Youth (12-25)</option> @@ -1008,127 +1680,352 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` <option value="3">Senior (60+)</option> </select> </span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]""#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
@@ -1162,26 +2059,56 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
@@ -1215,11 +2142,11 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - - - + + + + + @@ -1610,10 +2537,10 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - + + + + @@ -1873,7 +2800,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` " `; -exports[`createHtmlReport() test AxeResults passed 1`] = ` +exports[`Successful tests Custom Summary present 1`] = ` " @@ -1888,17 +2815,28 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + }

- AXE Accessibility Results for DEQUE project + AXE Accessibility Results

-
- +
+
Page URL: - http://example.com/ + https://dequeuniversity.com/demo/mars/
- Test Case: Full page analysis +
+
Test Case: Full page analysis
Steps:
  1. Open https://dequeuniversity.com/demo/mars/
  2. Analyze full page with all rules enabled
    3. -
- -
-
axe-core found 6 violations
+
+ +
axe-core found 85 violations
#DescriptionAxe rule IDWCAG#DescriptionAxe rule IDWCAG
- - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -1969,51 +2947,153 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` - + + + + + + + + + + + + + + + + + - + - - - + + + - - - - + + + + - + - -
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A1
27Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9 Document must have one main landmark landmark-one-main Best practice moderate14
3All page content must be contained by landmarksregion10Ensures landmarks are uniquelandmark-unique Best practice moderate 1
4Elements should not have tabindex greater than zerotabindexBest practice11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A serious31
-

Failed

-
-
-
-
<html> element must have a lang attribute
+ + 12 + Links must have discernible text + link-name + WCAG 2.0 Level A + serious + 8 + + + 13 + All page content must be contained by landmarks + region + Best practice + moderate + 37 + + + 14 + Elements should not have tabindex greater than zero + tabindex + Best practice + serious + 3 + + + +

Failed

+
+
+
+
Buttons must have discernible text
Learn more
-
html-has-lang
+
button-name
WCAG 2.0 Level A
-

Ensures every HTML document has a lang attribute

+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

serious
@@ -2022,16 +3102,171 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` - - - + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html>"html"1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
@@ -2041,40 +3276,52 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
Document must have one main landmark
+
IDs of active elements must be unique
Learn more
-
landmark-one-main
+
duplicate-id-active
- Best practice + WCAG 2.0 Level A
-

Ensures the document has a main landmark

+

Ensures every id attribute value of active elements is unique

- moderate + serious
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html>"html"1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
@@ -2084,45 +3331,190 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
All page content must be contained by landmarks
+
id attribute value must be unique
Learn more
-
region
+
duplicate-id
- Best practice + WCAG 2.0 Level A
-

Ensures all page content is contained by landmarks

+

Ensures every id attribute value is unique

- moderate + minor
- - - + + + + - - + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div> - <h1>Example Domain</h1> - <p>This domain is for use in illustrative examples in documents. You may use this - domain in literature without prior coordination or asking for permission.</p> - <p><a href="https://www.iana.org/domains/example">More information...</a></p> + 1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> </div>"div"".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
@@ -2132,22 +3524,22 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
Elements should not have tabindex greater than zero
+
Frames must have title attribute
Learn more
-
tabindex
+
frame-title
- Best practice + WCAG 2.0 Level A
-

Ensures tabindex attribute values are not greater than 0

+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

serious
@@ -2156,7988 +3548,1485 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` - - - + + + + - - - + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + - - - + + + + + + - - - + + + +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"#Element sourceElement location + To solve this violation, you need to... +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
-
-
-
-
- -
+
+
+
+
Images must have alternate text
+ Learn more
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes passed check
1aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
2Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
3Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA3
4Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
5Headings must not be emptyempty-headingBest practice1
6Heading levels should only increase by oneheading-orderBest practice1
7Hidden content on the page cannot be analyzedhidden-contentBest practice14
8Links must have discernible textlink-nameWCAG 2.0 Level A1
9Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
10Zooming and scaling must not be disabledmeta-viewportBest practice1
11Page must contain a level-one headingpage-has-heading-oneBest practice1
12All page content must be contained by landmarksregionBest practice4
-
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
-
-
-
-
- -
+
+
+
+
Form elements must have labels
+ Learn more
-
-
-

What 'incomplete' axe checks means?

-

- Incomplete results were aborted and require further testing. This - can happen either because of technical restrictions to what the rule - can test, or because a javascript error occurred. -

-

- Visit axe API Documentation - to learn more. -

-
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
-
-
-
-
- -
+
+
+
+
Document must have one main landmark
+ Learn more
-
-
-

What 'inapplicable' axe checks means?

-

- The inapplicable array lists all the rules for which no matching - elements were found on the page. -

-

- Visit axe API Documentation - to learn more. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAG
1accesskey attribute value must be uniqueaccesskeysBest practice
2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
3Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A
4ARIA role must be appropriate for the elementaria-allowed-roleBest practice
5ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A
6ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
7Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A
8Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A
9Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A
10Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
11ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A
12ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
13ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A
14ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A
15<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
16autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA
17Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA
18<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
19Buttons must have discernible textbutton-nameWCAG 2.0 Level A
20<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-listWCAG 2.0 Level A
21<dt> and <dd> elements must be contained by a <dl>dlitemWCAG 2.0 Level A
22IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level A
23IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A
24id attribute value must be uniqueduplicate-idWCAG 2.0 Level A
25Elements in the focus order need a role appropriate for interactive contentfocus-order-semanticsBest practice
26Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A
27Frames must be tested with axe-coreframe-testedBest practice
28Frames must have a unique title attributeframe-title-uniqueBest practice
29Frames must have title attributeframe-titleWCAG 2.0 Level A
30<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A
31HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
32Images must have alternate textimage-altWCAG 2.0 Level A
33Alternative text of images should not be repeated as textimage-redundant-altBest practice
34Input buttons must have discernible textinput-button-nameWCAG 2.0 Level A
35Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
36Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A
37Form elements should have a visible labellabel-title-onlyBest practice
38Form elements must have labelslabelWCAG 2.0 Level A
39Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
40Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
41Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
42Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
43Document must not have more than one banner landmarklandmark-no-duplicate-bannerBest practice
44Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practice
45Document must not have more than one main landmarklandmark-no-duplicate-mainBest practice
46Ensures landmarks are uniquelandmark-uniqueBest practice
47Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A
48<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A
49<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A
50<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
51Timed refresh must not existmeta-refreshWCAG 2.0 Level A
52<object> elements must have alternate textobject-altWCAG 2.0 Level A
53Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
54[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
55scope attribute should be used correctlyscope-attr-validBest practice
56Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
57Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
58The skip-link target should exist and be focusableskip-linkBest practice
59svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
60Elements should not have tabindex greater than zerotabindexBest practice
61The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice
62Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A
63All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level A
64All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A
65All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A
66lang attribute must have a valid valuevalid-langWCAG 2.0 Level AA
67<video> elements must have captionsvideo-captionWCAG 2.0 Level A
68<video> or <audio> elements do not autoplay audiono-autoplay-audioWCAG 2.0 Level A
-
-
-
-
-
-
-
-
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Rule IDEnabled
1object-alttrue
2role-img-alttrue
3input-image-alttrue
4image-alttrue
5svg-img-alttrue
6area-alttrue
7audio-captiontrue
8video-captiontrue
9definition-listtrue
10dlitemtrue
11listitemtrue
12listtrue
13th-has-data-cellstrue
14td-headers-attrtrue
15td-has-headertrue
16p-as-headingtrue
17aria-required-parenttrue
18aria-required-childrentrue
19table-fake-captiontrue
20css-orientation-lockfalse
21autocomplete-validtrue
22link-in-text-blocktrue
23no-autoplay-audiotrue
24color-contrasttrue
25meta-viewporttrue
26avoid-inline-spacingtrue
27server-side-image-maptrue
28meta-refreshtrue
29blinktrue
30marqueetrue
31bypasstrue
32frame-titletrue
33document-titletrue
34scrollable-region-focusabletrue
35identical-links-same-purposefalse
36label-content-name-mismatchtrue
37html-has-langtrue
38html-lang-validtrue
39html-xml-lang-mismatchtrue
40valid-langtrue
41form-field-multiple-labelstrue
42duplicate-id-activetrue
43duplicate-idtrue
44duplicate-id-ariatrue
45aria-valid-attrtrue
46aria-valid-attr-valuetrue
47aria-input-field-nametrue
48aria-rolestrue
49aria-toggle-field-nametrue
50aria-hidden-focustrue
51aria-hidden-bodytrue
52button-nametrue
53aria-allowed-attrtrue
54input-button-nametrue
55aria-required-attrtrue
56aria-roledescriptiontrue
57link-nametrue
58labeltrue
59accesskeystrue
60regiontrue
61aria-allowed-roletrue
62landmark-banner-is-top-leveltrue
63landmark-complementary-is-top-leveltrue
64landmark-contentinfo-is-top-leveltrue
65focus-order-semanticstrue
66tabindextrue
67landmark-no-duplicate-maintrue
68label-title-onlytrue
69frame-testedtrue
70frame-title-uniquetrue
71heading-ordertrue
72empty-headingtrue
73hidden-contenttrue
74landmark-uniquetrue
75landmark-main-is-top-leveltrue
76page-has-heading-onetrue
77landmark-one-maintrue
78landmark-no-duplicate-bannertrue
79landmark-no-duplicate-contentinfotrue
80scope-attr-validtrue
81image-redundant-alttrue
82table-duplicate-nametrue
83skip-linktrue
84meta-viewport-largetrue
-
-
-
-
-
- - -" -`; - -exports[`createHtmlReport() test URL is not passed 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - - - -
-
axe-core found 85 violations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
-

Failed

-
-
-
-
Buttons must have discernible text
- Learn more -
-
-
button-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures buttons have discernible text

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"
-
-
-
-
-
-
-
Elements must have sufficient color contrast
- Learn more -
-
-
color-contrast
-
- WCAG 2.0 Level AA -
-
-
-

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"
-
-
-
-
-
-
-
IDs of active elements must be unique
- Learn more -
-
-
duplicate-id-active
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value of active elements is unique

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
-
-
-
-
-
-
-
id attribute value must be unique
- Learn more -
-
-
duplicate-id
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value is unique

-
- minor -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> -</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)"
-
-
-
-
-
-
-
Frames must have title attribute
- Learn more -
-
-
frame-title
-
- WCAG 2.0 Level A -
-
-
-

Ensures <iframe> and <frame> elements contain a non-empty title attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"
-
-
-
-
-
-
-
<html> element must have a lang attribute
- Learn more -
-
-
html-has-lang
-
- WCAG 2.0 Level A -
-
-
-

Ensures every HTML document has a lang attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
-
-
-
-
-
-
-
Images must have alternate text
- Learn more -
-
-
image-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures <img> elements have alternate text or a role of none or presentation

-
- critical -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
-
-
-
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
-
-
-
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"
-
-
-
-
-
-
-
Ensures landmarks are unique
- Learn more -
-
-
landmark-unique
-
- Best practice -
-
-
-

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

-
- moderate -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
-
-
-
-
-
-
-
Links must be distinguished from surrounding text in a way that does not rely on color
- Learn more -
-
-
link-in-text-block
-
- WCAG 2.0 Level A -
-
-
-

Links can be distinguished without relying on color

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"
-
-
-
-
-
-
-
Links must have discernible text
- Learn more -
-
-
link-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures links have discernible text

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"
-
-
-
-
-
-
-
All page content must be contained by landmarks
- Learn more -
-
-
region
-
- Best practice -
-
-
-

Ensures all page content is contained by landmarks

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"
-
-
-
-
-
-
-
Elements should not have tabindex greater than zero
- Learn more -
-
-
tabindex
-
- Best practice -
-
-
-

Ensures tabindex attribute values are not greater than 0

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
-
-
-
-
- - -" -`; - -exports[`createHtmlReport() test Verify report is created even if no violations passed 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - - Test Case: Full page analysis -
Steps:
-
    -
  1. Open https://dequeuniversity.com/demo/mars/
    2. -
  2. Analyze full page with all rules enabled
    3. -
- -
-
axe-core found 0 violations
- - - -
- - -" -`; - -exports[`createHtmlReport() test Verify report is created only with violations because passes and incomplete are not passed 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - Page URL: - https://dequeuniversity.com/demo/mars/ -
- - -
-
axe-core found 85 violations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
-

Failed

-
-
-
-
Buttons must have discernible text
- Learn more -
-
-
button-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures buttons have discernible text

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"
-
-
-
-
-
-
-
Elements must have sufficient color contrast
- Learn more -
-
-
color-contrast
-
- WCAG 2.0 Level AA -
-
-
-

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"
-
-
-
-
-
-
-
IDs of active elements must be unique
- Learn more -
-
-
duplicate-id-active
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value of active elements is unique

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
-
-
-
-
-
-
-
id attribute value must be unique
- Learn more -
-
-
duplicate-id
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value is unique

-
- minor -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> -</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)"
-
-
-
-
-
-
-
Frames must have title attribute
- Learn more -
-
-
frame-title
-
- WCAG 2.0 Level A -
-
-
-

Ensures <iframe> and <frame> elements contain a non-empty title attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"
-
-
-
-
-
-
-
<html> element must have a lang attribute
- Learn more -
-
-
html-has-lang
-
- WCAG 2.0 Level A -
-
-
-

Ensures every HTML document has a lang attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
-
-
-
-
-
-
-
Images must have alternate text
- Learn more -
-
-
image-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures <img> elements have alternate text or a role of none or presentation

-
- critical -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
-
-
-
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
-
-
-
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"
-
-
-
-
-
-
-
Ensures landmarks are unique
- Learn more -
-
-
landmark-unique
-
- Best practice -
-
-
-

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

-
- moderate -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
-
-
-
-
-
-
-
Links must be distinguished from surrounding text in a way that does not rely on color
- Learn more -
-
-
link-in-text-block
-
- WCAG 2.0 Level A -
-
-
-

Links can be distinguished without relying on color

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"
-
-
-
-
-
-
-
Links must have discernible text
- Learn more -
-
-
link-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures links have discernible text

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"
-
-
-
-
-
-
-
All page content must be contained by landmarks
- Learn more -
-
-
region
-
- Best practice -
-
-
-

Ensures all page content is contained by landmarks

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"
-
-
-
-
-
-
-
Elements should not have tabindex greater than zero
- Learn more -
-
-
tabindex
-
- Best practice -
-
-
-

Ensures tabindex attribute values are not greater than 0

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
-
-
-
-
- - -" -`; - -exports[`createHtmlReport() test Verify report is created with violations and custom summary 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - Page URL: - https://dequeuniversity.com/demo/mars/ -
- Test Case: Full page analysis -
Steps:
-
    -
  1. Open https://dequeuniversity.com/demo/mars/
    2. -
  2. Analyze full page with all rules enabled
    3. -
- -
-
axe-core found 85 violations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
-

Failed

-
-
-
-
Buttons must have discernible text
- Learn more -
-
-
button-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures buttons have discernible text

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"
-
-
-
-
-
-
-
Elements must have sufficient color contrast
- Learn more -
-
-
color-contrast
-
- WCAG 2.0 Level AA -
-
-
-

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"
-
-
-
-
-
-
-
IDs of active elements must be unique
- Learn more -
-
-
duplicate-id-active
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value of active elements is unique

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
-
-
-
-
-
-
-
id attribute value must be unique
- Learn more -
-
-
duplicate-id
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value is unique

-
- minor -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> -</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)"
-
-
-
-
-
-
-
Frames must have title attribute
- Learn more -
-
-
frame-title
-
- WCAG 2.0 Level A -
-
-
-

Ensures <iframe> and <frame> elements contain a non-empty title attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"
-
-
-
-
-
-
-
<html> element must have a lang attribute
- Learn more -
-
-
html-has-lang
-
- WCAG 2.0 Level A -
-
-
-

Ensures every HTML document has a lang attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
-
-
-
-
-
-
-
Images must have alternate text
- Learn more -
-
-
image-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures <img> elements have alternate text or a role of none or presentation

-
- critical -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
-
-
-
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
-
-
-
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"
-
-
-
-
-
-
-
Ensures landmarks are unique
- Learn more -
-
-
landmark-unique
-
- Best practice -
-
-
-

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

-
- moderate -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
-
-
-
-
-
-
-
Links must be distinguished from surrounding text in a way that does not rely on color
- Learn more -
-
-
link-in-text-block
-
- WCAG 2.0 Level A -
-
-
-

Links can be distinguished without relying on color

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"
-
-
-
-
-
-
-
Links must have discernible text
- Learn more -
-
-
link-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures links have discernible text

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"
-
-
-
-
-
-
-
All page content must be contained by landmarks
- Learn more -
-
-
region
-
- Best practice -
-
-
-

Ensures all page content is contained by landmarks

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"
-
-
-
-
-
-
-
Elements should not have tabindex greater than zero
- Learn more -
-
-
tabindex
-
- Best practice -
-
-
-

Ensures tabindex attribute values are not greater than 0

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
-
-
-
-
- - -" -`; - -exports[`createHtmlReport() test Verify report is created with violations and passes 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - Page URL: - https://dequeuniversity.com/demo/mars/ -
- - -
-
axe-core found 85 violations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
-

Failed

-
-
-
-
Buttons must have discernible text
- Learn more -
-
-
button-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures buttons have discernible text

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"
-
-
-
-
-
-
-
Elements must have sufficient color contrast
- Learn more -
-
-
color-contrast
-
- WCAG 2.0 Level AA -
-
-
-

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"
-
-
-
-
-
-
-
IDs of active elements must be unique
- Learn more -
-
-
duplicate-id-active
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value of active elements is unique

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
-
-
-
-
-
-
-
id attribute value must be unique
- Learn more -
-
-
duplicate-id
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value is unique

-
- minor -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> -</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)"
-
-
-
-
-
-
-
Frames must have title attribute
- Learn more -
-
-
frame-title
-
- WCAG 2.0 Level A -
-
-
-

Ensures <iframe> and <frame> elements contain a non-empty title attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"
-
-
-
-
-
-
-
<html> element must have a lang attribute
- Learn more -
-
-
html-has-lang
-
- WCAG 2.0 Level A -
-
-
-

Ensures every HTML document has a lang attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
-
-
-
-
-
-
-
Images must have alternate text
- Learn more -
-
-
image-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures <img> elements have alternate text or a role of none or presentation

-
- critical -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
-
-
-
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
-
-
-
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"
-
-
-
-
-
-
-
Ensures landmarks are unique
- Learn more -
-
-
landmark-unique
-
- Best practice -
-
-
-

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

-
- moderate -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
-
-
-
-
-
-
-
Links must be distinguished from surrounding text in a way that does not rely on color
- Learn more -
-
-
link-in-text-block
-
- WCAG 2.0 Level A -
-
-
-

Links can be distinguished without relying on color

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"
-
-
-
-
-
-
-
Links must have discernible text
- Learn more -
-
-
link-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures links have discernible text

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"
-
-
-
-
-
-
-
All page content must be contained by landmarks
- Learn more -
-
-
region
-
- Best practice -
-
-
-

Ensures all page content is contained by landmarks

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"
-
-
-
-
-
-
-
Elements should not have tabindex greater than zero
- Learn more -
-
-
tabindex
-
- Best practice -
-
-
-

Ensures tabindex attribute values are not greater than 0

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
-
-
-
-
-
-
-
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
-
-
-
-
-
- - -" -`; - -exports[`createHtmlReport() test Verify report is created with violations, passes and incomplete with optional reportFileName and outputDir params 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - Page URL: - https://dequeuniversity.com/demo/mars/ -
- - -
-
axe-core found 85 violations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
-

Failed

-
-
-
-
Buttons must have discernible text
- Learn more -
-
-
button-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures buttons have discernible text

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"
-
-
-
-
-
-
-
Elements must have sufficient color contrast
- Learn more -
-
-
color-contrast
-
- WCAG 2.0 Level AA -
-
-
-

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"
-
-
-
-
-
-
-
IDs of active elements must be unique
- Learn more -
-
-
duplicate-id-active
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value of active elements is unique

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
-
-
-
-
-
-
-
id attribute value must be unique
- Learn more -
-
-
duplicate-id
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value is unique

-
- minor -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> -</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)"
-
-
-
-
-
-
-
Frames must have title attribute
- Learn more -
-
-
frame-title
-
- WCAG 2.0 Level A -
-
-
-

Ensures <iframe> and <frame> elements contain a non-empty title attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"
-
-
-
-
-
-
-
<html> element must have a lang attribute
- Learn more -
-
-
html-has-lang
-
- WCAG 2.0 Level A -
-
-
-

Ensures every HTML document has a lang attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
-
-
-
-
-
-
-
Images must have alternate text
- Learn more -
-
-
image-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures <img> elements have alternate text or a role of none or presentation

-
- critical -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
-
-
-
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
-
-
-
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"
-
-
-
-
-
-
-
Ensures landmarks are unique
- Learn more -
-
-
landmark-unique
-
- Best practice -
-
-
-

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

-
- moderate -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
-
-
-
-
-
-
-
Links must be distinguished from surrounding text in a way that does not rely on color
- Learn more -
-
-
link-in-text-block
-
- WCAG 2.0 Level A -
-
-
-

Links can be distinguished without relying on color

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"
-
-
-
-
-
-
-
Links must have discernible text
- Learn more -
-
-
link-name
-
- WCAG 2.0 Level A -
-
-
-

Ensures links have discernible text

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"
-
-
-
-
-
-
-
All page content must be contained by landmarks
- Learn more -
-
-
region
-
- Best practice -
-
-
-

Ensures all page content is contained by landmarks

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"
-
-
-
-
-
-
-
Elements should not have tabindex greater than zero
- Learn more -
-
-
tabindex
-
- Best practice -
-
-
-

Ensures tabindex attribute values are not greater than 0

-
- serious -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
-
-
-
-
-
-
-
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+ + +" +`; + +exports[`Successful tests Empty all: violation, passes, incomplete, inapplicable 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 0 violations
+ + + +
+
+
+
+ +
+
+
+
@@ -10153,7 +5042,7 @@ exports[`createHtmlReport() test Verify report is created with violations, passe aria-expanded=\\"false\\" aria-controls=\\"incomplete\\" > - axe returned 4 incomplete checks. Expand + axe returned 0 incomplete checks. Expand details on click @@ -10178,61 +5067,139 @@ exports[`createHtmlReport() test Verify report is created with violations, passe > to learn more.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
+
+
+
+
+ +
+
+
+
+

What 'inapplicable' axe checks means?

+

+ The inapplicable array lists all the rules for which no matching + elements were found on the page. +

+

+ Visit axe API Documentation + to learn more. +

+
+
+
+
+
+ + +" +`; + +exports[`Successful tests Empty violations 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
axe-core found 0 violations
+ + +
" `; -exports[`createHtmlReport() test Verify report is created with violations, passes and incomplete with optional reportFileName, url and project key params 1`] = ` +exports[`Successful tests Inapplicable present 1`] = ` " @@ -10247,17 +5214,28 @@ exports[`createHtmlReport() test Verify report is created with violations, passe .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + }

- AXE Accessibility Results for DEQUE project + AXE Accessibility Results

-
- +
+
Page URL: https://dequeuniversity.com/demo/mars/
- - -
+
+
axe-core found 85 violations
- - - - - - + + + + + + @@ -10432,22 +5409,662 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Buttons must have discernible text
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
+ + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
Learn more
-
button-name
+
html-has-lang
WCAG 2.0 Level A
-

Ensures buttons have discernible text

+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

critical
@@ -10456,18 +6073,90 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - - - + + + + - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> -<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> -</button>".departure-date > .ui-datepicker-trigger:nth-child(4)"1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -10477,93 +6166,1059 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Elements must have sufficient color contrast
+
Form elements must have labels
Learn more
-
color-contrast
+
label
- WCAG 2.0 Level AA + WCAG 2.0 Level A
-

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+

Ensures every form element has a label

- serious + critical
- - - + + + + - - - + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3"1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + - - - + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> -&nbsp; </p>"#vap-plan > p:nth-child(3)"#Element sourceElement location + To solve this violation, you need to... +
3<h3>Countdown...</h3>":root > h3"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + - - - + + + + + + - - - + + + + + +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"#Element sourceElement location + To solve this violation, you need to... +
5<h3>Blast Off!</h3>":root > h3"1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + - - - + + + + + + - - - + + + + + +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> -&nbsp; </p>"#vap-travel > p:nth-child(3)"#Element sourceElement location + To solve this violation, you need to... +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + - - - + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"#Element sourceElement location + To solve this violation, you need to... +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> -</p>"li:nth-child(2) > .deal-text > p"1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + - - - + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"#Element sourceElement location + To solve this violation, you need to... +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
@@ -10573,22 +7228,22 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
IDs of active elements must be unique
+
Elements should not have tabindex greater than zero
Learn more
-
duplicate-id-active
+
tabindex
- WCAG 2.0 Level A + Best practice
-

Ensures every id attribute value of active elements is unique

+

Ensures tabindex attribute values are not greater than 0

serious
@@ -10597,409 +7252,1490 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - - - + + + + - - - + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
-
-
-
-
id attribute value must be unique
- Learn more -
-
-
duplicate-id
-
- WCAG 2.0 Level A -
-
-
-

Ensures every id attribute value is unique

-
- minor -
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
+
+
+
+
+
+
+ +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> -<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form> -</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> -<input type="hidden" name="fn" value="Search"> -<input type="text" class="search" name="query" placeholder="search"> -<input type="submit" class="control-search"> -</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> -<h1 style="color:#eee;">Destination Mars </h1> -<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)"
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
+
-
-
-
-
Frames must have title attribute
- Learn more -
-
-
frame-title
-
- WCAG 2.0 Level A -
-
-
-

Ensures <iframe> and <frame> elements contain a non-empty title attribute

-
- serious -
+
+
+
+
+ +
-
- - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"
+
+
+

What 'inapplicable' axe checks means?

+

+ The inapplicable array lists all the rules for which no matching + elements were found on the page. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAG
1accesskey attribute value must be uniqueaccesskeysBest practice
2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
3ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
4Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
5ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
6<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
7<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
8<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-listWCAG 2.0 Level A
9<dt> and <dd> elements must be contained by a <dl>dlitemWCAG 2.0 Level A
10Elements in the focus order need a role appropriate for interactive contentfocus-order-semanticsBest practice
11HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
12Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
13Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A
14Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
15Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
16Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
17Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
18Document must not have more than one banner landmarklandmark-no-duplicate-bannerBest practice
19Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practice
20Document must not have more than one main landmarklandmark-no-duplicate-mainBest practice
21<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
22Timed refresh must not existmeta-refreshWCAG 2.0 Level A
23<object> elements must have alternate textobject-altWCAG 2.0 Level A
24Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
25[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
26scope attribute should be used correctlyscope-attr-validBest practice
27Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
28Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
29The skip-link target should exist and be focusableskip-linkBest practice
30svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
31Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A
32All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level A
33All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A
34lang attribute must have a valid valuevalid-langWCAG 2.0 Level AA
35<video> or <audio> elements do not autoplay audiono-autoplay-audioWCAG 2.0 Level A
+
-
-
-
-
<html> element must have a lang attribute
- Learn more -
-
-
html-has-lang
-
- WCAG 2.0 Level A -
-
-
-

Ensures every HTML document has a lang attribute

-
- serious -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
-
+
+ + +" +`; + +exports[`Successful tests No violations found, passes, incomplete, url + reportFileName & projectKey 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results for DEQUE project +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
-
-
-
-
Images must have alternate text
- Learn more -
-
-
image-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures <img> elements have alternate text or a role of none or presentation

-
- critical -
+
axe-core found 0 violations
+ + + +
+
+
+
+ +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A2
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A13
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A13
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A13
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A13
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A10
10ARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Headings must not be emptyempty-headingBest practice6
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Heading levels should only increase by oneheading-orderBest practice6
21Hidden content on the page cannot be analyzedhidden-contentBest practice434
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A1
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A1
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25Form elements should have a visible labellabel-title-onlyBest practice17
26Form elements must have labelslabelWCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A1
28Links must have discernible textlink-nameWCAG 2.0 Level A5
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32Zooming and scaling must not be disabledmeta-viewportBest practice1
33Page must contain a level-one headingpage-has-heading-oneBest practice1
34All page content must be contained by landmarksregionBest practice280
35Elements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
+
+
+
+
+ +
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
+
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"
-
+
+ + +" +`; + +exports[`Successful tests Raw AxeResults passed and all optional params 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results for DEQUE project +

+
+
+ Page URL: + http://example.com/ +
+
Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
+
axe-core found 6 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
2Document must have one main landmarklandmark-one-mainBest practicemoderate1
3All page content must be contained by landmarksregionBest practicemoderate1
4Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

-
Ensures landmarks are unique
+
<html> element must have a lang attribute
Learn more
-
landmark-unique
+
html-has-lang
- Best practice + WCAG 2.0 Level A
-

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+

Ensures every HTML document has a lang attribute

- moderate + serious
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"1<html>"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
@@ -11009,40 +8745,52 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Links must be distinguished from surrounding text in a way that does not rely on color
+
Document must have one main landmark
Learn more
-
link-in-text-block
+
landmark-one-main
- WCAG 2.0 Level A + Best practice
-

Links can be distinguished without relying on color

+

Ensures the document has a main landmark

- serious + moderate
- - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"1<html>"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
@@ -11052,78 +8800,57 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Links must have discernible text
+
All page content must be contained by landmarks
Learn more
-
link-name
+
region
- WCAG 2.0 Level A + Best practice
-

Ensures links have discernible text

+

Ensures all page content is contained by landmarks

- serious + moderate
- - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> -<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"1<div> + <h1>Example Domain</h1> + <p>This domain is for use in illustrative examples in documents. You may use this + domain in literature without prior coordination or asking for permission.</p> + <p><a href="https://www.iana.org/domains/example">More information...</a></p> +</div>"div" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
@@ -11133,1317 +8860,1321 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
All page content must be contained by landmarks
+
Elements should not have tabindex greater than zero
Learn more
-
region
+
tabindex
Best practice
-

Ensures all page content is contained by landmarks

+

Ensures tabindex attribute values are not greater than 0

- moderate + serious
- - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> -<span class="traveler-label">Traveler</span> -</span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> -<select id="traveler0" class="traveler-type"> -<option value="0">Adult (26+)</option> -<option value="1">Youth (12-25)</option> -<option value="2">Child (4-11)</option> -<option value="3">Senior (60+)</option> -</select> -</span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
-
-
-
-
Elements should not have tabindex greater than zero
- Learn more -
-
-
tabindex
-
- Best practice -
-
-
-

Ensures tabindex attribute values are not greater than 0

-
- serious -
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check
1aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A1
2Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
3Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA3
4Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
5Headings must not be emptyempty-headingBest practice1
6Heading levels should only increase by oneheading-orderBest practice1
7Hidden content on the page cannot be analyzedhidden-contentBest practice14
8Links must have discernible textlink-nameWCAG 2.0 Level A1
9Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
10Zooming and scaling must not be disabledmeta-viewportBest practice1
11Page must contain a level-one headingpage-has-heading-oneBest practice1
12All page content must be contained by landmarksregionBest practice4
+
+
+
+
+
+
+
+
+ +
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+
-
+
-
+
+

What 'inapplicable' axe checks means?

+

+ The inapplicable array lists all the rules for which no matching + elements were found on the page. +

+

+ Visit axe API Documentation + to learn more. +

- - - - - + + + + + + + + + + + + + + + + + + - - + - - - - + + + - - - - + + + - - + - - + - - + - - + + + + + + + + - - + + + + + + + + - - + - - + + + + + + + + - - + - - + + + + + + + + - - - - + + + - - - - + + + + + + + + + + - - + - - + - - - - + + + - - + - - - - + + + - - - - + + + - - - - + + + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + + + - - - - + + + - - - - + + + - - - - + + + - - - - - - + + + + - - - - - + + + + - - - + + + - - - - + + + - -
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAG
1accesskey attribute value must be uniqueaccesskeysBest practice
2Active <area> elements must have alternate textarea-altWCAG 2.0 Level A
3 Elements must only use allowed ARIA attributes aria-allowed-attr WCAG 2.0 Level A10
24 ARIA role must be appropriate for the element aria-allowed-role Best practice14
3aria-hidden='true' must not be present on the document bodyaria-hidden-body5ARIA hidden element must not contain focusable elementsaria-hidden-focus WCAG 2.0 Level A1
4ARIA hidden element must not contain focusable elementsaria-hidden-focus6ARIA input fields must have an accessible namearia-input-field-name WCAG 2.0 Level A2
57 Required ARIA attributes must be provided aria-required-attr WCAG 2.0 Level A13
68 Certain ARIA roles must contain particular children aria-required-children WCAG 2.0 Level A13
79 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2.0 Level A13
810Use aria-roledescription on elements with a semantic rolearia-roledescriptionWCAG 2.0 Level A
11 ARIA roles used must conform to valid values aria-roles WCAG 2.0 Level A13
912ARIA toggle fields have an accessible namearia-toggle-field-nameWCAG 2.0 Level A
13 ARIA attributes must conform to valid values aria-valid-attr-value WCAG 2.0 Level A10
1014 ARIA attributes must conform to valid names aria-valid-attr WCAG 2.0 Level A10
1115<audio> elements must have a captions trackaudio-captionWCAG 2.0 Level A
16 autocomplete attribute must be used correctly autocomplete-valid WCAG 2.1 Level AA3
1217 Inline text spacing must be adjustable with custom stylesheets avoid-inline-spacing WCAG 2.1 Level AA8
1318<blink> elements are deprecated and must not be usedblinkWCAG 2.0 Level A
19 Buttons must have discernible text button-name WCAG 2.0 Level A12
14Page must have means to bypass repeated blocksbypass20<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-list WCAG 2.0 Level A1
15Documents must have <title> element to aid in navigationdocument-title21<dt> and <dd> elements must be contained by a <dl>dlitemWCAG 2.0 Level A
22IDs of active elements must be uniqueduplicate-id-active WCAG 2.0 Level A1
1623 IDs used in ARIA and labels must be unique duplicate-id-aria WCAG 2.0 Level A7
1724 id attribute value must be unique duplicate-id WCAG 2.0 Level A20
18Headings must not be emptyempty-heading25Elements in the focus order need a role appropriate for interactive contentfocus-order-semantics Best practice6
1926 Form field should not have multiple label elements form-field-multiple-labels WCAG 2.0 Level A17
20Heading levels should only increase by oneheading-order27Frames must be tested with axe-coreframe-tested Best practice6
21Hidden content on the page cannot be analyzedhidden-content28Frames must have a unique title attributeframe-title-unique Best practice434
22<html> element must have a lang attributehtml-has-lang29Frames must have title attributeframe-title WCAG 2.0 Level A1
2330 <html> element must have a valid value for the lang attribute html-lang-valid WCAG 2.0 Level A1
2431HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level A
32Images must have alternate textimage-altWCAG 2.0 Level A
33Alternative text of images should not be repeated as textimage-redundant-altBest practice
34Input buttons must have discernible textinput-button-nameWCAG 2.0 Level A
35Image buttons must have alternate textinput-image-altWCAG 2.0 Level A
36 Elements must have their visible text as part of their accessible name label-content-name-mismatch WCAG 2.1 Level A1
2537 Form elements should have a visible label label-title-only Best practice17
2638 Form elements must have labels label WCAG 2.0 Level A12
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A139Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practice
28Links must have discernible textlink-nameWCAG 2.0 Level A540Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practice
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A141Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practice
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A342Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practice
31Users should be able to zoom and scale the text up to 500%meta-viewport-large43Document must not have more than one banner landmarklandmark-no-duplicate-banner Best practice1
32Zooming and scaling must not be disabledmeta-viewport44Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfo Best practice1
33Page must contain a level-one headingpage-has-heading-one45Document must not have more than one main landmarklandmark-no-duplicate-main Best practice1
34All page content must be contained by landmarksregion46Ensures landmarks are uniquelandmark-unique Best practice280
35Elements should not have tabindex greater than zerotabindexBest practice547Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice148<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A
37Data or header cells should not be used to give caption to a data table.table-fake-caption49<li> elements must be contained in a <ul> or <ol>listitem WCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attr50<marquee> elements are deprecated and must not be usedmarquee WCAG 2.0 Level A1
-
-
-
-
-
-
-
-
- -
-
-
-
-

What 'incomplete' axe checks means?

-

- Incomplete results were aborted and require further testing. This - can happen either because of technical restrictions to what the rule - can test, or because a javascript error occurred. -

-

- Visit axe API Documentation - to learn more. -

- - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - - + + + - - - - + + + - - - - + + + + + + + + + + + + + + + + + - -
#DescriptionAxe rule IDWCAGNodes with incomplete check51Timed refresh must not existmeta-refreshWCAG 2.0 Level A
52<object> elements must have alternate textobject-altWCAG 2.0 Level A
53Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level A
54[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level A
55scope attribute should be used correctlyscope-attr-validBest practice
56Ensure that scrollable region has keyboard accessscrollable-region-focusableWCAG 2.0 Level A
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA13257Server-side image maps must not be usedserver-side-image-mapWCAG 2.0 Level A
2Hidden content on the page cannot be analyzedhidden-content58The skip-link target should exist and be focusableskip-link Best practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-block59svg elements with an img role have an alternative textsvg-img-alt WCAG 2.0 Level A22
4<video> elements must have captionsvideo-caption60Elements should not have tabindex greater than zerotabindexBest practice
61The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice
62Data or header cells should not be used to give caption to a data table.table-fake-caption WCAG 2.0 Level A1
-
-
-
-
-
- - -" -`; - -exports[`createHtmlReport() test Verify report with no violations, no passes, no incomplete, no inapplicable 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
- - Page URL: - https://dequeuniversity.com/demo/mars/ -
- - -
-
axe-core found 0 violations
- - - -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-

What 'incomplete' axe checks means?

-

- Incomplete results were aborted and require further testing. This - can happen either because of technical restrictions to what the rule - can test, or because a javascript error occurred. -

-

- Visit axe API Documentation - to learn more. -

-
-
-
-
-
-
-
-
- -
-
-
-
-

What 'inapplicable' axe checks means?

-

- The inapplicable array lists all the rules for which no matching - elements were found on the page. -

-

- Visit axe API Documentation - to learn more. -

+ + 63 + All non-empty td element in table larger than 3 by 3 must have an associated table header + td-has-header + WCAG 2.0 Level A + + + + 64 + All cells in a table element that use the headers attribute must only refer to other cells of that same table + td-headers-attr + WCAG 2.0 Level A + + + + 65 + All th elements and elements with role=columnheader/rowheader must have data cells they describe + th-has-data-cells + WCAG 2.0 Level A + + + + 66 + lang attribute must have a valid value + valid-lang + WCAG 2.0 Level AA + + + + 67 + <video> elements must have captions + video-caption + WCAG 2.0 Level A + + + + 68 + <video> or <audio> elements do not autoplay audio + no-autoplay-audio + WCAG 2.0 Level A + + +
-
- - -" -`; - -exports[`createHtmlReport() test Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results for DEQUE project -

-
- - Page URL: - https://dequeuniversity.com/demo/mars/ -
- - -
-
axe-core found 0 violations
- - - -
+
-
+
- - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + - - - - - + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + - - - - - + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - - - - + + + - - + - - + - - - - - + + + - - - - - + + +
#DescriptionAxe rule IDWCAGNodes passed check#Rule IDEnabled
1object-alttrue
2role-img-alttrue
3input-image-alttrue
4image-alttrue
5svg-img-alttrue
6area-alttrue
7audio-captiontrue
8video-captiontrue
9definition-listtrue
10dlitemtrue
11listitemtrue
12listtrue
13th-has-data-cellstrue
14td-headers-attrtrue
15td-has-headertrue
16p-as-headingtrue
17aria-required-parenttrue
18aria-required-childrentrue
19table-fake-captiontrue
20css-orientation-lockfalse
21autocomplete-validtrue
22link-in-text-blocktrue
23no-autoplay-audiotrue
24color-contrasttrue
25meta-viewporttrue
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A1026avoid-inline-spacingtrue
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice1427server-side-image-maptrue
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A128meta-refreshtrue
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A229blinktrue
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A1330marqueetrue
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A1331bypasstrue
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A1332frame-titletrue
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A1333document-titletrue
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A1034scrollable-region-focusabletrue
10ARIA attributes must conform to valid names35identical-links-same-purposefalse
36label-content-name-mismatchtrue
37html-has-langtrue
38html-lang-validtrue
39html-xml-lang-mismatchtrue
40valid-langtrue
41form-field-multiple-labelstrue
42duplicate-id-activetrue
43duplicate-idtrue
44duplicate-id-ariatrue
45 aria-valid-attrWCAG 2.0 Level A10true
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA346aria-valid-attr-valuetrue
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA847aria-input-field-nametrue
13Buttons must have discernible text48aria-rolestrue
49aria-toggle-field-nametrue
50aria-hidden-focustrue
51aria-hidden-bodytrue
52 button-nameWCAG 2.0 Level A12true
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A153aria-allowed-attrtrue
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A154input-button-nametrue
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A755aria-required-attrtrue
56aria-roledescriptiontrue
57link-nametrue
58labeltrue
59accesskeystrue
60regiontrue
61aria-allowed-roletrue
62landmark-banner-is-top-leveltrue
17id attribute value must be uniqueduplicate-idWCAG 2.0 Level A2063landmark-complementary-is-top-leveltrue
18Headings must not be emptyempty-headingBest practice664landmark-contentinfo-is-top-leveltrue
19Form field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A1765focus-order-semanticstrue
20Heading levels should only increase by oneheading-orderBest practice666tabindextrue
21Hidden content on the page cannot be analyzedhidden-contentBest practice43467landmark-no-duplicate-maintrue
22<html> element must have a lang attributehtml-has-langWCAG 2.0 Level A168label-title-onlytrue
23<html> element must have a valid value for the lang attributehtml-lang-validWCAG 2.0 Level A169frame-testedtrue
24Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A170frame-title-uniquetrue
25Form elements should have a visible labellabel-title-onlyBest practice1771heading-ordertrue
26Form elements must have labelslabelWCAG 2.0 Level A1272empty-headingtrue
27Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A173hidden-contenttrue
28Links must have discernible textlink-nameWCAG 2.0 Level A574landmark-uniquetrue
29<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A175landmark-main-is-top-leveltrue
30<li> elements must be contained in a <ul> or <ol>listitemWCAG 2.0 Level A376page-has-heading-onetrue
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice177landmark-one-maintrue
32Zooming and scaling must not be disabledmeta-viewportBest practice178landmark-no-duplicate-bannertrue
33Page must contain a level-one headingpage-has-heading-oneBest practice179landmark-no-duplicate-contentinfotrue
34All page content must be contained by landmarksregionBest practice28080scope-attr-validtrue
35Elements should not have tabindex greater than zerotabindexBest practice581image-redundant-alttrue
36The <caption> element should not contain the same text as the summary attribute82 table-duplicate-nameBest practice1true
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A183skip-linktrue
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A184meta-viewport-largetrue
@@ -12451,87 +10182,4227 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
-
-
-
- -
+
+ + +" +`; + +exports[`Successful tests Violations 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
+ + +" +`; + +exports[`Successful tests Violations and URL with default report file name 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 85 violations
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more
-
-
-

What 'incomplete' axe checks means?

-

- Incomplete results were aborted and require further testing. This - can happen either because of technical restrictions to what the rule - can test, or because a javascript error occurred. -

-

- Visit axe API Documentation - to learn more. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
-
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more +
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
+
+
+
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
@@ -12541,7 +14412,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in " `; -exports[`createHtmlReport() test Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params 2`] = ` +exports[`Successful tests Violations, passes and url 1`] = ` " @@ -12556,17 +14427,28 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in .violationCardLine { display: flex; justify-content: space-between; - align-items: center; - } - .violationCardTitleItem { - white-space: nowrap; + align-items: start; } .learnMore { margin-bottom: 0.75rem; + white-space: nowrap; + color: #2557a7; + } + .card-link { + color: #2557a7; } .violationNode { font-size: 0.75rem; } + .wrapBreakWord { + word-break: break-word; + } + .summary { + font-size: 1rem; + } + .summarySection { + margin: 0.5rem 0; + } AXE Accessibility Results -
- +
+
Page URL: https://dequeuniversity.com/demo/mars/
- - -
+
+
axe-core found 85 violations
- - - - - - + + + + + + @@ -12765,18 +14646,35 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
- - - + + + + - - + - + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> + 1<button class="ui-datepicker-trigger" type="button"> <!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> </button>".departure-date > .ui-datepicker-trigger:nth-child(4)"".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
@@ -12810,69 +14708,171 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3"
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> + 1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> &nbsp; </p>"#vap-plan > p:nth-child(3)"
3<h3>Countdown...</h3>":root > h3"
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)"
5<h3>Blast Off!</h3>":root > h3"
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> + "#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> &nbsp; </p>"#vap-travel > p:nth-child(3)"
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> + "#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> </p>"li:nth-child(2) > .deal-text > p"
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]""li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
@@ -12906,16 +14906,28 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
@@ -12949,73 +14961,166 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full"
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"
3<div id="search-bar" class="pull-left"> + 1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> <form id="search" action="/demo/mars/mars2" method="get"> <input type="hidden" name="fn" value="Search"> <input type="text" class="search" name="query" placeholder="search"> <input type="submit" class="control-search"> </form> </div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)"
4<form id="search" action="/demo/mars/mars2" method="get"> + ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> <input type="hidden" name="fn" value="Search"> <input type="text" class="search" name="query" placeholder="search"> <input type="submit" class="control-search"> </form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]"
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right"
6<div id="vap-section"> + ":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> <h1 style="color:#eee;">Destination Mars </h1> <h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)"
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]"
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)"
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)"
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)""#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
@@ -13049,21 +15154,50 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - + - - - + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player"
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78"1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -13097,16 +15231,28 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
@@ -13140,31 +15286,90 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
@@ -13198,16 +15403,32 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
@@ -13241,31 +15462,70 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html"
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html"
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook"
4<html lang="en" class=" xl en">".twitter-follow-button", "html"1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
@@ -13299,16 +15559,28 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)"1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
@@ -13342,16 +15614,28 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]"1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
@@ -13385,54 +15669,201 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]"
2<a href="mars2.html?a=crater_adventure"> + 1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
3<a href="mars2.html?a=crater_adventure"> + ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
4<a href="mars2.html?a=crater_adventure"> + ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> <img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]"
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active"
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]"
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]"":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
@@ -13466,77 +15897,188 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)"
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer"
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
4<input type="submit" class="control-search">":root > .control-search[type="submit"]"
5<div class="span7 left-first pull-left" id="left-column">"#left-column"
6<div id="widget-controls" class="widget-container head">"#widget-controls"
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3"
8<div id="route-type-radio-group" class="">"#route-type-radio-group"
9<div id="route-type">"#route-type"
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group"
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3"
12<span class="wrapper"> + 1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> <span class="traveler-label">Traveler</span> </span>"#passenger0 > .wrapper:nth-child(1)"
13<span class="wrapper age-range"> + "#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> <select id="traveler0" class="traveler-type"> <option value="0">Adult (26+)</option> <option value="1">Youth (12-25)</option> @@ -13544,127 +16086,352 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in <option value="3">Senior (60+)</option> </select> </span>"#passenger0 > .age-range.wrapper"
14<div class="add-buttons" id="add-traveler">"#add-traveler"
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit"
16<div class="interior-container">"#video-box > .interior-container"
17<div id="social-bar" class="container-fluid-full">"#social-bar"
18<h4>Book Your Trip</h4>"#footer-book > h4"
19<ul>"#footer-book > ul"
20<h4>Mars Shuttles</h4>"#footer-trains > h4"
21<ul>"#footer-trains > ul"
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4"
23<ul>"#footer-passes > ul"
24<h4>Mars Adventures</h4>"#footer-plan > h4"
25<ul>"#footer-plan > ul"
26<h4>FAQs</h4>"#footer-faq > h4"
27<ul>"#footer-faq > ul"
28<h4>Connect With Us</h4>"#footer-connect > h4"
29<ul>"#footer-connect > ul"
30<div id="copyright" class="container">"#copyright"
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player"
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)"
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected"
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2"
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o"
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]"
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]""#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
@@ -13698,26 +16465,56 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
#Source CodeSelector#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0"
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0"
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0"1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
@@ -13751,11 +16548,11 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - - - + + + + + @@ -14068,378 +16865,2542 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in -
-
-
-
- -
+
+ + +" +`; + +exports[`Successful tests Violations, passes, incomplete, url with reportFileName & outputDir 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+
+ Page URL: + https://dequeuniversity.com/demo/mars/ +
+
+
+
axe-core found 85 violations
+
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGImpactCount
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious1
7Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9Document must have one main landmarklandmark-one-mainBest practicemoderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate1
11Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level Aserious1
12Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13All page content must be contained by landmarksregionBest practicemoderate37
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
+

Failed

+
+
+
+
Buttons must have discernible text
+ Learn more +
+
+
button-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> +<!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> --> +</button>".departure-date > .ui-datepicker-trigger:nth-child(4)" + +

Fix any of the following:

+
    +
  • 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
    • +
+ +
+
+
+
+
+
+
+
Elements must have sufficient color contrast
+ Learn more +
+
+
color-contrast
+
+ WCAG 2.0 Level AA +
+
+
+

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
2<p>Step out of your comfort zone, and into a rocket with enough fuel to blast a Manhattan-sized crater if it explodes. But it won't. Probably.<br> +&nbsp; </p>"#vap-plan > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
3<h3>Countdown...</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
4<p>If you're serious about traveling to Mars - really serious - then <a href="mars2.html?a=last_will">prepare your last will and testament</a>, and book a trip! </p>"#vap-book > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
5<h3>Blast Off!</h3>":root > h3" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
6<p>Expect violent turbulence, bone-crushing g-forces, muscle atrophy, and certain death (hey, everyone's death is certain at some point, right?).<br> +&nbsp; </p>"#vap-travel > p:nth-child(3)" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
9<p>Spend an extra 3 months in orbit around Mars in our newly-remodelled MarsPod and get a free package of freeze-wrapped dehydrated astronaut ice cream. <a class="link-arrow" href="mars2.html?a=ice_cream">Get your free dehydrated ice cream!</a> +</p>"li:nth-child(2) > .deal-text > p" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Fix any of the following:

+
    +
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +
+ +
+
+
+
+
+
+
+
IDs of active elements must be unique
+ Learn more +
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+ +
+
+
+
+
+
+
+
id attribute value must be unique
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
3<div id="search-bar" class="pull-left"> +<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form> +</div>".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
4<form id="search" action="/demo/mars/mars2" method="get"> +<input type="hidden" name="fn" value="Search"> +<input type="text" class="search" name="query" placeholder="search"> +<input type="submit" class="control-search"> +</form>":root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
5<nav id="right-control-nav" class="pull-right" style="display: inline;">".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
6<div id="vap-section"> +<h1 style="color:#eee;">Destination Mars </h1> +<h2 style="color:#acbad0;">A trip to Mars starts in your imagination. Are you bold enough, brave enough, <strong>foolish enough?</strong> We are. You belong on Mars with fools like us. Most of us don't bite. Much.</h2></div>"#left-column > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
10<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>".ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)" + +

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+ +
+
+
+
+
+
+
+
Frames must have title attribute
+ Learn more +
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <iframe> and <frame> elements contain a non-empty title attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<iframe width="365" height="205" name="player" id="player" src="https://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>"#player" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<iframe id="fafbba78" name="f2bc5e72d" scrolling="no" style="border: none; overflow: hidden; height: 62px; width: 292px;" class="fb_ltr" src="/assets/demo-sites/mars/js/likebox.html"></iframe>"#fafbba78" + +

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
    • +
  • Element has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
<html> element must have a lang attribute
+ Learn more +
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+ +
+
+
+
+
+
+
+
Images must have alternate text
+ Learn more +
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

Ensures <img> elements have alternate text or a role of none or presentation

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
4<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]" + +

Fix any of the following:

+
    +
  • Element does not have an alt attribute
    • +
  • 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 has no title attribute or the title attribute is empty
    • +
  • Element's default semantics were not overridden with role="presentation"
    • +
  • Element's default semantics were not overridden with role="none"
    • +
+ +
+
+
+
+
+
+
+
Form elements must have labels
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

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) <label>
    • +
  • Form element does not have an explicit <label>
    • +
  • Element has no title attribute or the title attribute is empty
    • +
+ +
+
+
+
+
+
+
+
Document must have one main landmark
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">"html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
2<html lang="en" dir="ltr" data-cast-api-enabled="true">"#player", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
3<html lang="en" id="facebook" class="">"#fafbba78", "#facebook" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
4<html lang="en" class=" xl en">".twitter-follow-button", "html" + +

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+ +
+
+
+
+
+
+
+
Ensures landmarks are unique
+ Learn more +
+
+
landmark-unique
+
+ Best practice +
+
+
+

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" + +

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+ +
+
+
+
+
+
+
+
Links must be distinguished from surrounding text in a way that does not rely on color
+ Learn more +
+
+
link-in-text-block
+
+ WCAG 2.0 Level A +
+
+
+

Links can be distinguished without relying on color

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a href="mars2.html?a=last_will">prepare your last will and testament</a>"a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" + +

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+ +
+
+
+
+
+
+
+
Links must have discernible text
+ Learn more +
+
+
link-name
+
+ WCAG 2.0 Level A +
+
+
+

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\\\\/\\\\#"]" + +

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"
    • +
+ +
2<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
3<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
4<a href="mars2.html?a=crater_adventure"> +<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120"></a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

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"
    • +
+ +
5<a href="mars2.html?a="></a>":root > a[href="mars2\\\\.html\\\\?a\\\\="]" + +

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"
    • +
+ +
6<a target="player" data-text="Life was possible on Mars" class="fader first active" href="http://www.youtube.com/embed/OagLGti_hTE?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>".active" + +

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"
    • +
+ +
7<a target="player" data-text="Why Mars died" class="fader first" href="http://www.youtube.com/embed/oC31pqk9sak?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="Why\\\\ Mars\\\\ died"]" + +

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"
    • +
+ +
8<a target="player" data-text="The world that never was" class="fader first" href="http://www.youtube.com/embed/JgMXPXdqJn8?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1" id="default"></a>"a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]" + +

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"
    • +
+ +
+
+
+
+
+
+
+
All page content must be contained by landmarks
+ Learn more
-
-
-

What 'incomplete' axe checks means?

-

- Incomplete results were aborted and require further testing. This - can happen either because of technical restrictions to what the rule - can test, or because a javascript error occurred. -

-

- Visit axe API Documentation - to learn more. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-captionWCAG 2.0 Level A1
-
+
+
region
+
+ Best practice +
+
+
+

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
2<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>"#purposeDisclaimer" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
3<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
4<input type="submit" class="control-search">":root > .control-search[type="submit"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
5<div class="span7 left-first pull-left" id="left-column">"#left-column" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
6<div id="widget-controls" class="widget-container head">"#widget-controls" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
7<h3>Book your Trip</h3>"#route-select > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
8<div id="route-type-radio-group" class="">"#route-type-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
9<div id="route-type">"#route-type" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
10<div id="pass-question-radio-group" class="">"#pass-question-radio-group" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
11<h3>Who Is Traveling?</h3>".middle.widget-container:nth-child(13) > .interior-container > h3" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
12<span class="wrapper"> +<span class="traveler-label">Traveler</span> +</span>"#passenger0 > .wrapper:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
13<span class="wrapper age-range"> +<select id="traveler0" class="traveler-type"> +<option value="0">Adult (26+)</option> +<option value="1">Youth (12-25)</option> +<option value="2">Child (4-11)</option> +<option value="3">Senior (60+)</option> +</select> +</span>"#passenger0 > .age-range.wrapper" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
14<div class="add-buttons" id="add-traveler">"#add-traveler" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
15<div id="booking-box-submit" class="widget-container footer">"#booking-box-submit" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
16<div class="interior-container">"#video-box > .interior-container" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
17<div id="social-bar" class="container-fluid-full">"#social-bar" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
18<h4>Book Your Trip</h4>"#footer-book > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
19<ul>"#footer-book > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
20<h4>Mars Shuttles</h4>"#footer-trains > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
21<ul>"#footer-trains > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
22<h4>Mars Tourist Passes</h4>"#footer-passes > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
23<ul>"#footer-passes > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
24<h4>Mars Adventures</h4>"#footer-plan > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
25<ul>"#footer-plan > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
26<h4>FAQs</h4>"#footer-faq > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
27<ul>"#footer-faq > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
28<h4>Connect With Us</h4>"#footer-connect > h4" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
29<ul>"#footer-connect > ul" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
30<div id="copyright" class="container">"#copyright" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
31<div id="player" style="width: 100%; height: 100%;">"#player", "#player" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
32<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>"#fafbba78", "._8m > table > tbody > tr:nth-child(1)" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
33<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>"#fafbba78", ".pluginConnectButtonDisconnected" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
34<span id="u_0_2">378,121</span>"#fafbba78", "#u_0_2" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
35<div class="btn-o" contextmenu="menu"><a id="follow-button" target="_blank" class="btn" title="Follow MarsCommuter on Twitter" href="mars2.html"><i></i><span class="label" id="l">Follow @MarsTrip1</span></a></div>".twitter-follow-button", ".btn-o" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
36<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]" + +

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+ +
-
+
+
+
+
Elements should not have tabindex greater than zero
+ Learn more +
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Element sourceElement location + To solve this violation, you need to... +
1<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="from0" name="from0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#from0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
2<input type="text" value="" class="city-input ac_input ui-autocomplete-input" autocomplete="off" id="to0" name="to0" tabindex="1" role="textbox" aria-autocomplete="list" aria-haspopup="true">"#to0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" + +

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+ +
+
+
+
+
-
+
-

What 'inapplicable' axe checks means?

-

- The inapplicable array lists all the rules for which no matching - elements were found on the page. -

-

- Visit axe API Documentation - to learn more. -

- - - - + + + + + - - - + + + + - - - + + + + - - + + + - - + + + - - + + + - - + + + - - + + + - - + + + - - + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - + + + - - - + + + + - - + + + - - - + + + + - - + + + - - + + + - - - + + + + - - - + + + + - - - + + + + - - + + + - - + + + - - - + + + + - - + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAG#DescriptionAxe rule IDWCAGNodes passed check
1accesskey attribute value must be uniqueaccesskeysBest practiceElements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A10
2Active <area> elements must have alternate textarea-altWCAG 2.0 Level AARIA role must be appropriate for the elementaria-allowed-roleBest practice14
3ARIA input fields must have an accessible namearia-input-field-namearia-hidden='true' must not be present on the document bodyaria-hidden-body WCAG 2.0 Level A1
4Use aria-roledescription on elements with a semantic rolearia-roledescriptionARIA hidden element must not contain focusable elementsaria-hidden-focus WCAG 2.0 Level A2
5ARIA toggle fields have an accessible namearia-toggle-field-nameRequired ARIA attributes must be providedaria-required-attr WCAG 2.0 Level A13
6<audio> elements must have a captions trackaudio-captionCertain ARIA roles must contain particular childrenaria-required-children WCAG 2.0 Level A13
7<blink> elements are deprecated and must not be usedblinkCertain ARIA roles must be contained by particular parentsaria-required-parent WCAG 2.0 Level A13
8<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elementsdefinition-listARIA roles used must conform to valid valuesaria-roles WCAG 2.0 Level A13
9<dt> and <dd> elements must be contained by a <dl>dlitemARIA attributes must conform to valid valuesaria-valid-attr-value WCAG 2.0 Level A10
10Elements in the focus order need a role appropriate for interactive contentfocus-order-semanticsBest practiceARIA attributes must conform to valid namesaria-valid-attrWCAG 2.0 Level A10
11HTML elements with lang and xml:lang must have the same base languagehtml-xml-lang-mismatchWCAG 2.0 Level Aautocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA3
12Image buttons must have alternate textinput-image-altWCAG 2.0 Level AInline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA8
13Elements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level AButtons must have discernible textbutton-nameWCAG 2.0 Level A12
14Banner landmark must not be contained in another landmarklandmark-banner-is-top-levelBest practicePage must have means to bypass repeated blocksbypassWCAG 2.0 Level A1
15Aside must not be contained in another landmarklandmark-complementary-is-top-levelBest practiceDocuments must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A1
16Contentinfo landmark must not be contained in another landmarklandmark-contentinfo-is-top-levelBest practiceIDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A7
17Main landmark must not be contained in another landmarklandmark-main-is-top-levelBest practiceid attribute value must be uniqueduplicate-idWCAG 2.0 Level A20
18Document must not have more than one banner landmarklandmark-no-duplicate-bannerHeadings must not be emptyempty-heading Best practice6
19Document must not have more than one contentinfo landmarklandmark-no-duplicate-contentinfoBest practiceForm field should not have multiple label elementsform-field-multiple-labelsWCAG 2.0 Level A17
20Document must not have more than one main landmarklandmark-no-duplicate-mainHeading levels should only increase by oneheading-order Best practice6
21<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level AHidden content on the page cannot be analyzedhidden-contentBest practice434
22Timed refresh must not existmeta-refresh<html> element must have a lang attributehtml-has-lang WCAG 2.0 Level A1
23<object> elements must have alternate textobject-alt<html> element must have a valid value for the lang attributehtml-lang-valid WCAG 2.0 Level A1
24Bold, italic text and font-size are not used to style p elements as a headingp-as-headingWCAG 2.0 Level AElements must have their visible text as part of their accessible namelabel-content-name-mismatchWCAG 2.1 Level A1
25[role='img'] elements have an alternative textrole-img-altWCAG 2.0 Level AForm elements should have a visible labellabel-title-onlyBest practice17
26scope attribute should be used correctlyscope-attr-validBest practiceForm elements must have labelslabelWCAG 2.0 Level A12
27Ensure that scrollable region has keyboard accessscrollable-region-focusableLinks must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-block WCAG 2.0 Level A1
28Server-side image maps must not be usedserver-side-image-mapLinks must have discernible textlink-name WCAG 2.0 Level A5
29The skip-link target should exist and be focusableskip-linkBest practice<ul> and <ol> must only directly contain <li>, <script> or <template> elementslistWCAG 2.0 Level A1
30svg elements with an img role have an alternative textsvg-img-alt<li> elements must be contained in a <ul> or <ol>listitem WCAG 2.0 Level A3
31Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level AUsers should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice1
32All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-headerWCAG 2.0 Level AZooming and scaling must not be disabledmeta-viewportBest practice1
33All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level APage must contain a level-one headingpage-has-heading-oneBest practice1
34lang attribute must have a valid valuevalid-langWCAG 2.0 Level AAAll page content must be contained by landmarksregionBest practice280
35<video> or <audio> elements do not autoplay audiono-autoplay-audioElements should not have tabindex greater than zerotabindexBest practice5
36The <caption> element should not contain the same text as the summary attributetable-duplicate-nameBest practice1
37Data or header cells should not be used to give caption to a data table.table-fake-captionWCAG 2.0 Level A1
38All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attrWCAG 2.0 Level A1
+
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'incomplete' axe checks means?

+

+ Incomplete results were aborted and require further testing. This + can happen either because of technical restrictions to what the rule + can test, or because a javascript error occurred. +

+

+ Visit axe API Documentation + to learn more. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes with incomplete check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA132
2Hidden content on the page cannot be analyzedhidden-contentBest practice60
3Links must be distinguished from surrounding text in a way that does not rely on colorlink-in-text-blockWCAG 2.0 Level A22
4<video> elements must have captionsvideo-caption WCAG 2.0 Level A1
diff --git a/test/index.test.ts b/test/index.test.ts index ee291cf..d743a06 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -16,7 +16,7 @@ function getPathToCreatedReport(customFileName?: string, customOutputDir?: strin ); } -describe('createHtmlReport() test', () => { +describe('Error handling', () => { it('Verify throwing an error if required parameters are not passed', async () => { expect(() => { createHtmlReport({ @@ -29,36 +29,41 @@ describe('createHtmlReport() test', () => { "'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })" ); }); +}); - it('Verify report is created only with violations because passes and incomplete are not passed', async () => { +describe('Successful tests', () => { + // Verifies report with empty violations + it('Empty violations', async () => { + const reportFileName = 'tcAllPassedOnlyViolations.html'; createHtmlReport({ results: { - violations: axeRawViolations, - url: 'https://dequeuniversity.com/demo/mars/', + violations: [], + }, + options: { + reportFileName }, }); - expect(fs.readFileSync(getPathToCreatedReport(), { encoding: 'utf8' })).toMatchSnapshot(); + expect( + fs.readFileSync(getPathToCreatedReport(reportFileName), { + encoding: 'utf8', + }) + ).toMatchSnapshot(); }); - const customSummary = `Test Case: Full page analysis -
Steps:
-
    -
  1. Open https://dequeuniversity.com/demo/mars/
    2. -
  2. Analyze full page with all rules enabled
    3. -
`; - it('Verify report is created even if no violations passed', async () => { - const reportFileName = 'tcAllPassedOnlyViolations.html'; + + // Verifies report is created with default name in default directory with violations(passes and incomplete are not provided). + // Creates html report file with name 'accessibilityReport.html' in default directory 'artifacts' + it('Violations and URL with default report file name', async () => { createHtmlReport({ results: { - violations: [], + violations: axeRawViolations, + url: 'https://dequeuniversity.com/demo/mars/', }, - options: { customSummary, reportFileName }, }); - expect( - fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) - ).toMatchSnapshot(); + expect(fs.readFileSync(getPathToCreatedReport(), { encoding: 'utf8' })).toMatchSnapshot(); }); - it('URL is not passed', async () => { + // Verifies report with if violations are not empty + it('Violations', async () => { const reportFileName = 'urlIsNotPassed.html'; createHtmlReport({ results: { @@ -70,7 +75,9 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); - it('Verify report is created with violations and passes', async () => { + + // Verifies report is created with violations and passes + it('Violations, passes and url', async () => { const reportFileName = 'tcPassesAndViolations.html'; createHtmlReport({ results: { @@ -84,7 +91,9 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); - it('Verify report is created with violations, passes and incomplete with optional reportFileName and outputDir params', async () => { + + // Verifies report is created with violations, passes and incomplete with optional reportFileName and outputDir params + it('Violations, passes, incomplete, url with reportFileName & outputDir', async () => { const reportFileName = 'tcPassesViolationsIncomplete.html'; const outputDir = 'temp'; createHtmlReport({ @@ -105,11 +114,14 @@ describe('createHtmlReport() test', () => { }) ).toMatchSnapshot(); }); - it('Verify report is created with violations, passes and incomplete with optional reportFileName, url and project key params', async () => { + + // Verifies report is created with violations, passes, incomplete url with optional + // reportFileName and projectKey + it('No violations found, passes, incomplete, url + reportFileName & projectKey', async () => { const reportFileName = 'tcWithTheKey.html'; createHtmlReport({ results: { - violations: axeRawViolations, + violations: [], passes: axeRawPassed, incomplete: axeRawIncomplete, url: 'https://dequeuniversity.com/demo/mars/', @@ -123,22 +135,9 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); - it('Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params', async () => { - const reportFileName = 'tcAllPassed.html'; - createHtmlReport({ - results: { - violations: [], - passes: axeRawPassed, - incomplete: axeRawIncomplete, - url: 'https://dequeuniversity.com/demo/mars/', - }, - options: { reportFileName, projectKey: 'DEQUE' }, - }); - expect( - fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) - ).toMatchSnapshot(); - }); - it('Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params', async () => { + + // Verifies report with inapplicable present in 'results' + it('Inapplicable present', async () => { const reportFileName = 'tcInapplicablePresent.html'; createHtmlReport({ results: { @@ -154,7 +153,9 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); - it('Verify report with no violations, no passes, no incomplete, no inapplicable', async () => { + + // Verifies report with empty violations, empty passes, empty incomplete, empty inapplicable + it('Empty all: violation, passes, incomplete, inapplicable', async () => { const reportFileName = 'tcOnlyPasses.html'; createHtmlReport({ results: { @@ -170,7 +171,9 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); - it('Verify report is created with violations and custom summary', async () => { + + // Verify report is created with violations and custom summary + it('Custom Summary present', async () => { const reportFileName = 'tcIncludingCustomSummary.html'; const customSummary = `Test Case: Full page analysis
Steps:
@@ -189,8 +192,17 @@ describe('createHtmlReport() test', () => { fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' }) ).toMatchSnapshot(); }); + + // Verifies report with all optional parameters it('All optional parameters present', async () => { const reportFileName = 'tsAllOptionalParametersPresent.html'; + const customSummary = `Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
`; + createHtmlReport({ results: { violations: axeRawViolations, @@ -207,7 +219,15 @@ describe('createHtmlReport() test', () => { }) ).toMatchSnapshot(); }); - it('AxeResults passed', async () => { + + it('Raw AxeResults passed and all optional params', async () => { + const customSummary = `Test Case: Full page analysis +
Steps:
+
    +
  1. Open https://dequeuniversity.com/demo/mars/
    2. +
  2. Analyze full page with all rules enabled
    3. +
`; + const reportFileName = 'index.html'; const outputDir = 'docs'; createHtmlReport({ From 916fe0f88202e647fe97b3f5e125aaf70da366b8 Mon Sep 17 00:00:00 2001 From: Liliia Pelypenko Date: Thu, 24 Dec 2020 16:28:00 +0900 Subject: [PATCH 2/5] Added style to the source code and locators, added link to the violation --- artifacts/accessibilityReport.html | 2416 ++- artifacts/tcAllPassedOnlyViolations.html | 22 + artifacts/tcInapplicablePresent.html | 2416 ++- artifacts/tcIncludingCustomSummary.html | 2416 ++- artifacts/tcOnlyPasses.html | 22 + artifacts/tcPassesAndViolations.html | 2416 ++- artifacts/tcWithTheKey.html | 22 + artifacts/tsAllOptionalParametersPresent.html | 2416 ++- artifacts/urlIsNotPassed.html | 2416 ++- docs/index.html | 216 +- src/util/prepareReportData.ts | 2 +- src/util/template/pageTemplate.html | 61 +- temp/tcPassesViolationsIncomplete.html | 2416 ++- test/__snapshots__/index.test.ts.snap | 17754 ++++++++++------ 14 files changed, 21289 insertions(+), 13722 deletions(-) diff --git a/artifacts/accessibilityReport.html b/artifacts/accessibilityReport.html index 9d5dd7a..209630c 100644 --- a/artifacts/accessibilityReport.html +++ b/artifacts/accessibilityReport.html @@ -34,6 +34,19 @@ .summarySection { margin: 0.5rem 0; } + .hljs { + white-space: pre-wrap; + width: 100%; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + .fix-summary-list { + word-break: break-word; + } + + axe-core found 85 violations - 1 + 1 Buttons must have discernible text button-name WCAG 2.0 Level A @@ -98,7 +116,7 @@
axe-core found 85 violations
1 - 2 + 2 Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA @@ -106,7 +124,7 @@
axe-core found 85 violations
11 - 3 + 3 IDs of active elements must be unique duplicate-id-active WCAG 2.0 Level A @@ -114,7 +132,7 @@
axe-core found 85 violations
1 - 4 + 4 id attribute value must be unique duplicate-id WCAG 2.0 Level A @@ -122,7 +140,7 @@
axe-core found 85 violations
10 - 5 + 5 Frames must have title attribute frame-title WCAG 2.0 Level A @@ -130,7 +148,7 @@
axe-core found 85 violations
2 - 6 + 6 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A @@ -138,7 +156,7 @@
axe-core found 85 violations
1 - 7 + 7 Images must have alternate text image-alt WCAG 2.0 Level A @@ -146,7 +164,7 @@
axe-core found 85 violations
4 - 8 + 8 Form elements must have labels label WCAG 2.0 Level A @@ -154,7 +172,7 @@
axe-core found 85 violations
1 - 9 + 9 Document must have one main landmark landmark-one-main Best practice @@ -162,7 +180,7 @@
axe-core found 85 violations
4 - 10 + 10 Ensures landmarks are unique landmark-unique Best practice @@ -170,7 +188,7 @@
axe-core found 85 violations
1 - 11 + 11 Links must be distinguished from surrounding text in a way that does not rely on color link-in-text-block WCAG 2.0 Level A @@ -178,7 +196,7 @@
axe-core found 85 violations
1 - 12 + 12 Links must have discernible text link-name WCAG 2.0 Level A @@ -186,7 +204,7 @@
axe-core found 85 violations
8 - 13 + 13 All page content must be contained by landmarks region Best practice @@ -194,7 +212,7 @@
axe-core found 85 violations
37 - 14 + 14 Elements should not have tabindex greater than zero tabindex Best practice @@ -207,7 +225,9 @@

Failed

-
Buttons must have discernible text
+
+ Violation type #1: Buttons must have discernible text +
# - Element source - Element location - - To solve this violation, you need to... - + Issue Description - 1 - <button class="ui-datepicker-trigger" type="button"> + 1 + +

Element location(s)

+ 
.departure-date > .ui-datepicker-trigger:nth-child(4)
+

Element source

+ 
<button class="ui-datepicker-trigger" type="button">
 <!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> -->
-</button>
-                                    ".departure-date > .ui-datepicker-trigger:nth-child(4)"
-                                    
-                                        
-                                            
Fix any of the following:

-                                            
    
+</button>
+

+ + To solve this violation, you need to... + +

+
+

Fix any of the following:

+
  • 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
    • @@ -258,7 +280,7 @@
  • Element's default semantics were not overridden with role="none"
  • Element has no title attribute or the title attribute is empty
- +
@@ -269,7 +291,9 @@
-
Elements must have sufficient color contrast
+
+ Violation type #2: Elements must have sufficient color contrast +
# - Element source - Element location - - To solve this violation, you need to... - + Issue Description - 1 - <h3>Be Bold...</h3> - ":root > h3" - - -

Fix any of the following:

-
+

Related node(s):

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
@@ -853,6 +896,8 @@
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -1382,6 +1427,17 @@
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index b96414a..677610a 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -349,6 +349,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -370,6 +372,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -390,6 +394,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -410,6 +416,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -430,6 +438,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -451,6 +461,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -471,6 +483,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -491,6 +505,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -512,6 +528,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -532,6 +550,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -552,6 +572,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -611,6 +633,9 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -670,6 +695,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -690,6 +717,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -716,6 +745,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -740,6 +771,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -760,6 +793,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -782,6 +817,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -802,6 +839,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -822,6 +861,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -842,6 +883,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -862,6 +905,8 @@ exports[`Successful tests All optional parameters present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -1391,6 +1436,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    @@ -3671,6 +3727,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3692,6 +3750,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3712,6 +3772,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3732,6 +3794,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3752,6 +3816,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3773,6 +3839,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3793,6 +3861,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3813,6 +3883,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3834,6 +3906,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3854,6 +3928,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3874,6 +3950,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -3933,6 +4011,9 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -3992,6 +4073,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -4012,6 +4095,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -4038,6 +4123,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -4062,6 +4149,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -4082,6 +4171,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -4104,6 +4195,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -4124,6 +4217,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -4144,6 +4239,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -4164,6 +4261,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -4184,6 +4283,8 @@ exports[`Successful tests Custom Summary present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -4713,6 +4814,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    @@ -6630,6 +6742,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6651,6 +6765,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6671,6 +6787,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6691,6 +6809,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6711,6 +6831,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6732,6 +6854,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6752,6 +6876,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6772,6 +6898,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6793,6 +6921,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6813,6 +6943,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6833,6 +6965,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -6892,6 +7026,9 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -6951,6 +7088,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -6971,6 +7110,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -6997,6 +7138,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -7021,6 +7164,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -7041,6 +7186,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -7063,6 +7210,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -7083,6 +7232,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -7103,6 +7254,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -7123,6 +7276,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -7143,6 +7298,8 @@ exports[`Successful tests Inapplicable present 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -7672,6 +7829,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    @@ -12207,6 +12375,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12228,6 +12398,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12248,6 +12420,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12268,6 +12442,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12288,6 +12464,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12309,6 +12487,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12329,6 +12509,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12349,6 +12531,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12370,6 +12554,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12390,6 +12576,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12410,6 +12598,8 @@ exports[`Successful tests Violations 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -12469,6 +12659,9 @@ exports[`Successful tests Violations 1`] = `
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -12528,6 +12721,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -12548,6 +12743,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -12574,6 +12771,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -12598,6 +12797,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -12618,6 +12819,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -12640,6 +12843,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -12660,6 +12865,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -12680,6 +12887,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -12700,6 +12909,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -12720,6 +12931,8 @@ exports[`Successful tests Violations 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -13249,6 +13462,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    @@ -14844,6 +15068,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14865,6 +15091,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14885,6 +15113,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14905,6 +15135,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14925,6 +15157,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14946,6 +15180,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14966,6 +15202,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -14986,6 +15224,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -15007,6 +15247,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -15027,6 +15269,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -15047,6 +15291,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -15106,6 +15352,9 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -15165,6 +15414,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -15185,6 +15436,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -15211,6 +15464,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -15235,6 +15490,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -15255,6 +15512,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -15277,6 +15536,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -15297,6 +15558,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -15317,6 +15580,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -15337,6 +15602,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -15357,6 +15624,8 @@ exports[`Successful tests Violations and URL with default report file name 1`] =
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -15886,6 +16155,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    @@ -17481,6 +17761,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17502,6 +17784,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17522,6 +17806,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17542,6 +17828,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17562,6 +17850,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17583,6 +17873,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17603,6 +17895,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17623,6 +17917,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17644,6 +17940,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17664,6 +17962,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17684,6 +17984,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -17743,6 +18045,9 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -17802,6 +18107,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -17822,6 +18129,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -17848,6 +18157,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -17872,6 +18183,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -17892,6 +18205,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -17914,6 +18229,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -17934,6 +18251,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -17954,6 +18273,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -17974,6 +18295,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -17994,6 +18317,8 @@ exports[`Successful tests Violations, passes and url 1`] = `
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -18523,6 +18848,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    @@ -20462,6 +20798,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20483,6 +20821,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20503,6 +20843,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20523,6 +20865,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20543,6 +20887,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 2.83 (foreground color: #46a546, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20564,6 +20910,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 4.49 (foreground color: #acbad0, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20584,6 +20932,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20604,6 +20954,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20625,6 +20977,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 2.37 (foreground color: #000000, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20645,6 +20999,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20665,6 +21021,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Element has insufficient color contrast of 1.87 (foreground color: #067ab4, background color: #344b6e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
    • +

    Related node(s):

    + 
    body
    @@ -20724,6 +21082,9 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has active elements with the same id attribute: default
    • +

    Related node(s):

    + 
    a[data-text="Why\\\\ Mars\\\\ died"]
    + 
    a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
    @@ -20783,6 +21144,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full
    @@ -20803,6 +21166,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
    @@ -20829,6 +21194,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
    @@ -20853,6 +21220,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    :root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
    @@ -20873,6 +21242,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
    @@ -20895,6 +21266,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    #left-column > div:nth-child(2)
    @@ -20915,6 +21288,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    input[name="nCountries"][value="\\\\31 "][type="hidden"]
    @@ -20935,6 +21310,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8)
    @@ -20955,6 +21332,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .middle.widget-container:nth-child(8) > .interior-container > div
    @@ -20975,6 +21354,8 @@ exports[`Successful tests Violations, passes, incomplete, url with reportFileNam
  • Document has multiple static elements with the same id attribute
    • +

    Related node(s):

    + 
    .ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
    @@ -21504,6 +21885,17 @@ html
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +

    Related node(s):

    + 
    .loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
    + 
    #language-bar > nav
    + 
    #main-nav
    + 
    #main-sub-nav
    + 
    #footer-book > nav
    + 
    #footer-trains > nav
    + 
    #footer-passes > nav
    + 
    #footer-plan > nav
    + 
    #footer-faq > nav
    + 
    #footer-connect > nav
    From ae45e0988b73f44405c9bf0d3f7f7aead7aff118 Mon Sep 17 00:00:00 2001 From: Liliia Pelypenko Date: Thu, 24 Dec 2020 17:38:30 +0900 Subject: [PATCH 4/5] Added new style for code and split into two columns --- artifacts/accessibilityReport.html | 1129 +-- artifacts/tcAllPassedOnlyViolations.html | 6 +- artifacts/tcInapplicablePresent.html | 1129 +-- artifacts/tcIncludingCustomSummary.html | 1129 +-- artifacts/tcOnlyPasses.html | 6 +- artifacts/tcPassesAndViolations.html | 1129 +-- artifacts/tcWithTheKey.html | 6 +- artifacts/tsAllOptionalParametersPresent.html | 1129 +-- artifacts/urlIsNotPassed.html | 1129 +-- docs/index.html | 108 +- src/util/template/pageTemplate.html | 34 +- temp/tcPassesViolationsIncomplete.html | 1129 +-- test/__snapshots__/index.test.ts.snap | 8029 +++++++---------- 13 files changed, 6525 insertions(+), 9567 deletions(-) diff --git a/artifacts/accessibilityReport.html b/artifacts/accessibilityReport.html index 705f96d..cb7c509 100644 --- a/artifacts/accessibilityReport.html +++ b/artifacts/accessibilityReport.html @@ -37,6 +37,7 @@ .hljs { white-space: pre-wrap; width: 100%; + background: #f0f0f0; } p { margin-top: 0.3rem; @@ -44,9 +45,6 @@ li { line-height: 1.618; } - .fix-summary-list { - word-break: break-word; - } Failed
    - Violation type #1: Buttons must have discernible text + 1. Buttons must have discernible text
    - - + + + +
    #Issue Description#Issue Description + To solve this violation, you need to... +
    1 -

    Element location(s)

    +

    Element location

    .departure-date > .ui-datepicker-trigger:nth-child(4)

    Element source

    <button class="ui-datepicker-trigger" type="button">
 <!-- <img title="..." alt="..." src="/redesign/assets/demo-sites/mars/images/calendar.png"> -->
 </button>
    -

    - - To solve this violation, you need to... - -

    -
    +
    		+

    Fix any of the following: