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..a07b9a2 --- /dev/null +++ b/artifacts/accessibilityReport.html @@ -0,0 +1,2475 @@ + + + + + + + + + + + + + + + + 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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..a6a1e7a --- /dev/null +++ b/artifacts/tcAllPassedOnlyViolations.html @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + 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..a3dd498 --- /dev/null +++ b/artifacts/tcInapplicablePresent.html @@ -0,0 +1,3198 @@ + + + + + + + + + + + + + + + + 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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..ae7110f --- /dev/null +++ b/artifacts/tcIncludingCustomSummary.html @@ -0,0 +1,2480 @@ + + + + + + + + + + + + + + + + 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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..d5e74a4 --- /dev/null +++ b/artifacts/tcOnlyPasses.html @@ -0,0 +1,212 @@ + + + + + + + + + + + + + + + + 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..508a965 --- /dev/null +++ b/artifacts/tcPassesAndViolations.html @@ -0,0 +1,2819 @@ + + + + + + + + + + + + + + + + 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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..333803b --- /dev/null +++ b/artifacts/tcWithTheKey.html @@ -0,0 +1,534 @@ + + + + + + + + + + + + + + + + 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..3f27ff5 --- /dev/null +++ b/artifacts/tsAllOptionalParametersPresent.html @@ -0,0 +1,3159 @@ + + + + + + + + + + + + + + + + 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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..62c28c0 --- /dev/null +++ b/artifacts/urlIsNotPassed.html @@ -0,0 +1,2470 @@ + + + + + + + + + + + + + + + + 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
+
+
+
+
+ + + + diff --git a/docs/index.html b/docs/index.html index b0300d2..bb8bd46 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,17 +12,39 @@ .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; + } + .hljs { + white-space: pre-wrap; + width: 100%; + background: #f0f0f0; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + + 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
- - - - - - + + + + + + - + @@ -93,7 +120,7 @@
axe-core found 6 violations
- + @@ -101,7 +128,7 @@
axe-core found 6 violations
- + @@ -109,7 +136,7 @@
axe-core found 6 violations
- + @@ -122,7 +149,9 @@

Failed

-
<html> element must have a lang attribute
+
+ 1. <html> element must have a lang attribute +
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
11 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A 1
22 Document must have one main landmark landmark-one-main Best practice 1
33 All page content must be contained by landmarks region Best practice 1
44 Elements should not have tabindex greater than zero tabindex Best practice
- - - + + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<html>"html" +

Element location

+ 
html
+

Element source

+ 
<html>
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
@@ -165,7 +208,9 @@
-
Document must have one main landmark
+
+ 2. Document must have one main landmark +
- - - + + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<html>"html" +

Element location

+ 
html
+

Element source

+ 
<html>
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
@@ -208,7 +267,9 @@
-
All page content must be contained by landmarks
+
+ 3. All page content must be contained by landmarks +
- - - + + + - - +</div> + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<div> + +

Element location

+ 
div
+

Element source

+ 
<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
    • +
+
+
@@ -256,7 +331,9 @@
-
Elements should not have tabindex greater than zero
+
+ 4. Elements should not have tabindex greater than zero +
- - - + + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

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" +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

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" +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
@@ -333,11 +448,11 @@
- - - - - + + + + + @@ -520,10 +635,10 @@
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - + + + + @@ -1033,9 +1148,9 @@
#DescriptionAxe rule IDWCAG#DescriptionAxe rule IDWCAG
- - - + + + @@ -1549,5 +1664,9 @@
+ + diff --git a/src/util/AxeReport.ts b/src/util/AxeReport.ts index 788b1bd..48d72e0 100644 --- a/src/util/AxeReport.ts +++ b/src/util/AxeReport.ts @@ -7,10 +7,17 @@ export interface Summary { nodes: number; } +export interface FixSummary { + highlight: string; + list?: string[] +} + interface NodeResult { html: string; targetNodes: string; + fixSummaries: FixSummary[]; index: number; + relatedNodesAny: string[] } interface Details { diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts index a6978f7..2fefa6c 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,32 @@ export function prepareReportData({ description, help, helpUrl, - nodes: nodes.map(({ target, html }, nodeIndex) => { - const targetNodes = target.map((node) => `"${node}"`).join(', '); - return { targetNodes, html, index: nodeIndex + 1 }; + nodes: nodes.map(({ target, html, failureSummary, any }, nodeIndex) => { + const targetNodes = target.join('\n'); + const defaultHighlight = { + highlight: 'Recommendation with the fix was not provided by axe result', + }; + const fixSummaries: FixSummary[] = failureSummary + ? prepareFixSummary(failureSummary, defaultHighlight) + : [defaultHighlight]; + const relatedNodesAny: string[] = []; + any.forEach((checkResult) => { + if (checkResult.relatedNodes && checkResult.relatedNodes.length > 0) { + checkResult.relatedNodes.forEach((node) => { + if (node.target.length > 0) { + relatedNodesAny.push(node.target.join('\n')); + } + }); + } + }); + + return { + targetNodes, + html, + fixSummaries, + relatedNodesAny, + index: nodeIndex + 1, + }; }), }; } diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html index 7aa710a..475fe40 100644 --- a/src/util/template/pageTemplate.html +++ b/src/util/template/pageTemplate.html @@ -12,17 +12,39 @@ .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; + } + .hljs { + white-space: pre-wrap; + width: 100%; + background: #f0f0f0; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + + 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}} {{#violations}} - + @@ -100,7 +128,9 @@

Failed

-
{{help}}
+
+ {{index}}. {{help}} +
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
{{index}}{{index}} {{help}} {{id}} {{wcag}}
- - - + + + {{#nodes}} - - + + {{/nodes}} @@ -171,11 +223,11 @@
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
{{index}}{{html}}{{targetNodes}} +

Element location

+ 
{{targetNodes}}
+

Element source

+ 
{{html}}
+ 		+ {{#fixSummaries}} +
+

{{highlight}}

+
    + {{#list}} +
  • {{.}}
    • + {{/list}} +
+
+ {{/fixSummaries}} {{#relatedNodesAny.length}} +

Related node:

+ {{/relatedNodesAny.length}} {{#relatedNodesAny}} + 
{{.}}
+ {{/relatedNodesAny}} +
- - - - - + + + + + @@ -236,11 +288,11 @@
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - - + + + + + @@ -300,10 +352,10 @@
#DescriptionAxe rule IDWCAGNodes with incomplete check#DescriptionAxe rule IDWCAGNodes with incomplete check
- - - - + + + + @@ -349,9 +401,9 @@
#DescriptionAxe rule IDWCAG#DescriptionAxe rule IDWCAG
- - - + + + @@ -371,5 +423,9 @@
{{/hasAxeRawResults}} + + diff --git a/temp/tcPassesViolationsIncomplete.html b/temp/tcPassesViolationsIncomplete.html index eb1475f..4fad287 100644 --- a/temp/tcPassesViolationsIncomplete.html +++ b/temp/tcPassesViolationsIncomplete.html @@ -12,17 +12,39 @@ .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; + } + .hljs { + white-space: pre-wrap; + width: 100%; + background: #f0f0f0; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + + AXE Accessibility Results
-
- +
+
Page URL: https://dequeuniversity.com/demo/mars/
- - -
+ + +
axe-core found 85 violations
#Rule IDEnabled#Rule IDEnabled
- - - - - - + + + + + + - + @@ -88,7 +115,7 @@
axe-core found 85 violations
- + @@ -96,7 +123,7 @@
axe-core found 85 violations
- + @@ -104,7 +131,7 @@
axe-core found 85 violations
- + @@ -112,7 +139,7 @@
axe-core found 85 violations
- + @@ -120,7 +147,7 @@
axe-core found 85 violations
- + @@ -128,7 +155,7 @@
axe-core found 85 violations
- + @@ -136,7 +163,7 @@
axe-core found 85 violations
- + @@ -144,7 +171,7 @@
axe-core found 85 violations
- + @@ -152,7 +179,7 @@
axe-core found 85 violations
- + @@ -160,7 +187,7 @@
axe-core found 85 violations
- + @@ -168,7 +195,7 @@
axe-core found 85 violations
- + @@ -176,7 +203,7 @@
axe-core found 85 violations
- + @@ -184,7 +211,7 @@
axe-core found 85 violations
- + @@ -197,7 +224,9 @@

Failed

-
Buttons must have discernible text
+
+ 1. Buttons must have discernible text +
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
11 Buttons must have discernible text button-name WCAG 2.0 Level A 1
22 Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA 11
33 IDs of active elements must be unique duplicate-id-active WCAG 2.0 Level A 1
44 id attribute value must be unique duplicate-id WCAG 2.0 Level A 10
55 Frames must have title attribute frame-title WCAG 2.0 Level A 2
66 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A 1
77 Images must have alternate text image-alt WCAG 2.0 Level A 4
88 Form elements must have labels label WCAG 2.0 Level A 1
99 Document must have one main landmark landmark-one-main Best practice 4
1010 Ensures landmarks are unique landmark-unique Best practice 1
1111 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 1
1212 Links must have discernible text link-name WCAG 2.0 Level A 8
1313 All page content must be contained by landmarks region Best practice 37
1414 Elements should not have tabindex greater than zero tabindex Best practice
- - - + + + - - +</button> + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> + +

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>
".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
    • +
+
+
@@ -242,7 +290,9 @@
-
Elements must have sufficient color contrast
+
+ 2. Elements must have sufficient color contrast +
- - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
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 location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3<h3>Countdown...</h3>":root > h3" +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
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 location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5<h3>Blast Off!</h3>":root > h3" +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
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 location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\.html\?a\=crater_adventure"]" +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\.html\?a\=ice_cream"]" +

Element location

+ 
:root > a[href="mars2\.html\?a\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
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" +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link" +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\.html\?a\=free_year"]" +

Element location

+ 
:root > a[href="mars2\.html\?a\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
@@ -338,7 +544,9 @@
-
IDs of active elements must be unique
+
+ 3. IDs of active elements must be unique +
- - - + + + - - + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\ Mars\ died"]
+ 
a[data-text="The\ world\ that\ never\ was"]
+
@@ -381,7 +606,9 @@
-
id attribute value must be unique
+
+ 4. id attribute value must be unique +
- - - + + + - - + + - - + + - - +</div> + + - - +</form> + + - - + + - - +<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> + + - - + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .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)" +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3<div id="search-bar" class="pull-left"> + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4<form id="search" action="/demo/mars/mars2" method="get"> + +

Element location

+ 
:root > form[method="get"][action="\/demo\/mars\/mars2"]
+

Element source

+ 
<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
    • +
+
+

Related node:

+ 
: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" +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6<div id="vap-section"> + +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7<input type="hidden" id="nCountries" name="nCountries">"#select-country > input[name="nCountries"][type="hidden"]" +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\31 "][type="hidden"]
+
8<div id="passenger-select" class="widget-container middle">".middle.widget-container:nth-child(13)" +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9<div id="passengers">".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
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)" +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
@@ -481,7 +850,9 @@
-
Frames must have title attribute
+
+ 5. Frames must have title attribute +
- - - + + + - - + + - - + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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" +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
@@ -529,7 +934,9 @@
-
<html> element must have a lang attribute
+
+ 6. <html> element must have a lang attribute +
- - - + + + - - + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
@@ -572,7 +993,9 @@
-
Images must have alternate text
+
+ 7. Images must have alternate text +
- - - + + + - - + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]" +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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"]" +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"]" +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"]" +

Element location

+ 
:root > img[width="\32 10"][height="\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
@@ -630,7 +1123,9 @@
-
Form elements must have labels
+
+ 8. Form elements must have labels +
- - - + + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]" +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
@@ -673,7 +1186,9 @@
-
Document must have one main landmark
+
+ 9. Document must have one main landmark +
- - - + + + - - + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

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" +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

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

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

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

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
@@ -731,7 +1299,9 @@
-
Ensures landmarks are unique
+
+ 10. Ensures landmarks are unique +
- - - + + + - - + +
#Source CodeSelector#Issue Description + 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)" +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
@@ -774,7 +1369,9 @@
-
Links must be distinguished from surrounding text in a way that does not rely on color
+
+ 11. Links must be distinguished from surrounding text in a way that does not rely on color +
- - - + + + - - + +
#Source CodeSelector#Issue Description + 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"]" +

Element location

+ 
a[href="mars2\.html\?a\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+
+
@@ -817,7 +1428,9 @@
-
Links must have discernible text
+
+ 12. Links must have discernible text +
- - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a>".link[href$="mars\/\#"]" +

Element location

+ 
.link[href$="mars\/\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
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"]" +

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\.html\?a\="]
+

Element source

+ 
<a href="mars2.html?a="></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" +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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"]" +

Element location

+ 
a[data-text="Why\ Mars\ died"]
+

Element source

+ 
<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>
+ 		+
+

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"]" +

Element location

+ 
a[data-text="The\ world\ that\ never\ was"]
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
@@ -898,7 +1689,9 @@
-
All page content must be contained by landmarks
+
+ 13. All page content must be contained by landmarks +
- - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - +</span> + + - - +</span> + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<div style="width: 1px; height: 1px; display: inline;">"body > div:nth-child(1)" +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

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" +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

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"]" +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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"]" +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

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" +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="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" +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

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

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</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" +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

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

Element location

+ 
#route-type
+

Element source

+ 
<div id="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" +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

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" +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12<span class="wrapper"> + +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<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"> + +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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" +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="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" +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

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

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="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" +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

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

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

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

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

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)" +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

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" +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

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" +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

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" +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

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"]" +

Element location

+ 
.twitter-follow-button
+img[src="\.\.\/images\/f\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

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"]" +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
@@ -1130,7 +2376,9 @@
-
Elements should not have tabindex greater than zero
+
+ 14. Elements should not have tabindex greater than zero +
- - - + + + - - + + - - + + - - + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

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" +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

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" +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
@@ -1207,11 +2493,11 @@
- - - - - + + + + + @@ -1563,11 +2849,11 @@
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - - + + + + + @@ -1609,5 +2895,9 @@
+ + diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index b0cb366..05fdb63 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,39 @@ 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; + } + .hljs { + white-space: pre-wrap; + width: 100%; + background: #f0f0f0; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + + 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
- - - - - - + + + + + + - + @@ -96,7 +123,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -104,7 +131,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -112,7 +139,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -120,7 +147,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -128,7 +155,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -136,7 +163,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -144,7 +171,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -152,7 +179,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -160,7 +187,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -168,7 +195,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -176,7 +203,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -184,7 +211,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -192,7 +219,7 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - + @@ -205,7 +232,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Buttons must have discernible text
+
+ 1. Buttons must have discernible text +
- - - + + + - - +</button> + +
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
11 Buttons must have discernible text button-name WCAG 2.0 Level A1
22 Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA11
33 IDs of active elements must be unique duplicate-id-active WCAG 2.0 Level A1
44 id attribute value must be unique duplicate-id WCAG 2.0 Level A10
55 Frames must have title attribute frame-title WCAG 2.0 Level A2
66 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A1
77 Images must have alternate text image-alt WCAG 2.0 Level A4
88 Form elements must have labels label WCAG 2.0 Level A1
99 Document must have one main landmark landmark-one-main Best practice4
1010 Ensures landmarks are unique landmark-unique Best practice1
1111 Links must be distinguished from surrounding text in a way that does not rely on color link-in-text-block WCAG 2.0 Level A1
1212 Links must have discernible text link-name WCAG 2.0 Level A8
1313 All page content must be contained by landmarks region Best practice37
1414 Elements should not have tabindex greater than zero tabindex Best practice
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> + +

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>
".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
    • +
+
+
@@ -250,7 +298,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Elements must have sufficient color contrast
+
+ 2. Elements must have sufficient color contrast +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <h3>Be Bold...</h3> - ":root > h3" + +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+ 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 location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 3 - <h3>Countdown...</h3> - ":root > h3" + +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+ 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 location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 5 - <h3>Blast Off!</h3> - ":root > h3" + +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+ 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 location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 7 - <a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a> - ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 8 - <a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a> - ":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 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" + +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 10 - <a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a> - "li:nth-child(3) > .deal-text > h3 > .link" + +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 11 - <a href="mars2.html?a=free_year">Book a free year on Mars</a> - ":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ @@ -346,7 +552,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
IDs of active elements must be unique
+
+ 3. IDs of active elements must be unique +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
.active
+

Element source

+ 
<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>
+ + +
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+ @@ -389,7 +614,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
id attribute value must be unique
+
+ 4. id attribute value must be unique +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <div id="control-panel" class="container-fluid-full"> - ".loginnow > .container-fluid-full" + +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .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)" + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+ 3 - <div id="search-bar" class="pull-left"> + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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)"
+</div>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+ 4 - <form id="search" action="/demo/mars/mars2" method="get"> + +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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"]"
+</form>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
: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" + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+ 6 - <div id="vap-section"> + +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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)"
+<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>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+ 7 - <input type="hidden" id="nCountries" name="nCountries"> - "#select-country > input[name="nCountries"][type="hidden"]" + +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+ 8 - <div id="passenger-select" class="widget-container middle"> - ".middle.widget-container:nth-child(13)" + +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+ 9 - <div id="passengers"> - ".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+ 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)" + +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+ @@ -489,7 +858,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Frames must have title attribute
+
+ 5. Frames must have title attribute +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
#player
+

Element source

+ 
<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>
+ + +
+

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" + +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ + +
+

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"
    • +
+
+ @@ -537,7 +942,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
<html> element must have a lang attribute
+
+ 6. <html> element must have a lang attribute +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
html
+

Element source

+ 
<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">
+ + +
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+ @@ -580,7 +1001,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Images must have alternate text
+
+ 7. Images must have alternate text +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <img src="/assets/demo-sites/mars/js/seg" width="1" height="1"> - "img[src$="seg"]" + +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ + +
+

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"]" + +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ + +
+

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"]" + +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ + +
+

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"]" + +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ + +
+

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"
    • +
+
+ @@ -638,7 +1131,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Form elements must have labels
+
+ 8. Form elements must have labels +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <input type="text" class="search" name="query" placeholder="search"> - ":root > .search[name="query"][placeholder="search"]" + +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+ @@ -681,7 +1194,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Document must have one main landmark
+
+ 9. Document must have one main landmark +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
html
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ + +
+

Fix all of the following:

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

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ + +
+

Fix all of the following:

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

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ + +
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+ @@ -739,7 +1307,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Ensures landmarks are unique
+
+ 10. Ensures landmarks are unique +
- # - Source Code - Selector + # + Issue Description + + 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)" + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ + +
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+ @@ -782,7 +1377,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Links must be distinguished from surrounding text in a way that does not rely on color
+
+ 11. Links must be distinguished from surrounding text in a way that does not rely on color +
- # - Source Code - Selector + # + Issue Description + + 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"]" + +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ + +
+

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+
+ @@ -825,7 +1436,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Links must have discernible text
+
+ 12. Links must have discernible text +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a> - ".link[href$="mars\\\\/\\\\#"]" + +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+ 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"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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" + +

Element location

+ 
.active
+

Element source

+ 
<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>
+ + +
+

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"]" + +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ + +
+

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"]" + +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ + +
+

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"
    • +
+
+ @@ -906,7 +1697,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
All page content must be contained by landmarks
+
+ 13. All page content must be contained by landmarks +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <div style="width: 1px; height: 1px; display: inline;"> - "body > div:nth-child(1)" + +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ + +
+

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" + +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ + +
+

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"]" + +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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"]" + +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ + +
+

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" + +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="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" + +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ + +
+

Fix any of the following:

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

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</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" + +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ + +
+

Fix any of the following:

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

Element location

+ 
#route-type
+

Element source

+ 
<div id="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" + +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ + +
+

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" + +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ + +
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+ 12 - <span class="wrapper"> + +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
 <span class="traveler-label">Traveler</span>
-</span>
-                                    "#passenger0 > .wrapper:nth-child(1)"
+</span>
+ + +
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+ 13 - <span class="wrapper age-range"> + +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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"
+</span>
+ + +
+

Fix any of the following:

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

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="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" + +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ + +
+

Fix any of the following:

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

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="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" + +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ + +
+

Fix any of the following:

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

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ + +
+

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)" + +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ + +
+

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" + +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ + +
+

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" + +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ + +
+

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" + +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ + +
+

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"]" + +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ + +
+

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"]" + +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ + +
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+ @@ -1138,7 +2384,9 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
-
Elements should not have tabindex greater than zero
+
+ 14. Elements should not have tabindex greater than zero +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ + +
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+ @@ -1215,11 +2501,11 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` - - - - - + + + + + @@ -1610,10 +2896,10 @@ exports[`createHtmlReport() test All optional parameters present 1`] = `
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
- - - - + + + + @@ -1868,12 +3154,16 @@ exports[`createHtmlReport() test All optional parameters present 1`] = ` + + " `; -exports[`createHtmlReport() test AxeResults passed 1`] = ` +exports[`Successful tests Custom Summary present 1`] = ` " @@ -1888,17 +3178,39 @@ 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; + } + .hljs { + white-space: pre-wrap; + width: 100%; + background: #f0f0f0; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + +

- 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,23 +3326,63 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + - + - + @@ -1998,40 +3395,63 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
<html> element must have a lang attribute
+
+ 1. 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

- serious + critical
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
11Buttons 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 moderate4
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 Aserious 1
312Links must have discernible textlink-nameWCAG 2.0 Level Aserious8
13 All page content must be contained by landmarks region Best practice moderate137
414 Elements should not have tabindex greater than zero tabindex Best practice
- - - + + + - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<html>"html" +

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>
+ 		+
+

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
    • +
+
+
@@ -2041,40 +3461,251 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
Document must have one main landmark
+
+ 2. Elements must have sufficient color contrast +
Learn more
-
landmark-one-main
+
color-contrast
- Best practice + WCAG 2.0 Level AA
-

Ensures the document has a main landmark

+

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

- moderate + serious
- - - + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<html>"html" +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
@@ -2084,45 +3715,59 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
All page content must be contained by landmarks
+
+ 3. IDs of active elements must be unique +
Learn more
-
region
+
duplicate-id-active
- Best practice + WCAG 2.0 Level A
-

Ensures all page content is contained by landmarks

+

Ensures every id attribute value of active elements is unique

- moderate + serious
- - - + + + - - + +
#Source CodeSelector#Issue Description + 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> -</div>"div" +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+
@@ -2132,8342 +3777,3619 @@ exports[`createHtmlReport() test AxeResults passed 1`] = `
-
Elements should not have tabindex greater than zero
+
+ 4. id attribute value must be unique +
Learn more
-
tabindex
+
duplicate-id
- Best practice + WCAG 2.0 Level A
-

Ensures tabindex attribute values are not greater than 0

+

Ensures every id attribute value is unique

- serious + minor
- - - + + + - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Issue Description + 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" +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
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 location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">"#deptDate0" +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
-
-
-
-
- +
+
+
+
+ 5. Frames must have title attribute
+ 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
-
+
+
frame-title
+
+ WCAG 2.0 Level A +
+
+
+

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

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
-
-
-
-
- +
+
+
+
+ 6. <html> element must have a lang attribute
+ 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. -

-
+
+
html-has-lang
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every HTML document has a lang attribute

+
+ serious +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
-
-
-
-
- +
+
+
+
+ 7. Images must have alternate text
+ 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
+
+
image-alt
+
+ WCAG 2.0 Level A +
+
+
+

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

+
+ critical +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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
+ + + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+

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. +

-
-
-
-
- +
+ + + + +" +`; + +exports[`Successful tests Empty violations 1`] = ` +" + + + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+ +
+
axe-core found 0 violations
+ + + +
+ + + + +" +`; + +exports[`Successful tests Inapplicable present 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. IDs of active elements must be unique
+ 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
-
+
+
duplicate-id-active
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value of active elements is unique

+
+ serious +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
-
- - -" -`; - -exports[`createHtmlReport() test Verify report is created with 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 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
+
+ 9. Document must have one main landmark +
Learn more
-
button-name
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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
-

Ensures buttons have discernible text

+

Links can be distinguished without relying on color

- critical + serious
- - - + + + - - + +
#Source CodeSelector#Issue Description + 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)" +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+
+
@@ -10477,22 +7399,24 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Elements must have sufficient color contrast
+
+ 12. Links must have discernible text +
Learn more
-
color-contrast
+
link-name
- 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 links have discernible text

serious
@@ -10501,112 +7425,919 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - -
#Issue Description + To solve this violation, you need to... +
1<h3>Be Bold...</h3>":root > h3" +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
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 location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3<h3>Countdown...</h3>":root > h3" +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
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)"28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5<h3>Blast Off!</h3>":root > h3"29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
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)"30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]"31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]"32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
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"33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>"li:nth-child(3) > .deal-text > h3 > .link"34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11<a href="mars2.html?a=free_year">Book a free year on Mars</a>":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]"35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
-
-
-
-
-
-
-
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 CodeSelector36 +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
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"37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
@@ -10616,415 +8347,1537 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
id attribute value must be unique
+
+ 14. Elements should not have tabindex greater than zero +
Learn more
-
duplicate-id
+
tabindex
- WCAG 2.0 Level A + Best practice
-

Ensures every id attribute value is unique

+

Ensures tabindex attribute values are not greater than 0

- minor + serious
- - - + + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<div id="control-panel" class="container-fluid-full">".loginnow > .container-fluid-full" +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2<nav id="left-control-nav" class="pull-left">".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
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)" +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
-
-
-
-
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 -
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#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<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 '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
+
-
-
-
-
<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"
+
+
+

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
+
-
-
-
-
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"]"
-
+
+ + + + +" +`; + +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/ +
+
-
-
-
-
Form elements must have labels
- Learn more -
-
-
label
-
- WCAG 2.0 Level A -
-
-
-

Ensures every form element has a label

-
- critical -
+
axe-core found 0 violations
+ + + +
+
+
+
+ +
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#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
+
-
-
-
-
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"
+
+
+

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
+
-
-
-
-
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)"
-
+
+ + + + +" +`; + +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

-
Links must be distinguished from surrounding text in a way that does not rely on color
+
+ 1. <html> element must have a lang attribute +
Learn more
-
link-in-text-block
+
html-has-lang
WCAG 2.0 Level A
-

Links can be distinguished without relying on color

+

Ensures every HTML document has a lang attribute

serious
@@ -11033,16 +9886,30 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - - - + + + - - + +
#Source CodeSelector#Issue Description + 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"]" +

Element location

+ 
html
+

Element source

+ 
<html>
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
@@ -11052,78 +9919,56 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Links must have discernible text
+
+ 2. Document must have one main landmark +
Learn more
-
link-name
+
landmark-one-main
- WCAG 2.0 Level A + Best practice
-

Ensures links have discernible text

+

Ensures the document has a main landmark

- serious + moderate
- - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
#Source CodeSelector#Issue Description + 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"]" +

Element location

+ 
html
+

Element source

+ 
<html>
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
@@ -11133,7 +9978,9 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
All page content must be contained by landmarks
+
+ 3. All page content must be contained by landmarks +

Ensures all page content is contained by landmarks

-
- moderate -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ 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"]"#Issue Description + To solve this violation, you need to... +
37<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">".twitter-follow-button", "img[src$="jot"]"1 +

Element location

+ 
div
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
@@ -11365,7 +10042,9 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Elements should not have tabindex greater than zero
+
+ 4. Elements should not have tabindex greater than zero +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ + +
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+ @@ -11426,7 +10143,7 @@ exports[`createHtmlReport() test Verify report is created with violations, passe aria-expanded=\\"false\\" aria-controls=\\"passes\\" > - axe returned 38 passed axe + axe returned 12 passed axe checks. Expand details on click @@ -11442,1008 +10159,1214 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - - - - - + + + + + - - + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#DescriptionAxe rule IDWCAGNodes passed check#DescriptionAxe rule IDWCAGNodes passed check
1Elements must only use allowed ARIA attributesaria-allowed-attraria-hidden='true' must not be present on the document bodyaria-hidden-body WCAG 2.0 Level A101
2ARIA role must be appropriate for the elementaria-allowed-rolePage 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-content Best practice 14
3aria-hidden='true' must not be present on the document bodyaria-hidden-body8Links must have discernible textlink-name WCAG 2.0 Level A 1
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
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+

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
5 ARIA hidden element must not contain focusable elements aria-hidden-focus WCAG 2.0 Level A2
56ARIA input fields must have an accessible namearia-input-field-nameWCAG 2.0 Level A
7 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>dlitem WCAG 2.0 Level A1
1622IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level A
23 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-name40Aside 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-block WCAG 2.0 Level A5
2948 <ul> and <ol> must only directly contain <li>, <script> or <template> elements list WCAG 2.0 Level A1
3049 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2.0 Level A3
31Users should be able to zoom and scale the text up to 500%meta-viewport-largeBest practice150<marquee> elements are deprecated and must not be usedmarqueeWCAG 2.0 Level A
32Zooming and scaling must not be disabledmeta-viewport51Timed 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-valid Best practice1
33Page must contain a level-one headingpage-has-heading-one56Ensure 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-link Best practice1
34All page content must be contained by landmarksregionBest practice28059svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A
3560 Elements should not have tabindex greater than zero tabindex Best practice5
3661 The <caption> element should not contain the same text as the summary attribute table-duplicate-name Best practice1
3762 Data or header cells should not be used to give caption to a data table. table-fake-caption 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-attr63All non-empty td element in table larger than 3 by 3 must have an associated table headertd-has-header 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 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-block64All cells in a table element that use the headers attribute must only refer to other cells of that same tabletd-headers-attr WCAG 2.0 Level A22
4<video> elements must have captionsvideo-caption65All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cells 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. -

+ + + 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 + + +
-
+
-
+
-
-
-
-
-

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[`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
1Elements must only use allowed ARIA attributesaria-allowed-attrWCAG 2.0 Level A1019table-fake-captiontrue
2ARIA role must be appropriate for the elementaria-allowed-roleBest practice1420css-orientation-lockfalse
3aria-hidden='true' must not be present on the document bodyaria-hidden-bodyWCAG 2.0 Level A121autocomplete-validtrue
4ARIA hidden element must not contain focusable elementsaria-hidden-focusWCAG 2.0 Level A222link-in-text-blocktrue
5Required ARIA attributes must be providedaria-required-attrWCAG 2.0 Level A1323no-autoplay-audiotrue
6Certain ARIA roles must contain particular childrenaria-required-childrenWCAG 2.0 Level A1324color-contrasttrue
7Certain ARIA roles must be contained by particular parentsaria-required-parentWCAG 2.0 Level A1325meta-viewporttrue
8ARIA roles used must conform to valid valuesaria-rolesWCAG 2.0 Level A1326avoid-inline-spacingtrue
9ARIA attributes must conform to valid valuesaria-valid-attr-valueWCAG 2.0 Level A1027server-side-image-maptrue
10ARIA attributes must conform to valid names28meta-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
45 aria-valid-attrWCAG 2.0 Level A10true
11autocomplete attribute must be used correctlyautocomplete-validWCAG 2.1 Level AA346aria-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
12Inline text spacing must be adjustable with custom stylesheetsavoid-inline-spacingWCAG 2.1 Level AA858labeltrue
13Buttons must have discernible textbutton-nameWCAG 2.0 Level A1259accesskeystrue
14Page must have means to bypass repeated blocksbypassWCAG 2.0 Level A160regiontrue
15Documents must have <title> element to aid in navigationdocument-titleWCAG 2.0 Level A161aria-allowed-roletrue
16IDs used in ARIA and labels must be uniqueduplicate-id-ariaWCAG 2.0 Level A762landmark-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,97 +11374,4970 @@ 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

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

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
+
+
+
+
+
+
+
+ 14. Elements should not have tabindex greater than zero
+ 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
-
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
+ + " `; -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 +16352,39 @@ 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; + } + .hljs { + white-space: pre-wrap; + width: 100%; + background: #f0f0f0; + } + p { + margin-top: 0.3rem; + } + li { + line-height: 1.618; + } + + AXE Accessibility Results
-
- +
+
Page URL: https://dequeuniversity.com/demo/mars/
- - -
+
+ +
axe-core found 85 violations
- - - - - - + + + + + + - + @@ -12632,7 +16455,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12640,7 +16463,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12648,7 +16471,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12656,7 +16479,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12664,7 +16487,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12672,7 +16495,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12680,7 +16503,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12688,7 +16511,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12696,7 +16519,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12704,7 +16527,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12712,7 +16535,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12720,7 +16543,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12728,7 +16551,7 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - + @@ -12741,7 +16564,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Buttons must have discernible text
+
+ 1. Buttons must have discernible text +
- - - + + + - - +</button> + +
#DescriptionAxe rule IDWCAGImpactCount#DescriptionAxe rule IDWCAGImpactCount
11 Buttons must have discernible text button-name WCAG 2.0 Level A1
22 Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA11
33 IDs of active elements must be unique duplicate-id-active WCAG 2.0 Level A1
44 id attribute value must be unique duplicate-id WCAG 2.0 Level A10
55 Frames must have title attribute frame-title WCAG 2.0 Level A2
66 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A1
77 Images must have alternate text image-alt WCAG 2.0 Level A4
88 Form elements must have labels label WCAG 2.0 Level A1
99 Document must have one main landmark landmark-one-main Best practice4
1010 Ensures landmarks are unique landmark-unique Best practice1
1111 Links must be distinguished from surrounding text in a way that does not rely on color link-in-text-block WCAG 2.0 Level A1
1212 Links must have discernible text link-name WCAG 2.0 Level A8
1313 All page content must be contained by landmarks region Best practice37
1414 Elements should not have tabindex greater than zero tabindex Best practice
#Source CodeSelector#Issue Description + To solve this violation, you need to... +
1<button class="ui-datepicker-trigger" type="button"> + +

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>
".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
    • +
+
+
@@ -12786,7 +16630,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Elements must have sufficient color contrast
+
+ 2. Elements must have sufficient color contrast +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <h3>Be Bold...</h3> - ":root > h3" + +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+ 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 location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 3 - <h3>Countdown...</h3> - ":root > h3" + +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+ 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 location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 5 - <h3>Blast Off!</h3> - ":root > h3" + +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+ 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 location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 7 - <a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a> - ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 8 - <a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a> - ":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 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" + +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 10 - <a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a> - "li:nth-child(3) > .deal-text > h3 > .link" + +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ 11 - <a href="mars2.html?a=free_year">Book a free year on Mars</a> - ":root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ + +
+

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
    • +
+
+

Related node:

+ 
body
+ @@ -12882,7 +16884,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
IDs of active elements must be unique
+
+ 3. IDs of active elements must be unique +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
.active
+

Element source

+ 
<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>
+ + +
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+ @@ -12925,7 +16946,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
id attribute value must be unique
+
+ 4. id attribute value must be unique +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <div id="control-panel" class="container-fluid-full"> - ".loginnow > .container-fluid-full" + +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .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)" + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+ 3 - <div id="search-bar" class="pull-left"> + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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)"
+</div>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+ 4 - <form id="search" action="/demo/mars/mars2" method="get"> + +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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"]"
+</form>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
: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" + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+ 6 - <div id="vap-section"> + +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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)"
+<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>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+ 7 - <input type="hidden" id="nCountries" name="nCountries"> - "#select-country > input[name="nCountries"][type="hidden"]" + +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+ 8 - <div id="passenger-select" class="widget-container middle"> - ".middle.widget-container:nth-child(13)" + +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+ 9 - <div id="passengers"> - ".middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)" + +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+ 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)" + +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ + +
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+ @@ -13025,7 +17190,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Frames must have title attribute
+
+ 5. Frames must have title attribute +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
#player
+

Element source

+ 
<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>
+ + +
+

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" + +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ + +
+

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"
    • +
+
+ @@ -13073,7 +17274,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
<html> element must have a lang attribute
+
+ 6. <html> element must have a lang attribute +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
html
+

Element source

+ 
<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">
+ + +
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+ @@ -13116,7 +17333,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Images must have alternate text
+
+ 7. Images must have alternate text +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <img src="/assets/demo-sites/mars/js/seg" width="1" height="1"> - "img[src$="seg"]" + +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ + +
+

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"]" + +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ + +
+

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"]" + +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ + +
+

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"]" + +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ + +
+

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"
    • +
+
+ @@ -13174,7 +17463,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Form elements must have labels
+
+ 8. Form elements must have labels +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <input type="text" class="search" name="query" placeholder="search"> - ":root > .search[name="query"][placeholder="search"]" + +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+ @@ -13217,7 +17526,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Document must have one main landmark
+
+ 9. Document must have one main landmark +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
html
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ + +
+

Fix all of the following:

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

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ + +
+

Fix all of the following:

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

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ + +
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+ @@ -13275,7 +17639,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Ensures landmarks are unique
+
+ 10. Ensures landmarks are unique +
- # - Source Code - Selector + # + Issue Description + + 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)" + +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ + +
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+ @@ -13318,7 +17709,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Links must be distinguished from surrounding text in a way that does not rely on color
+
+ 11. Links must be distinguished from surrounding text in a way that does not rely on color +
- # - Source Code - Selector + # + Issue Description + + 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"]" + +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ + +
+

Fix all of the following:

+
    +
  • Links need to be distinguished from surrounding text in some way other than by color
    • +
+
+ @@ -13361,7 +17768,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Links must have discernible text
+
+ 12. Links must have discernible text +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a> - ".link[href$="mars\\\\/\\\\#"]" + +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+ 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"]" + +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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" + +

Element location

+ 
.active
+

Element source

+ 
<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>
+ + +
+

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"]" + +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ + +
+

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"]" + +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ + +
+

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"
    • +
+
+ @@ -13442,7 +18029,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
All page content must be contained by landmarks
+
+ 13. All page content must be contained by landmarks +
- # - Source Code - Selector + # + Issue Description + + To solve this violation, you need to... + 1 - <div style="width: 1px; height: 1px; display: inline;"> - "body > div:nth-child(1)" + +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ + +
+

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" + +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ + +
+

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"]" + +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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"]" + +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ + +
+

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" + +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="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" + +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ + +
+

Fix any of the following:

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

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</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" + +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ + +
+

Fix any of the following:

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

Element location

+ 
#route-type
+

Element source

+ 
<div id="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" + +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ + +
+

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" + +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ + +
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+ 12 - <span class="wrapper"> + +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
 <span class="traveler-label">Traveler</span>
-</span>
-                                    "#passenger0 > .wrapper:nth-child(1)"
+</span>
+ + +
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+ 13 - <span class="wrapper age-range"> + +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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"
+</span>
+ + +
+

Fix any of the following:

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

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="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" + +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ + +
+

Fix any of the following:

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

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="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" + +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ + +
+

Fix any of the following:

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

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ + +
+

Fix any of the following:

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

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ + +
+

Fix any of the following:

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

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ + +
+

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)" + +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ + +
+

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" + +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ + +
+

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" + +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ + +
+

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" + +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ + +
+

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"]" + +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ + +
+

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"]" + +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ + +
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+ @@ -13674,7 +18716,9 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
-
Elements should not have tabindex greater than zero
+
+ 14. Elements should not have tabindex greater than zero +
- # - Source Code - Selector + # + Issue Description + + 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" + +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ + +
+

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" + +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ + +
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+ @@ -13751,11 +18833,11 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in - - - - - + + + + + @@ -14068,378 +19150,2906 @@ 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

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

Ensures buttons have discernible text

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

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>
+ 		+
+

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
    • +
+
+
+
+
+
+
+
+
+
+ 2. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Be Bold...</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
    • +
+
+

Related node:

+ 
body
+
2 +

Element location

+ 
#vap-plan > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
3 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Countdown...</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
    • +
+
+

Related node:

+ 
body
+
4 +

Element location

+ 
#vap-book > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
5 +

Element location

+ 
:root > h3
+

Element source

+ 
<h3>Blast Off!</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
    • +
+
+

Related node:

+ 
body
+
6 +

Element location

+ 
#vap-travel > p:nth-child(3)
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
7 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

+ 
<a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
8 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]
+

Element source

+ 
<a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
9 +

Element location

+ 
li:nth-child(2) > .deal-text > p
+

Element source

+ 
<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>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
10 +

Element location

+ 
li:nth-child(3) > .deal-text > h3 > .link
+

Element source

+ 
<a class="link" href="mars2.html?a=low_price_guarantee">Lowest Price Guarantee</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
11 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=free_year"]
+

Element source

+ 
<a href="mars2.html?a=free_year">Book a free year on Mars</a>
+ 		+
+

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
    • +
+
+

Related node:

+ 
body
+
+
+
+
+
+
+
+
+ 3. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has active elements with the same id attribute: default
    • +
+
+

Related node:

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+
+
+
+
+
+
+
+
+ 4. id attribute value must be unique +
+ Learn more +
+
+
duplicate-id
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every id attribute value is unique

+
+ minor +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full
+

Element source

+ 
<div id="control-panel" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full
+
2 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+
3 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(2)
+
4 +

Element location

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
:root > form[method="get"][action="\\\\/demo\\\\/mars\\\\/mars2"]
+
5 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right
+

Element source

+ 
<nav id="right-control-nav" class="pull-right" style="display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.loggedin > .container-fluid-full > .container > .span7.pull-right > .pull-right
+
6 +

Element location

+ 
#left-column > div:nth-child(1)
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
#left-column > div:nth-child(2)
+
7 +

Element location

+ 
#select-country > input[name="nCountries"][type="hidden"]
+

Element source

+ 
<input type="hidden" id="nCountries" name="nCountries">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
input[name="nCountries"][value="\\\\31 "][type="hidden"]
+
8 +

Element location

+ 
.middle.widget-container:nth-child(13)
+

Element source

+ 
<div id="passenger-select" class="widget-container middle">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8)
+
9 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > div:nth-child(3)
+

Element source

+ 
<div id="passengers">
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.middle.widget-container:nth-child(8) > .interior-container > div
+
10 +

Element location

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(33)
+

Element source

+ 
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
+ 		+
+

Fix any of the following:

+
    +
  • Document has multiple static elements with the same id attribute
    • +
+
+

Related node:

+ 
.ui-datepicker.ui-helper-clearfix.ui-corner-all:nth-child(38)
+
+
+
+
+
+
+
+
+ 5. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#player
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
#fafbba78
+

Element source

+ 
<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>
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 6. <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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • The <html> element does not have a lang attribute
    • +
+
+
+
+
+
+
+
+
+
+ 7. 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 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
img[src$="seg"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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 +

Element location

+ 
:root > img[width="\\\\32 10"][height="\\\\31 20"]
+

Element source

+ 
<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">
+ 		+
+

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"
    • +
+
+
+
+
+
+
+
+
+
+ 8. Form elements must have labels +
+ Learn more +
+
+
label
+
+ WCAG 2.0 Level A +
+
+
+

Ensures every form element has a label

+
+ critical +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="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
    • +
+
+
+
+
+
+
+
+
+
+ 9. Document must have one main landmark +
+ Learn more +
+
+
landmark-one-main
+
+ Best practice +
+
+
+

Ensures the document has a main landmark

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
html
+

Element source

+ 
<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">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
2 +

Element location

+ 
#player
+html
+

Element source

+ 
<html lang="en" dir="ltr" data-cast-api-enabled="true">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
3 +

Element location

+ 
#fafbba78
+#facebook
+

Element source

+ 
<html lang="en" id="facebook" class="">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
4 +

Element location

+ 
.twitter-follow-button
+html
+

Element source

+ 
<html lang="en" class=" xl en">
+ 		+
+

Fix all of the following:

+
    +
  • Document does not have a main landmark
    • +
+
+
+
+
+
+
+
+
+
+ 10. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)
+

Element source

+ 
<nav id="left-control-nav" class="pull-left">
+ 		+
+

Fix any of the following:

+
    +
  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
    • +
+
+

Related node:

+ 
.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
+
+
+
+
+
+
+
+
+ 11. 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 +
+
+
+ + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
a[href="mars2\\\\.html\\\\?a\\\\=last_will"]
+

Element source

+ 
<a href="mars2.html?a=last_will">prepare your last will and testament</a>
+ 		+
+

Fix all of the following:

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

Ensures links have discernible text

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
.link[href$="mars\\\\/\\\\#"]
+

Element source

+ 
<a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </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"
    • +
+
+
2 +

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]
+

Element source

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

Element location

+ 
:root > a[href="mars2\\\\.html\\\\?a\\\\="]
+

Element source

+ 
<a href="mars2.html?a="></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 +

Element location

+ 
.active
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="Why\\\\ Mars\\\\ died"]
+

Element source

+ 
<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>
+ 		+
+

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 +

Element location

+ 
a[data-text="The\\\\ world\\\\ that\\\\ never\\\\ was"]
+

Element source

+ 
<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>
+ 		+
+

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

Ensures all page content is contained by landmarks

+
+ moderate +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
body > div:nth-child(1)
+

Element source

+ 
<div style="width: 1px; height: 1px; display: inline;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
2 +

Element location

+ 
#purposeDisclaimer
+

Element source

+ 
<div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
3 +

Element location

+ 
:root > .search[name="query"][placeholder="search"]
+

Element source

+ 
<input type="text" class="search" name="query" placeholder="search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
4 +

Element location

+ 
:root > .control-search[type="submit"]
+

Element source

+ 
<input type="submit" class="control-search">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
5 +

Element location

+ 
#left-column
+

Element source

+ 
<div class="span7 left-first pull-left" id="left-column">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
6 +

Element location

+ 
#widget-controls
+

Element source

+ 
<div id="widget-controls" class="widget-container head">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
7 +

Element location

+ 
#route-select > .interior-container > h3
+

Element source

+ 
<h3>Book your Trip</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
8 +

Element location

+ 
#route-type-radio-group
+

Element source

+ 
<div id="route-type-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
9 +

Element location

+ 
#route-type
+

Element source

+ 
<div id="route-type">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
10 +

Element location

+ 
#pass-question-radio-group
+

Element source

+ 
<div id="pass-question-radio-group" class="">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
11 +

Element location

+ 
.middle.widget-container:nth-child(13) > .interior-container > h3
+

Element source

+ 
<h3>Who Is Traveling?</h3>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
12 +

Element location

+ 
#passenger0 > .wrapper:nth-child(1)
+

Element source

+ 
<span class="wrapper">
+<span class="traveler-label">Traveler</span>
+</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
13 +

Element location

+ 
#passenger0 > .age-range.wrapper
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
14 +

Element location

+ 
#add-traveler
+

Element source

+ 
<div class="add-buttons" id="add-traveler">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
15 +

Element location

+ 
#booking-box-submit
+

Element source

+ 
<div id="booking-box-submit" class="widget-container footer">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
16 +

Element location

+ 
#video-box > .interior-container
+

Element source

+ 
<div class="interior-container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
17 +

Element location

+ 
#social-bar
+

Element source

+ 
<div id="social-bar" class="container-fluid-full">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
18 +

Element location

+ 
#footer-book > h4
+

Element source

+ 
<h4>Book Your Trip</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
19 +

Element location

+ 
#footer-book > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
20 +

Element location

+ 
#footer-trains > h4
+

Element source

+ 
<h4>Mars Shuttles</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
21 +

Element location

+ 
#footer-trains > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
22 +

Element location

+ 
#footer-passes > h4
+

Element source

+ 
<h4>Mars Tourist Passes</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
23 +

Element location

+ 
#footer-passes > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
24 +

Element location

+ 
#footer-plan > h4
+

Element source

+ 
<h4>Mars Adventures</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
25 +

Element location

+ 
#footer-plan > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
26 +

Element location

+ 
#footer-faq > h4
+

Element source

+ 
<h4>FAQs</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
27 +

Element location

+ 
#footer-faq > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
28 +

Element location

+ 
#footer-connect > h4
+

Element source

+ 
<h4>Connect With Us</h4>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
29 +

Element location

+ 
#footer-connect > ul
+

Element source

+ 
<ul>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
30 +

Element location

+ 
#copyright
+

Element source

+ 
<div id="copyright" class="container">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
31 +

Element location

+ 
#player
+#player
+

Element source

+ 
<div id="player" style="width: 100%; height: 100%;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
32 +

Element location

+ 
#fafbba78
+._8m > table > tbody > tr:nth-child(1)
+

Element source

+ 
<tr><td><span class="fsl fwb"><a href="../mars2.html" target="_blank">Mars Commuter Express</a></span></td></tr>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
33 +

Element location

+ 
#fafbba78
+.pluginConnectButtonDisconnected
+

Element source

+ 
<div class="pluginButton pluginConnectButtonDisconnected" title=""><div><button type="submit"><i class="pluginButtonIcon img sp_like sx_like_thumb"></i>Like</button></div></div>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
34 +

Element location

+ 
#fafbba78
+#u_0_2
+

Element source

+ 
<span id="u_0_2">378,121</span>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
35 +

Element location

+ 
.twitter-follow-button
+.btn-o
+

Element source

+ 
<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>
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
36 +

Element location

+ 
.twitter-follow-button
+img[src="\\\\.\\\\.\\\\/images\\\\/f\\\\.gif"]
+

Element source

+ 
<img src="../images/f.gif" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
37 +

Element location

+ 
.twitter-follow-button
+img[src$="jot"]
+

Element source

+ 
<img src="jot" alt="" style="position: absolute; height: 1px; width: 1px; top: -9999px; left: -9999px;">
+ 		+
+

Fix any of the following:

+
    +
  • Some page content is not contained by landmarks
    • +
+
+
+
+
+
+
+
+
+
+ 14. Elements should not have tabindex greater than zero
+ 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
-
+
+
tabindex
+
+ Best practice +
+
+
+

Ensures tabindex attribute values are not greater than 0

+
+ serious +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Issue Description + To solve this violation, you need to... +
1 +

Element location

+ 
#from0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
2 +

Element location

+ 
#to0
+

Element source

+ 
<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">
+ 		+
+

Fix any of the following:

+
    +
  • Element has a tabindex greater than 0
    • +
+
+
3 +

Element location

+ 
#deptDate0
+

Element source

+ 
<input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept">
+ 		+
+

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
@@ -14448,6 +22058,10 @@ exports[`createHtmlReport() test Verify report with no violations, passes and in
+ + " 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({