From 93999fb777de854bdef7bc055abc12a08bee3af4 Mon Sep 17 00:00:00 2001 From: Liliia Pelypenko Date: Thu, 22 Oct 2020 12:46:30 +0900 Subject: [PATCH] Added inapplicable result support, tests and template logic update --- docs/index.html | 1856 +++++++- src/index.ts | 23 +- src/util/AxeReport.ts | 3 +- src/util/prepareReportData.ts | 34 +- src/util/template/pageTemplate.html | 116 +- test/__snapshots__/index.test.ts.snap | 6235 +++++++++++++++++++------ test/index.test.ts | 76 +- test/rawInapplicable.json | 339 ++ test/rawIncomplete.json | 5398 ++++++++++++++++++++- test/rawViolations.json | 2168 +++++++-- 10 files changed, 14117 insertions(+), 2131 deletions(-) create mode 100644 test/rawInapplicable.json diff --git a/docs/index.html b/docs/index.html index ff69925..6fb3696 100644 --- a/docs/index.html +++ b/docs/index.html @@ -56,13 +56,14 @@

- AXE Accessibility Results for EXAMPLE project + AXE Accessibility Results

-

- Axe core library found 3 violations on - http://example.com/ page -

+

axe-core found 85 violations

+
@@ -78,6 +79,46 @@

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -85,46 +126,93 @@

- + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + - + + + + + + + + +
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious11
3IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6 <html> element must have a lang attribute html-has-lang WCAG 2.0 Level A1
27Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8Form elements must have labelslabelWCAG 2.0 Level Acritical1
9 Document must have one main landmark landmark-one-main Best practice moderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate 1
311Links 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
13 All page content must be contained by landmarks region Best practice moderate137
14Elements should not have tabindex greater than zerotabindexBest practiceserious3
-

Failed

-
<html> element must have a lang attribute
+
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
@@ -139,8 +227,10 @@
1 - <html> - "html" + <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)" @@ -150,24 +240,24 @@
-
Document must have one main landmark
+
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
@@ -182,8 +272,61 @@
1 - <html> - "html" + <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"]" @@ -193,24 +336,24 @@
-
All page content must be contained by landmarks
+
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
@@ -225,178 +368,1183 @@
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" + <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
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#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
-
+
+
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
+
+
+
+
+
+
+
+
+ +
+
+
-

What 'incomplete' axe result means?

+

What 'incomplete' axe checks means?

Explanation from axe core documentation: Incomplete results were aborted and require further testing. This can happen either because @@ -410,16 +1558,336 @@

Description Axe rule ID WCAG - Nodes passed check + Nodes with incomplete check + + + + + 1 + Elements must have sufficient color contrast + color-contrast + WCAG 2.0 Level AA + 132 + + + + 2 + Hidden content on the page cannot be analyzed + hidden-content + Best practice + 60 + + + + 3 + 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 + 22 + + + + 4 + <video> elements must have captions + video-caption + WCAG 2.0 Level A + 1 + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+

What 'inapplicable' axe checks means?

+

+ Explanation from axe core documentation: The inapplicable array + lists all the rules for which no matching elements were found on the + page. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#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/src/index.ts b/src/index.ts index 1e75f94..ddb740e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,16 +9,25 @@ export interface CreateReport { url: string; passes?: Result[]; incomplete?: Result[]; + inapplicable?: Result[]; reportFileName?: string; outputDir?: string; projectKey?: string; } +export interface PreparedResults { + violations: Result[]; + passes?: Result[]; + incomplete?: Result[]; + inapplicable?: Result[]; +} + export function createHtmlReport({ violations, url, passes, incomplete, + inapplicable, reportFileName, outputDir, projectKey, @@ -30,20 +39,18 @@ export function createHtmlReport({ } try { const template = loadTemplate(); - const reportData = prepareReportData({ violations, passes, incomplete, url }); + const reportData = prepareReportData({ violations, passes, incomplete, inapplicable }); const htmlContent = mustache.render(template, { url, - totalWrapped: `Axe core library found ${reportData.violationsTotal} violation${ - reportData.violationsTotal === 1 ? '' : 's' - }`, - isViolationPresent: reportData.violationsTotal !== 0, + violationsSummary: reportData.violationsSummary, violations: reportData.violationsSummaryTable, violationDetails: reportData.violationsDetails, - isPassedPresent: !!passes, checksPassed: reportData.checksPassed, - passedTotal: reportData.checksPassed ? reportData.checksPassed.length : 0, - isIncompletePresent: !!incomplete, checksIncomplete: reportData.checksIncomplete, + checksInapplicable: reportData.checksInapplicable, + hasPassed: passes !== undefined, + hasIncomplete: incomplete !== undefined, + hasInapplicable: inapplicable !== undefined, incompleteTotal: reportData.checksIncomplete ? reportData.checksIncomplete.length : 0, projectKey, }); diff --git a/src/util/AxeReport.ts b/src/util/AxeReport.ts index 0818e6c..788b1bd 100644 --- a/src/util/AxeReport.ts +++ b/src/util/AxeReport.ts @@ -24,9 +24,10 @@ interface Details { } export interface AxeReport { - violationsTotal: number; + violationsSummary: string; violationsSummaryTable?: Summary[]; violationsDetails?: Details[]; checksPassed?: Summary[]; checksIncomplete?: Summary[]; + checksInapplicable?: Summary[]; } diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts index 94a0162..cfd9b86 100644 --- a/src/util/prepareReportData.ts +++ b/src/util/prepareReportData.ts @@ -1,6 +1,6 @@ import { AxeReport } from './AxeReport'; import { getWcagReference } from './getWcagReference'; -import { CreateReport } from '../index'; +import { PreparedResults } from '../index'; import { Result } from 'axe-core'; import { Summary } from './AxeReport'; @@ -20,29 +20,34 @@ function simplifyAxeResultForSummary(results: Result[]): Summary[] { * - total accessibility violations (counting nodes) * - summary of violations that could be printed as table * - detailed list of violations that could be printed as formatted text - * @param violations - * @param passes - * @param incomplete */ -export function prepareReportData({ violations, passes, incomplete }: CreateReport): AxeReport { +export function prepareReportData({ + violations, + passes, + incomplete, + inapplicable, +}: PreparedResults): AxeReport { const passedChecks = passes ? simplifyAxeResultForSummary(passes) : undefined; const incompleteChecks = incomplete ? simplifyAxeResultForSummary(incomplete) : undefined; - + const inapplicableChecks = inapplicable ? simplifyAxeResultForSummary(inapplicable) : undefined; + const violationsTotal = violations.reduce((acc, { nodes }) => { + acc += nodes.length; + return acc; + }, 0); + const violationsSummary = `axe-core found ${violationsTotal} violation${ + violationsTotal === 1 ? '' : 's' + }`; if (violations.length === 0) { return { - violationsTotal: 0, + violationsSummary: + 'No violations were found by axe-core with enabled rules and axe check options', checksPassed: passedChecks, checksIncomplete: incompleteChecks, + checksInapplicable: inapplicableChecks }; } - const violationsTotal = violations.reduce((acc, { nodes }) => { - acc += nodes.length; - return acc; - }, 0); - // Prepare data to show summary const violationsSummaryTable = simplifyAxeResultForSummary(violations); - // Prepare data to show detailed list of violations const violationsDetails = violations.map( ({ nodes, impact, description, help, id, tags, helpUrl }, issueIndex) => { @@ -63,10 +68,11 @@ export function prepareReportData({ violations, passes, incomplete }: CreateRepo ); return { - violationsTotal, + violationsSummary, violationsSummaryTable, violationsDetails, checksPassed: passedChecks, checksIncomplete: incompleteChecks, + checksInapplicable: inapplicableChecks, }; } diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html index ad04b59..af4cf9f 100644 --- a/src/util/template/pageTemplate.html +++ b/src/util/template/pageTemplate.html @@ -59,13 +59,14 @@

AXE Accessibility Results{{#projectKey}} for {{projectKey}} project{{/projectKey}}

-

- {{totalWrapped}} on - {{url}} page -

+

{{violationsSummary}}

+
- {{#isViolationPresent}} + {{#violationDetails.length}} @@ -76,7 +77,7 @@

- {{/isViolationPresent}} + {{/violationDetails.length}} {{#violations}} @@ -90,10 +91,9 @@

{{/violations}}

#Count
- - {{#isViolationPresent}} + {{#violationDetails.length}}

Failed

- {{/isViolationPresent}} {{#violationDetails}} + {{/violationDetails.length}} {{#violationDetails}}
@@ -139,7 +139,7 @@
- {{/violationDetails}} {{#isPassedPresent}} + {{/violationDetails}} {{#hasPassed}}
@@ -151,8 +151,9 @@
aria-expanded="false" aria-controls="passes" > - Page elements passed {{passedTotal}} axe rules. Expand details on - click + axe returned {{checksPassed.length}} passed axe + checks{{#checksPassed.length}}. Expand details on + click{{/checksPassed.length}}
@@ -163,6 +164,7 @@
data-parent="#accordionPasses" >
+ {{#checksPassed.length}} @@ -185,11 +187,12 @@
{{/checksPassed}}
+ {{/checksPassed.length}}
- {{/isPassedPresent}} {{#isIncompletePresent}} + {{/hasPassed}} {{#hasIncomplete}}
@@ -201,7 +204,7 @@
aria-expanded="false" aria-controls="incomplete" > - There were {{incompleteTotal}} incomplete checks of axe rules. See + axe returned {{checksIncomplete.length}} incomplete checks. Expand details on click
@@ -213,13 +216,20 @@
data-parent="#accordionIncomplete" >
-

What 'incomplete' axe result means?

+

What 'incomplete' axe checks means?

- Explanation from axe core documentation: 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. + 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. +

+ {{#checksIncomplete.length}} @@ -227,7 +237,7 @@
- + @@ -242,12 +252,74 @@
{{/checksIncomplete}}
Description Axe rule ID WCAGNodes passed checkNodes with incomplete check
+ {{/checksIncomplete.length}} +
+
+
+
+ {{/hasIncomplete}} {{#hasInapplicable}} +
+
+
+
+ +
+
+
+
+

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

+ {{#checksInapplicable.length}} + + + + + + + + + + + {{#checksInapplicable}} + + + + + + + + {{/checksInapplicable}} +
#DescriptionAxe rule IDWCAG
{{index}}{{help}}{{id}}{{wcag}}
+ {{/checksInapplicable.length}}
- - {{/isIncompletePresent}} + {{/hasInapplicable}}
diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index 78b230d..c2d61c2 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -62,10 +62,11 @@ exports[`createHtmlReport() test Verify report is created only with violations b AXE Accessibility Results
-

- Axe core library found 30 violations on - https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads page -

+

axe-core found 85 violations

+
@@ -81,62 +82,170 @@ exports[`createHtmlReport() test Verify report is created only with violations b + + + + + + + + - + - + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + - + - + + + + + + + + + - + + + + + + + + + + + + + + + + + - + - - - - + + + + - +
1Buttons must have discernible textbutton-nameWCAG 2.0 Level Acritical1
2 Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA serious911
23IDs of active elements must be uniqueduplicate-id-activeWCAG 2.0 Level Aserious1
4 id attribute value must be unique duplicate-id WCAG 2.0 Level A minor10
5Frames must have title attributeframe-titleWCAG 2.0 Level Aserious2
6<html> element must have a lang attributehtml-has-langWCAG 2.0 Level Aserious 1
37Images must have alternate textimage-altWCAG 2.0 Level Acritical4
8 Form elements must have labels label WCAG 2.0 Level A critical61
49 Document must have one main landmark landmark-one-main Best practice moderate4
10Ensures landmarks are uniquelandmark-uniqueBest practicemoderate 1
511Links 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
13 All page content must be contained by landmarks region Best practice moderate837
6svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level A14Elements should not have tabindex greater than zerotabindexBest practice serious53
-

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 1 - <div class="icl-Radio-helpText">Set a bid that reflects how much an ad click is worth to your business. You will never pay more than you've bid.</div> - "div:nth-child(2) > .ia-Radio-tabs > .ia-Radio-tab:nth-child(3) > .ia-Radio-tab-label > .icl-Radio-helpText" + <h3>Be Bold...</h3> + ":root > h3" 2 - <div class="icl-Radio-helpText">Paused campaigns will not sponsor jobs until you make them active.</div> - "label[for="label-radio-adStatus-1"] > .icl-Radio-helpText" + <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 - <p class="ia-campaign-management-block-comment">You can limit the number of applies or amount of spend per job across all jobs in a single campaign. After a sponsored job crosses a limit, it will be paused. Your remaining budget will be spent on active jobs in the campaign.<br></p> - ".ia-campaign-management-block-comment" + <h3>Countdown...</h3> + ":root > h3" 4 - <p class="ia-campaign-management-per-job-limits-no-active-limits with-select-indentation">Currently you have no active limits.</p> - ".ia-campaign-management-per-job-limits-no-active-limits" + <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 - <div class="ia-util-floatRight ia-Footer-disclaimer"> - ".ia-Footer-disclaimer" + <h3>Blast Off!</h3> + ":root > h3" 6 - <span class="ia-util-floatRight"><a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a><span>&nbsp;–&nbsp;<a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a></span>&nbsp;–&nbsp;©2020 <a href="https://www.indeed.com/">Indeed</a></span> - ".ia-util-floatRight:nth-child(3)" + <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 href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a> - "a[href$="legal"]" + <a class="" href="mars2.html?a=crater_adventure">10% off Crater Adventure</a> + ":root > a[href="mars2\\\\.html\\\\?a\\\\=crater_adventure"]" 8 - <a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a> - ".ia-util-floatRight:nth-child(3) > span > a" + <a class="" href="mars2.html?a=ice_cream">Free Astronaut Ice Cream</a> + ":root > a[href="mars2\\\\.html\\\\?a\\\\=ice_cream"]" 9 - <a href="https://www.indeed.com/">Indeed</a> - "a[href$="indeed\\\\.com\\\\/"]" + <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"]" @@ -217,24 +339,24 @@ exports[`createHtmlReport() test Verify report is created only with violations b
-
id attribute value must be unique
+
IDs of active elements must be unique
Learn more
-
duplicate-id
+
duplicate-id-active
WCAG 2.0 Level A
-

Ensures every id attribute value is unique

+

Ensures every id attribute value of active elements is unique

- minor + serious
@@ -249,8 +371,8 @@ exports[`createHtmlReport() test Verify report is created only with violations b 1 - <label id="label-radio-one" class="icl-Radio-label" for="radio-one"><input name="endDate" type="radio" class="icl-Radio-control" value="Ongoing" checked=""><span>Ongoing</span></label> - ".ia-CampaignSchedule > .ia-campaign-form-radio > .icl-Radio > .icl-Radio-item:nth-child(2) > .icl-Radio-label[for="radio-one"]" + <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" @@ -260,24 +382,24 @@ exports[`createHtmlReport() test Verify report is created only with violations b
-
Form elements must have labels
+
id attribute value must be unique
Learn more
-
label
+
duplicate-id
WCAG 2.0 Level A
-

Ensures every form element has a label

+

Ensures every id attribute value is unique

- critical + minor
@@ -292,33 +414,65 @@ exports[`createHtmlReport() test Verify report is created only with violations b 1 - <input autocomplete="off" name="budget" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="10" type="text" value=""> - "input[name="budget"]" + <div id="control-panel" class="container-fluid-full"> + ".loginnow > .container-fluid-full" 2 - <input autocomplete="off" type="text" name="startDate" placeholder="Now" class="ia-DateInput-input icl-TextInput-control" value=""> - ".ia-DateInput-input" + <nav id="left-control-nav" class="pull-left"> + ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" 3 - <input autocomplete="off" name="newLimitValue" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="11" type="text" value=""> - "input[name="newLimitValue"]" + <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 - <textarea name="adName" placeholder="Untitled campaign" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea> - "textarea[name="adName"]" + <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 - <textarea name="trackingToken" placeholder="Optional" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea> - "textarea[name="trackingToken"]" + <nav id="right-control-nav" class="pull-right" style="display: inline;"> + ".loginnow > .container-fluid-full > .container > .span7.pull-right > .pull-right" 6 - <input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value=""> - "#input-undefined" + <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)" @@ -328,24 +482,24 @@ exports[`createHtmlReport() test Verify report is created only with violations b
-
Document must have one main landmark
+
Frames must have title attribute
Learn more
-
landmark-one-main
+
frame-title
- Best practice + WCAG 2.0 Level A
-

Ensures the document has a main landmark

+

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

- moderate + serious
@@ -360,8 +514,13 @@ exports[`createHtmlReport() test Verify report is created only with violations b 1 - <html dir="ltr" lang="en-US" class="js-focus-visible"> - "html" + <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" @@ -371,24 +530,24 @@ exports[`createHtmlReport() test Verify report is created only with violations b
-
All page content must be contained by landmarks
+
<html> element must have a lang attribute
Learn more
-
region
+
html-has-lang
- Best practice + WCAG 2.0 Level A
-

Ensures all page content is contained by landmarks

+

Ensures every HTML document has a lang attribute

- moderate + serious
@@ -403,43 +562,109 @@ exports[`createHtmlReport() test Verify report is created only with violations b 1 - <div class="ia-CampaignManagementLeftTopContainer"> - ".ia-CampaignManagementLeftTopContainer" + <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 +
+
+
+ + - - - + + + + + - - - + + + - - - + + + - - - + + + - - - + + + + +
2<div class="icl-Grid-col icl-u-xs-span6 ia-CampaignManagementBody-left-pane">".ia-CampaignManagementBody-left-pane"#Source CodeSelector
3<div><div><span class="ia-campaign-jobs-table-pane-title title-total-jobs">Select a source</span></div><div><span class="icl-Radio-helpText">Only selected jobs will be sponsored</span></div></div>".ia-campaign-jobs-table-pane > div:nth-child(1)"1<img src="/assets/demo-sites/mars/js/seg" width="1" height="1">"img[src$="seg"]"
4<input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value="">"#input-undefined"2<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
5<ul class="icl-Tabs icl-Tabs--justified" role="tablist" aria-orientation="horizontal">".icl-Tabs"3<img src="/assets/demo-sites/mars/images/mars-spaceman.jpg" class="" width="210" height="120">":root > img[width="\\\\32 10"][height="\\\\31 20"]"
6<div class="ia-campaign-jobs-table-wrapper">".ia-campaign-jobs-table-wrapper"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 +
+
+
+ + - - - + + + + + - - - + + +
7<div class="ia-pagination-toolbar icl-Grid">".ia-pagination-toolbar"#Source CodeSelector
8<div class="icl-Grid">".ia-BodyWrapper > .icl-Grid"1<input type="text" class="search" name="query" placeholder="search">":root > .search[name="query"][placeholder="search"]"
@@ -449,24 +674,24 @@ exports[`createHtmlReport() test Verify report is created only with violations b
-
svg elements with an img role have an alternative text
+
Document must have one main landmark
Learn more
-
svg-img-alt
+
landmark-one-main
- WCAG 2.0 Level A + Best practice
-

Ensures svg elements with an img, graphics-document or graphics-symbol role have an accessible text

+

Ensures the document has a main landmark

- serious + moderate
@@ -481,192 +706,50 @@ exports[`createHtmlReport() test Verify report is created only with violations b 1 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-sourceId"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <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 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-budgetStrategy"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <html lang="en" dir="ltr" data-cast-api-enabled="true"> + "#player", "html" 3 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-newLimitType"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <html lang="en" id="facebook" class=""> + "#fafbba78", "#facebook" 4 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - ".ia-campaign-management-per-job-limits-limit-duration-column > .ia-combo-select-dropdown > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" - - - 5 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - ".ia-Button.icl-Button--sm.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <html lang="en" class=" xl en"> + ".twitter-follow-button", "html"
-
- - -" -`; - -exports[`createHtmlReport() test Verify report is created with violations and passes 1`] = ` -" - - - - - - - - - - - - - AXE Accessibility Results - - -
-

- AXE Accessibility Results -

-
-

- Axe core library found 30 violations on - https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads page -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious9
2id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor1
3Form elements must have labelslabelWCAG 2.0 Level Acritical6
4Document must have one main landmarklandmark-one-mainBest practicemoderate1
5All page content must be contained by landmarksregionBest practicemoderate8
6svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level Aserious5
- -

Failed

-
Elements must have sufficient color contrast
+
Ensures landmarks are unique
Learn more
-
color-contrast
+
landmark-unique
- WCAG 2.0 Level AA + Best practice
-

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

+

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

- serious + moderate
@@ -681,48 +764,8 @@ exports[`createHtmlReport() test Verify report is created with violations and pa 1 - <div class="icl-Radio-helpText">Set a bid that reflects how much an ad click is worth to your business. You will never pay more than you've bid.</div> - "div:nth-child(2) > .ia-Radio-tabs > .ia-Radio-tab:nth-child(3) > .ia-Radio-tab-label > .icl-Radio-helpText" - - - 2 - <div class="icl-Radio-helpText">Paused campaigns will not sponsor jobs until you make them active.</div> - "label[for="label-radio-adStatus-1"] > .icl-Radio-helpText" - - - 3 - <p class="ia-campaign-management-block-comment">You can limit the number of applies or amount of spend per job across all jobs in a single campaign. After a sponsored job crosses a limit, it will be paused. Your remaining budget will be spent on active jobs in the campaign.<br></p> - ".ia-campaign-management-block-comment" - - - 4 - <p class="ia-campaign-management-per-job-limits-no-active-limits with-select-indentation">Currently you have no active limits.</p> - ".ia-campaign-management-per-job-limits-no-active-limits" - - - 5 - <div class="ia-util-floatRight ia-Footer-disclaimer"> - ".ia-Footer-disclaimer" - - - 6 - <span class="ia-util-floatRight"><a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a><span>&nbsp;–&nbsp;<a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a></span>&nbsp;–&nbsp;©2020 <a href="https://www.indeed.com/">Indeed</a></span> - ".ia-util-floatRight:nth-child(3)" - - - 7 - <a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a> - "a[href$="legal"]" - - - 8 - <a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a> - ".ia-util-floatRight:nth-child(3) > span > a" - - - 9 - <a href="https://www.indeed.com/">Indeed</a> - "a[href$="indeed\\\\.com\\\\/"]" + <nav id="left-control-nav" class="pull-left"> + ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" @@ -732,24 +775,24 @@ exports[`createHtmlReport() test Verify report is created with violations and pa
-
id attribute value must be unique
+
Links must be distinguished from surrounding text in a way that does not rely on color
Learn more
-
duplicate-id
+
link-in-text-block
WCAG 2.0 Level A
-

Ensures every id attribute value is unique

+

Links can be distinguished without relying on color

- minor + serious
@@ -764,8 +807,8 @@ exports[`createHtmlReport() test Verify report is created with violations and pa 1 - <label id="label-radio-one" class="icl-Radio-label" for="radio-one"><input name="endDate" type="radio" class="icl-Radio-control" value="Ongoing" checked=""><span>Ongoing</span></label> - ".ia-CampaignSchedule > .ia-campaign-form-radio > .icl-Radio > .icl-Radio-item:nth-child(2) > .icl-Radio-label[for="radio-one"]" + <a href="mars2.html?a=last_will">prepare your last will and testament</a> + "a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" @@ -775,24 +818,24 @@ exports[`createHtmlReport() test Verify report is created with violations and pa
-
Form elements must have labels
+
Links must have discernible text
Learn more
-
label
+
link-name
WCAG 2.0 Level A
-

Ensures every form element has a label

+

Ensures links have discernible text

- critical + serious
@@ -807,76 +850,46 @@ exports[`createHtmlReport() test Verify report is created with violations and pa 1 - <input autocomplete="off" name="budget" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="10" type="text" value=""> - "input[name="budget"]" + <a class="link" href="demo/mars/#"><i class="icon-menu-home"></i> </a> + ".link[href$="mars\\\\/\\\\#"]" 2 - <input autocomplete="off" type="text" name="startDate" placeholder="Now" class="ia-DateInput-input icl-TextInput-control" value=""> - ".ia-DateInput-input" + <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 - <input autocomplete="off" name="newLimitValue" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="11" type="text" value=""> - "input[name="newLimitValue"]" + <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 - <textarea name="adName" placeholder="Untitled campaign" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea> - "textarea[name="adName"]" + <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 - <textarea name="trackingToken" placeholder="Optional" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea> - "textarea[name="trackingToken"]" + <a href="mars2.html?a="></a> + ":root > a[href="mars2\\\\.html\\\\?a\\\\="]" 6 - <input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value=""> - "#input-undefined" + <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" - - -
-
-
-
-
-
-
Document must have one main landmark
- Learn more -
-
-
landmark-one-main
-
- Best practice -
-
-
-

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - + + + - - - - - + + +
#Source CodeSelector7<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"]"
1<html dir="ltr" lang="en-US" class="js-focus-visible">"html"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"]"
@@ -888,7 +901,7 @@ exports[`createHtmlReport() test Verify report is created with violations and pa
All page content must be contained by landmarks
Learn more 1 - <div class="ia-CampaignManagementLeftTopContainer"> - ".ia-CampaignManagementLeftTopContainer" + <div style="width: 1px; height: 1px; display: inline;"> + "body > div:nth-child(1)" 2 - <div class="icl-Grid-col icl-u-xs-span6 ia-CampaignManagementBody-left-pane"> - ".ia-CampaignManagementBody-left-pane" + <div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div> + "#purposeDisclaimer" 3 - <div><div><span class="ia-campaign-jobs-table-pane-title title-total-jobs">Select a source</span></div><div><span class="icl-Radio-helpText">Only selected jobs will be sponsored</span></div></div> - ".ia-campaign-jobs-table-pane > div:nth-child(1)" + <input type="text" class="search" name="query" placeholder="search"> + ":root > .search[name="query"][placeholder="search"]" 4 - <input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value=""> - "#input-undefined" + <input type="submit" class="control-search"> + ":root > .control-search[type="submit"]" 5 - <ul class="icl-Tabs icl-Tabs--justified" role="tablist" aria-orientation="horizontal"> - ".icl-Tabs" + <div class="span7 left-first pull-left" id="left-column"> + "#left-column" 6 - <div class="ia-campaign-jobs-table-wrapper"> - ".ia-campaign-jobs-table-wrapper" + <div id="widget-controls" class="widget-container head"> + "#widget-controls" 7 - <div class="ia-pagination-toolbar icl-Grid"> - ".ia-pagination-toolbar" + <h3>Book your Trip</h3> + "#route-select > .interior-container > h3" 8 - <div class="icl-Grid"> - ".ia-BodyWrapper > .icl-Grid" + <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"]" @@ -964,22 +1131,22 @@ exports[`createHtmlReport() test Verify report is created with violations and pa
-
svg elements with an img role have an alternative text
+
Elements should not have tabindex greater than zero
Learn more
-
svg-img-alt
+
tabindex
- WCAG 2.0 Level A + Best practice
-

Ensures svg elements with an img, graphics-document or graphics-symbol role have an accessible text

+

Ensures tabindex attribute values are not greater than 0

serious
@@ -996,133 +1163,2842 @@ exports[`createHtmlReport() test Verify report is created with violations and pa 1 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-sourceId"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <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 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-budgetStrategy"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <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 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-newLimitType"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" - - - 4 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - ".ia-campaign-management-per-job-limits-limit-duration-column > .ia-combo-select-dropdown > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" - - - 5 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - ".ia-Button.icl-Button--sm.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <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 +

+
+

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

+
+

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"
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -1367,164 +4243,788 @@ exports[`createHtmlReport() test Verify report is created with violations and pa - - - -" -`; - -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 -

-
-

- Axe core library found 30 violations on - https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads page -

-
-
#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
9 ARIA attributes must conform to valid values aria-valid-attr-value
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious9
2id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor1
3Form elements must have labelslabelWCAG 2.0 Level Acritical6
4Document must have one main landmarklandmark-one-mainBest practicemoderate1
5All page content must be contained by landmarksregionBest practicemoderate8
6svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level Aserious5
- -

Failed

+
+
+
+
+ +
+
+
+
+

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
+
+
+
+
+
+ + +" +`; + +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 EAXR project +

+
+

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"]"
+
+
+
-
Elements must have sufficient color contrast
+
Document must have one main landmark
Learn more
-
color-contrast
+
landmark-one-main
- WCAG 2.0 Level AA + Best practice
-

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

+

Ensures the document has a main landmark

- serious + moderate
@@ -1539,48 +5039,23 @@ exports[`createHtmlReport() test Verify report is created with violations, passe 1 - <div class="icl-Radio-helpText">Set a bid that reflects how much an ad click is worth to your business. You will never pay more than you've bid.</div> - "div:nth-child(2) > .ia-Radio-tabs > .ia-Radio-tab:nth-child(3) > .ia-Radio-tab-label > .icl-Radio-helpText" + <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 - <div class="icl-Radio-helpText">Paused campaigns will not sponsor jobs until you make them active.</div> - "label[for="label-radio-adStatus-1"] > .icl-Radio-helpText" + <html lang="en" dir="ltr" data-cast-api-enabled="true"> + "#player", "html" 3 - <p class="ia-campaign-management-block-comment">You can limit the number of applies or amount of spend per job across all jobs in a single campaign. After a sponsored job crosses a limit, it will be paused. Your remaining budget will be spent on active jobs in the campaign.<br></p> - ".ia-campaign-management-block-comment" + <html lang="en" id="facebook" class=""> + "#fafbba78", "#facebook" 4 - <p class="ia-campaign-management-per-job-limits-no-active-limits with-select-indentation">Currently you have no active limits.</p> - ".ia-campaign-management-per-job-limits-no-active-limits" - - - 5 - <div class="ia-util-floatRight ia-Footer-disclaimer"> - ".ia-Footer-disclaimer" - - - 6 - <span class="ia-util-floatRight"><a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a><span>&nbsp;–&nbsp;<a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a></span>&nbsp;–&nbsp;©2020 <a href="https://www.indeed.com/">Indeed</a></span> - ".ia-util-floatRight:nth-child(3)" - - - 7 - <a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a> - "a[href$="legal"]" - - - 8 - <a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a> - ".ia-util-floatRight:nth-child(3) > span > a" - - - 9 - <a href="https://www.indeed.com/">Indeed</a> - "a[href$="indeed\\\\.com\\\\/"]" + <html lang="en" class=" xl en"> + ".twitter-follow-button", "html" @@ -1590,24 +5065,24 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
id attribute value must be unique
+
Ensures landmarks are unique
Learn more
-
duplicate-id
+
landmark-unique
- WCAG 2.0 Level A + Best practice
-

Ensures every id attribute value is unique

+

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

- minor + moderate
@@ -1622,8 +5097,8 @@ exports[`createHtmlReport() test Verify report is created with violations, passe 1 - <label id="label-radio-one" class="icl-Radio-label" for="radio-one"><input name="endDate" type="radio" class="icl-Radio-control" value="Ongoing" checked=""><span>Ongoing</span></label> - ".ia-CampaignSchedule > .ia-campaign-form-radio > .icl-Radio > .icl-Radio-item:nth-child(2) > .icl-Radio-label[for="radio-one"]" + <nav id="left-control-nav" class="pull-left"> + ".loginnow > .container-fluid-full > .container > .span5.pull-left.left-first > .pull-left:nth-child(1)" @@ -1633,24 +5108,24 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Form elements must have labels
+
Links must be distinguished from surrounding text in a way that does not rely on color
Learn more
-
label
+
link-in-text-block
WCAG 2.0 Level A
-

Ensures every form element has a label

+

Links can be distinguished without relying on color

- critical + serious
@@ -1665,33 +5140,8 @@ exports[`createHtmlReport() test Verify report is created with violations, passe 1 - <input autocomplete="off" name="budget" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="10" type="text" value=""> - "input[name="budget"]" - - - 2 - <input autocomplete="off" type="text" name="startDate" placeholder="Now" class="ia-DateInput-input icl-TextInput-control" value=""> - ".ia-DateInput-input" - - - 3 - <input autocomplete="off" name="newLimitValue" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="11" type="text" value=""> - "input[name="newLimitValue"]" - - - 4 - <textarea name="adName" placeholder="Untitled campaign" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea> - "textarea[name="adName"]" - - - 5 - <textarea name="trackingToken" placeholder="Optional" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea> - "textarea[name="trackingToken"]" - - - 6 - <input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value=""> - "#input-undefined" + <a href="mars2.html?a=last_will">prepare your last will and testament</a> + "a[href="mars2\\\\.html\\\\?a\\\\=last_will"]" @@ -1701,24 +5151,24 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
Document must have one main landmark
+
Links must have discernible text
Learn more
-
landmark-one-main
+
link-name
- Best practice + WCAG 2.0 Level A
-

Ensures the document has a main landmark

+

Ensures links have discernible text

- moderate + serious
@@ -1733,8 +5183,46 @@ exports[`createHtmlReport() test Verify report is created with violations, passe 1 - <html dir="ltr" lang="en-US" class="js-focus-visible"> - "html" + <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"]" @@ -1746,7 +5234,7 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
All page content must be contained by landmarks
Learn more 1 - <div class="ia-CampaignManagementLeftTopContainer"> - ".ia-CampaignManagementLeftTopContainer" + <div style="width: 1px; height: 1px; display: inline;"> + "body > div:nth-child(1)" 2 - <div class="icl-Grid-col icl-u-xs-span6 ia-CampaignManagementBody-left-pane"> - ".ia-CampaignManagementBody-left-pane" + <div id="purposeDisclaimer">This web page is for demonstration purposes, to show common accessibility errors.</div> + "#purposeDisclaimer" 3 - <div><div><span class="ia-campaign-jobs-table-pane-title title-total-jobs">Select a source</span></div><div><span class="icl-Radio-helpText">Only selected jobs will be sponsored</span></div></div> - ".ia-campaign-jobs-table-pane > div:nth-child(1)" + <input type="text" class="search" name="query" placeholder="search"> + ":root > .search[name="query"][placeholder="search"]" 4 - <input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value=""> - "#input-undefined" + <input type="submit" class="control-search"> + ":root > .control-search[type="submit"]" 5 - <ul class="icl-Tabs icl-Tabs--justified" role="tablist" aria-orientation="horizontal"> - ".icl-Tabs" + <div class="span7 left-first pull-left" id="left-column"> + "#left-column" 6 - <div class="ia-campaign-jobs-table-wrapper"> - ".ia-campaign-jobs-table-wrapper" + <div id="widget-controls" class="widget-container head"> + "#widget-controls" 7 - <div class="ia-pagination-toolbar icl-Grid"> - ".ia-pagination-toolbar" + <h3>Book your Trip</h3> + "#route-select > .interior-container > h3" 8 - <div class="icl-Grid"> - ".ia-BodyWrapper > .icl-Grid" + <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"]" @@ -1822,22 +5464,22 @@ exports[`createHtmlReport() test Verify report is created with violations, passe
-
svg elements with an img role have an alternative text
+
Elements should not have tabindex greater than zero
Learn more
-
svg-img-alt
+
tabindex
- WCAG 2.0 Level A + Best practice
-

Ensures svg elements with an img, graphics-document or graphics-symbol role have an accessible text

+

Ensures tabindex attribute values are not greater than 0

serious
@@ -1854,28 +5496,18 @@ exports[`createHtmlReport() test Verify report is created with violations, passe 1 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-sourceId"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <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 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-budgetStrategy"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <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 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - "div[test-id="dropdown-button-newLimitType"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" - - - 4 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - ".ia-campaign-management-per-job-limits-limit-duration-column > .ia-combo-select-dropdown > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" - - - 5 - <svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg> - ".ia-Button.icl-Button--sm.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm" + <input size="10" id="deptDate0" name="deptDate0" placeholder="mm/dd/yyyy" value="" tabindex="3" class="hasDatepicker input-dept"> + "#deptDate0" @@ -1893,7 +5525,8 @@ exports[`createHtmlReport() test Verify report is created with violations, passe aria-expanded=\\"false\\" aria-controls=\\"passes\\" > - Page elements passed 38 axe rules. Expand details on + axe returned 38 passed axe + checks. Expand details on click
@@ -2172,645 +5805,405 @@ exports[`createHtmlReport() test Verify report is created with violations, passe 1 - - 33 - Page must contain a level-one heading - page-has-heading-one - Best practice - 1 - - - - 34 - All page content must be contained by landmarks - region - Best practice - 280 - - - - 35 - Elements should not have tabindex greater than zero - tabindex - Best practice - 5 - - - - 36 - The <caption> element should not contain the same text as the summary attribute - table-duplicate-name - Best practice - 1 - - - - 37 - Data or header cells should not be used to give caption to a data table. - table-fake-caption - WCAG 2.0 Level A - 1 - - - - 38 - All cells in a table element that use the headers attribute must only refer to other cells of that same table - td-headers-attr - WCAG 2.0 Level A - 1 - - - -
-
-
-
-
-
-
-
- -
-
-
-
-

What 'incomplete' axe result means?

-

- Explanation from axe core documentation: 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. -

- - - - - - - - - - - - - - - - - + + + + + + - - - + + + - + - - - - - + + + + + -
#DescriptionAxe rule IDWCAGNodes passed check
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AA0
33Page must contain a level-one headingpage-has-heading-oneBest practice1
2Hidden content on the page cannot be analyzedhidden-content34All page content must be contained by landmarksregion Best practice4280
3All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsWCAG 2.0 Level A135Elements should not have tabindex greater than zerotabindexBest practice5
-
-
-
-
- - - - -" -`; - -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 EAXR project -

-
-

- Axe core library found 30 violations on - https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads page -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#DescriptionAxe rule IDWCAGImpactCount
1Elements must have sufficient color contrastcolor-contrastWCAG 2.0 Level AAserious9
2id attribute value must be uniqueduplicate-idWCAG 2.0 Level Aminor1
3Form elements must have labelslabelWCAG 2.0 Level Acritical6
4Document must have one main landmarklandmark-one-mainBest practicemoderate1
5All page content must be contained by landmarksregionBest practicemoderate8
6svg elements with an img role have an alternative textsvg-img-altWCAG 2.0 Level Aserious5
- -

Failed

-
-
-
-
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<div class="icl-Radio-helpText">Set a bid that reflects how much an ad click is worth to your business. You will never pay more than you've bid.</div>"div:nth-child(2) > .ia-Radio-tabs > .ia-Radio-tab:nth-child(3) > .ia-Radio-tab-label > .icl-Radio-helpText"
2<div class="icl-Radio-helpText">Paused campaigns will not sponsor jobs until you make them active.</div>"label[for="label-radio-adStatus-1"] > .icl-Radio-helpText"
3<p class="ia-campaign-management-block-comment">You can limit the number of applies or amount of spend per job across all jobs in a single campaign. After a sponsored job crosses a limit, it will be paused. Your remaining budget will be spent on active jobs in the campaign.<br></p>".ia-campaign-management-block-comment"
4<p class="ia-campaign-management-per-job-limits-no-active-limits with-select-indentation">Currently you have no active limits.</p>".ia-campaign-management-per-job-limits-no-active-limits"
5<div class="ia-util-floatRight ia-Footer-disclaimer">".ia-Footer-disclaimer"
6<span class="ia-util-floatRight"><a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a><span>&nbsp;–&nbsp;<a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a></span>&nbsp;–&nbsp;©2020 <a href="https://www.indeed.com/">Indeed</a></span>".ia-util-floatRight:nth-child(3)"
7<a href="https://www.indeed.com/legal">Cookies, Privacy and Terms</a>"a[href$="legal"]"
8<a href="https://www.indeed.com/legal/ccpa-dns">Do Not Sell My Personal Information</a>".ia-util-floatRight:nth-child(3) > span > a"
9<a href="https://www.indeed.com/">Indeed</a>"a[href$="indeed\\\\.com\\\\/"]"
-
-
-
-
-
-
-
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<label id="label-radio-one" class="icl-Radio-label" for="radio-one"><input name="endDate" type="radio" class="icl-Radio-control" value="Ongoing" checked=""><span>Ongoing</span></label>".ia-CampaignSchedule > .ia-campaign-form-radio > .icl-Radio > .icl-Radio-item:nth-child(2) > .icl-Radio-label[for="radio-one"]"
+ + 36 + The <caption> element should not contain the same text as the summary attribute + table-duplicate-name + Best practice + 1 + + + + 37 + Data or header cells should not be used to give caption to a data table. + table-fake-caption + WCAG 2.0 Level A + 1 + + + + 38 + All cells in a table element that use the headers attribute must only refer to other cells of that same table + td-headers-attr + WCAG 2.0 Level A + 1 + + + +
-
-
-
-
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 autocomplete="off" name="budget" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="10" type="text" value="">"input[name="budget"]"
2<input autocomplete="off" type="text" name="startDate" placeholder="Now" class="ia-DateInput-input icl-TextInput-control" value="">".ia-DateInput-input"
3<input autocomplete="off" name="newLimitValue" placeholder="" class="icl-TextInput-control icl-TextInput-control--withIcon" maxlength="11" type="text" value="">"input[name="newLimitValue"]"
4<textarea name="adName" placeholder="Untitled campaign" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea>"textarea[name="adName"]"
5<textarea name="trackingToken" placeholder="Optional" maxlength="249" class="icl-Textarea-control icl-Textarea-control--withIcon"></textarea>"textarea[name="trackingToken"]"
6<input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value="">"#input-undefined"
+
+
+

What 'incomplete' axe checks means?

+

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

+

+ Visit axe API Documentation + to learn more. +

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

Ensures the document has a main landmark

-
- moderate -
-
-
- - - - - - - - - - - - - - - -
#Source CodeSelector
1<html dir="ltr" lang="en-US" class="js-focus-visible">"html"
+
+ + +" +`; + +exports[`createHtmlReport() test Verify report with no violations, no passes, no incomplete, no inapplicable 1`] = ` +" + + + + + + + + + + + + + AXE Accessibility Results + + +
+

+ AXE Accessibility Results +

+
+

No violations were found by axe-core with enabled rules and axe check options

+ +
+ + + +
+
+
+
+
+ +
+
+
+
+
-
-
-
-
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 class="ia-CampaignManagementLeftTopContainer">".ia-CampaignManagementLeftTopContainer"
2<div class="icl-Grid-col icl-u-xs-span6 ia-CampaignManagementBody-left-pane">".ia-CampaignManagementBody-left-pane"
3<div><div><span class="ia-campaign-jobs-table-pane-title title-total-jobs">Select a source</span></div><div><span class="icl-Radio-helpText">Only selected jobs will be sponsored</span></div></div>".ia-campaign-jobs-table-pane > div:nth-child(1)"
4<input aria-labelledby="label-input-undefined input-undefined-helpText" id="input-undefined" placeholder="Search the job cart for titles, locations, reference numbers, terms and more" type="text" class="icl-TextInput-control icl-TextInput-control--withIconRight" aria-invalid="false" value="">"#input-undefined"
5<ul class="icl-Tabs icl-Tabs--justified" role="tablist" aria-orientation="horizontal">".icl-Tabs"
6<div class="ia-campaign-jobs-table-wrapper">".ia-campaign-jobs-table-wrapper"
7<div class="ia-pagination-toolbar icl-Grid">".ia-pagination-toolbar"
8<div class="icl-Grid">".ia-BodyWrapper > .icl-Grid"
+
+
+

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

+
-
-
-
-
svg elements with an img role have an alternative text
- Learn more -
-
-
svg-img-alt
-
- WCAG 2.0 Level A -
-
-
-

Ensures svg elements with an img, graphics-document or graphics-symbol role have an accessible text

-
- serious -
+
+
+
+
+ +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Source CodeSelector
1<svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg>"div[test-id="dropdown-button-sourceId"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm"
2<svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg>"div[test-id="dropdown-button-budgetStrategy"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm"
3<svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg>"div[test-id="dropdown-button-newLimitType"] > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm"
4<svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg>".ia-campaign-management-per-job-limits-limit-duration-column > .ia-combo-select-dropdown > .icl-ButtonDropdown--md.ia-ButtonDropdown.icl-ButtonDropdown > div > .icl-ButtonGroup > .ia-Button.icl-Button--md.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm"
5<svg role="img" class="icl-Icon icl-Icon--black icl-Icon--sm" aria-label="" focusable="false"><g><path d="M5.56,6.44L9,9.88l3.44-3.43L13.5,7.5,9,12,4.5,7.5Z"></path></g></svg>".ia-Button.icl-Button--sm.icl-Button--group > .icl-Icon--black.icl-Icon.icl-Icon--sm"
+
+
+

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

+
+

No violations were found by axe-core with enabled rules and axe check options

+ +
+ + + +
@@ -2822,7 +6215,8 @@ exports[`createHtmlReport() test Verify report is created with violations, passe aria-expanded=\\"false\\" aria-controls=\\"passes\\" > - Page elements passed 38 axe rules. Expand details on + axe returned 38 passed axe + checks. Expand details on click @@ -3165,7 +6559,7 @@ exports[`createHtmlReport() test Verify report is created with violations, passe aria-expanded=\\"false\\" aria-controls=\\"incomplete\\" > - There were 3 incomplete checks of axe rules. See + axe returned 4 incomplete checks. Expand details on click @@ -3177,12 +6571,18 @@ exports[`createHtmlReport() test Verify report is created with violations, passe data-parent=\\"#accordionIncomplete\\" >
-

What 'incomplete' axe result means?

+

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

- Explanation from axe core documentation: 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.

@@ -3191,7 +6591,7 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - + @@ -3200,7 +6600,7 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - + @@ -3208,13 +6608,21 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - + - - + + + + + + + + + + @@ -3224,14 +6632,13 @@ exports[`createHtmlReport() test Verify report is created with violations, passe - " `; -exports[`createHtmlReport() test Verify report wiht no violations, passes and incomplete with optional reportFileName, url and project key params 1`] = ` +exports[`createHtmlReport() test Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params 2`] = ` " @@ -3293,16 +6700,16 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in AXE Accessibility Results for EAXR project
-

- Axe core library found 0 violations on - https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads page -

+

No violations were found by axe-core with enabled rules and axe check options

+
Description Axe rule ID WCAGNodes passed checkNodes with incomplete check
Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA0132
Hidden content on the page cannot be analyzed hidden-content Best practice460
3All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsLinks 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 A 1
-
@@ -3314,7 +6721,8 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in aria-expanded=\\"false\\" aria-controls=\\"passes\\" > - Page elements passed 38 axe rules. Expand details on + axe returned 38 passed axe + checks. Expand details on click @@ -3657,7 +7065,7 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in aria-expanded=\\"false\\" aria-controls=\\"incomplete\\" > - There were 3 incomplete checks of axe rules. See + axe returned 4 incomplete checks. Expand details on click @@ -3669,12 +7077,18 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in data-parent=\\"#accordionIncomplete\\" >
-

What 'incomplete' axe result means?

+

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

- Explanation from axe core documentation: 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.

@@ -3683,7 +7097,7 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in - + @@ -3692,7 +7106,7 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in - + @@ -3700,13 +7114,21 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in - + - - + + + + + + + + + + @@ -3716,7 +7138,6 @@ exports[`createHtmlReport() test Verify report wiht no violations, passes and in - diff --git a/test/index.test.ts b/test/index.test.ts index c51ee51..d93e04a 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -4,6 +4,7 @@ import path from 'path'; const axeRawViolations = require('./rawViolations.json'); const axeRawPassed = require('./rawPasses.json'); const axeRawIncomplete = require('./rawIncomplete.json'); +const axeRawInapplicable = require('./rawInapplicable.json'); describe('createHtmlReport() test', () => { it('Verify throwing an error if required parameters are not passed', async () => { @@ -17,7 +18,7 @@ describe('createHtmlReport() test', () => { it('Verify report is created only with violations because passes and incomplete are not passed', async () => { createHtmlReport({ violations: axeRawViolations, - url: 'https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads', + url: 'https://dequeuniversity.com/demo/mars/', }); const pathToTheReport = path.resolve( process.cwd(), @@ -27,12 +28,7 @@ describe('createHtmlReport() test', () => { const htmlFileContent = fs.readFileSync(pathToTheReport, { encoding: 'utf8', }); - // clean up - try { - fs.unlinkSync(pathToTheReport); - } catch (e) { - // do nothing if file can't be deleted - } + // do not clean up to verify results manually // validate expect(htmlFileContent).toMatchSnapshot(); }); @@ -40,19 +36,14 @@ describe('createHtmlReport() test', () => { createHtmlReport({ violations: axeRawViolations, passes: axeRawPassed, - reportFileName: 'tc2.html', - url: 'https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads', + reportFileName: 'tcPassesAndViolations.html', + url: 'https://dequeuniversity.com/demo/mars/', }); - const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tc2.html'); + const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcPassesAndViolations.html'); const htmlFileContent = fs.readFileSync(pathToTheReport, { encoding: 'utf8', }); - // clean up - try { - fs.unlinkSync(pathToTheReport); - } catch (e) { - // do nothing if file can't be deleted - } + // do not clean up to verify results manually // validate expect(htmlFileContent).toMatchSnapshot(); }); @@ -61,20 +52,15 @@ describe('createHtmlReport() test', () => { violations: axeRawViolations, passes: axeRawPassed, incomplete: axeRawIncomplete, - reportFileName: 'tc3.html', + reportFileName: 'tcPassesViolationsIncomplete.html', outputDir: 'temp', - url: 'https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads', + url: 'https://dequeuniversity.com/demo/mars/', }); - const pathToTheReport = path.resolve(process.cwd(), 'temp', 'tc3.html'); + const pathToTheReport = path.resolve(process.cwd(), 'temp', 'tcPassesViolationsIncomplete.html'); const htmlFileContent = fs.readFileSync(pathToTheReport, { encoding: 'utf8', }); - // clean up - try { - fs.unlinkSync(pathToTheReport); - } catch (e) { - // do nothing if file can't be deleted - } + // do not clean up to verify results manually // validate expect(htmlFileContent).toMatchSnapshot(); }); @@ -85,7 +71,7 @@ describe('createHtmlReport() test', () => { incomplete: axeRawIncomplete, reportFileName: 'tcWithTheKey.html', projectKey: 'EAXR', - url: 'https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads', + url: 'https://dequeuniversity.com/demo/mars/', }); const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcWithTheKey.html'); const htmlFileContent = fs.readFileSync(pathToTheReport, { @@ -95,14 +81,31 @@ describe('createHtmlReport() test', () => { // validate expect(htmlFileContent).toMatchSnapshot(); }); - it('Verify report wiht no violations, passes and incomplete with optional reportFileName, url and project key params', async () => { + it('Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params', async () => { createHtmlReport({ violations: [], passes: axeRawPassed, incomplete: axeRawIncomplete, reportFileName: 'tcAllPassed.html', projectKey: 'EAXR', - url: 'https://lumos.sandbox.stage.indeed.net/analytics/reporting/ads', + url: 'https://dequeuniversity.com/demo/mars/', + }); + const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcAllPassed.html'); + const htmlFileContent = fs.readFileSync(pathToTheReport, { + encoding: 'utf8', + }); + // do not clean up to verify results manually + // validate + expect(htmlFileContent).toMatchSnapshot(); + }); + it('Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params', async () => { + createHtmlReport({ + violations: axeRawViolations, + passes: axeRawPassed, + incomplete: axeRawIncomplete, + inapplicable: axeRawInapplicable, + reportFileName: 'tcInapplicablePresent.html', + url: 'https://dequeuniversity.com/demo/mars/', }); const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcAllPassed.html'); const htmlFileContent = fs.readFileSync(pathToTheReport, { @@ -112,4 +115,21 @@ describe('createHtmlReport() test', () => { // validate expect(htmlFileContent).toMatchSnapshot(); }); + it('Verify report with no violations, no passes, no incomplete, no inapplicable', async () => { + createHtmlReport({ + violations: [], + passes: [], + incomplete: [], + inapplicable: [], + reportFileName: 'tcOnlyPasses.html', + url: 'https://dequeuniversity.com/demo/mars/', + }); + const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcOnlyPasses.html'); + const htmlFileContent = fs.readFileSync(pathToTheReport, { + encoding: 'utf8', + }); + // do not clean up to verify results manually + // validate + expect(htmlFileContent).toMatchSnapshot(); + }); }); diff --git a/test/rawInapplicable.json b/test/rawInapplicable.json new file mode 100644 index 0000000..efc3c86 --- /dev/null +++ b/test/rawInapplicable.json @@ -0,0 +1,339 @@ +[ + { + "id": "accesskeys", + "impact": null, + "tags": ["best-practice", "cat.keyboard"], + "description": "Ensures every accesskey attribute value is unique", + "help": "accesskey attribute value must be unique", + "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/accesskeys?application=axeAPI", + "nodes": [] + }, + { + "id": "area-alt", + "impact": null, + "tags": [ + "cat.text-alternatives", + "wcag2a", + "wcag111", + "wcag244", + "wcag412", + "section508", + "section508.22.a" + ], + "description": "Ensures elements of image maps have alternate text", + "help": "Active elements must have alternate text", + "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/area-alt?application=axeAPI", + "nodes": [] + }, + { + "id": "aria-input-field-name", + "impact": null, + "tags": ["wcag2a", "wcag412"], + "description": "Ensures every ARIA input field has an accessible name", + "help": "ARIA input fields must have an accessible name", + "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/aria-input-field-name?application=axeAPI", + "nodes": [] + }, + { + "id": "aria-roledescription", + "impact": null, + "tags": ["cat.aria", "wcag2a", "wcag412"], + "description": "Ensure aria-roledescription is only used on elements with an implicit or explicit role", + "help": "Use aria-roledescription on elements with a semantic role", + "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/aria-roledescription?application=axeAPI", + "nodes": [] + }, + { + "id": "aria-toggle-field-name", + "impact": null, + "tags": ["wcag2a", "wcag412"], + "description": "Ensures every ARIA toggle field has an accessible name", + "help": "ARIA toggle fields have an accessible name", + "helpUrl": "https://dequeuniversity.com/rules/axe/3.5/aria-toggle-field-name?application=axeAPI", + "nodes": [] + }, + { + "id": "audio-caption", + "impact": null, + "tags": ["cat.time-and-media", "wcag2a", "wcag121", "section508", "section508.22.a"], + "description": "Ensures
Description Axe rule ID WCAGNodes passed checkNodes with incomplete check
Elements must have sufficient color contrast color-contrast WCAG 2.0 Level AA0132
Hidden content on the page cannot be analyzed hidden-content Best practice460
3All th elements and elements with role=columnheader/rowheader must have data cells they describeth-has-data-cellsLinks 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 A 1