a11y-errors.html

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8"/>
	<title>Accessibility Report For "http://localhost:3000/publish" (Fri Jul 31 2020 15:46:29 GMT-0400 (Eastern Daylight Time))</title>

	<style>

		html, body {
			margin: 0;
			padding: 0;
			background-color: #fff;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 16px;
			line-height: 22px;
			color: #333;
		}
		li {
			margin-bottom: 15px;
		}
		h1, h2, p, pre, ul {
			margin-top: 0;
			margin-bottom: 0;
		}
		h1 {
			margin-bottom: 10px;
			font-size: 24px;
			line-height: 24px;
		}
		h2 {
			font-size: 16px;
		}
		pre {
			white-space: pre-wrap;
			overflow: auto;
		}

		.page {
			max-width: 800px;
			margin: 0 auto;
			padding: 25px;
		}

		.counts {
			margin-top: 30px;
			font-size: 20px;
		}
		.count {
			display: inline-block;
			padding: 5px;
			border-radius: 5px;
			border: 1px solid #eee;
		}

		.clean-list {
			margin-left: 0;
			padding-left: 0;
			list-style: none;
		}
		.results-list {
			margin-top: 30px;
		}

		.result {
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #eee;
		}
		.error {
			background-color: #fdd;
			border-color: #ff9696;
		}
		.warning {
			background-color: #ffd;
			border-color: #e7c12b;
		}
		.notice {
			background-color: #eef4ff;
			border-color: #b6d0ff;
		}

	</style>

</head>
<body>

	<div class="page">

		<h1>Accessibility Report For "http://localhost:3000/publish"</h1>
		<p>Generated at: Fri Jul 31 2020 15:46:29 GMT-0400 (Eastern Daylight Time)</p>

		<p class="counts">
			<span class="count error">10 errors</span>
			<span class="count warning">0 warnings</span>
			<span class="count notice">0 notices</span>
		</p>

		<ul class="clean-list results-list">
			<li class="result error">
				<h2>Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 7:1, but text in this element has a contrast ratio of 2.62:1. Recommendation:  change text colour to #545963.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail</p>
				<pre>&lt;a class=&quot;navigation_navMenuItem__eAjx9&quot; id=&quot;contact-trace&quot; href=&quot;/trace&quot;&gt;Contact Trace&lt;/a&gt; (select with "#contact-trace")</pre>
			</li>
			<li class="result error">
				<h2>Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 7:1, but text in this element has a contrast ratio of 2.62:1. Recommendation:  change text colour to #545963.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail</p>
				<pre>&lt;a class=&quot;navigation_navMenuItem__eAjx9&quot; id=&quot;settings&quot; href=&quot;/settings/&quot;&gt;Settings&lt;/a&gt; (select with "#settings")</pre>
			</li>
			<li class="result error">
				<h2>Error: The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_3.1_3_1_AAA.G141</p>
				<pre>&lt;h4&gt;Publish Data&lt;/h4&gt; (select with "#root &gt; div &gt; div:nth-child(2) &gt; aside &gt; header &gt; h4")</pre>
			</li>
			<li class="result error">
				<h2>Error: The heading structure is not logically nested. This h4 element should be an h1 to be properly nested.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_3.1_3_1_AAA.G141</p>
				<pre>&lt;h4&gt;Publish Data&lt;/h4&gt; (select with "#root &gt; div &gt; div:nth-child(2) &gt; aside &gt; header &gt; h4")</pre>
			</li>
			<li class="result error">
				<h2>Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 7:1, but text in this element has a contrast ratio of 5.9:1. Recommendation:  change background to #2a3fe8.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail</p>
				<pre>&lt;button id=&quot;load-data-for-publishing&quot; class=&quot;styles_button__1QQUp undefined&quot; type=&quot;button&quot;&gt;Load Data For Publishing&lt;/button&gt; (select with "#load-data-for-publishing")</pre>
			</li>
			<li class="result error">
				<h2>Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 7:1, but text in this element has a contrast ratio of NaN:1.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail</p>
				<pre>&lt;a href=&quot;https://www.mapbox.com/about/maps/&quot; target=&quot;_blank&quot;&gt;© Mapbox&lt;/a&gt; (select with "#root &gt; div &gt; div:nth-child(2) &gt; div &gt; div &gt; div &gt; div:nth-child(1) &gt; div:nth-child(3) &gt; div:nth-child(4) &gt; div &gt; div &gt; a:nth-child(1)")</pre>
			</li>
			<li class="result error">
				<h2>Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 7:1, but text in this element has a contrast ratio of NaN:1.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail</p>
				<pre>&lt;a href=&quot;http://www.openstreetmap.org/about/&quot; target=&quot;_blank&quot;&gt;© OpenStreetMap&lt;/a&gt; (select with "#root &gt; div &gt; div:nth-child(2) &gt; div &gt; div &gt; div &gt; div:nth-child(1) &gt; div:nth-child(3) &gt; div:nth-child(4) &gt; div &gt; div &gt; a:nth-child(2)")</pre>
			</li>
			<li class="result error">
				<h2>Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 7:1, but text in this element has a contrast ratio of NaN:1.</h2>
				<p>WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail</p>
				<pre>&lt;a class=&quot;mapbox-improve-map&quot; href=&quot;https://apps.mapbox.com/feedback/?owner=utzel&amp;amp;id=cjvip6voh0j3b1ct61z64ytxw&amp;amp;access_token=pk.eyJ1IjoieW9uYXRhbm1rIiwiYSI6ImNrYjE3NnRrODBocHcyenM1NmdrbnphY2kifQ.fvulI-mZbHuGxqHw1puobw&quot; target=&quot;_blank&quot; rel=&quot;noo... (select with "#root &gt; div &gt; div:nth-child(2) &gt; div &gt; div &gt; div &gt; div:nth-child(1) &gt; div:nth-child(3) &gt; div:nth-child(4) &gt; div &gt; div &gt; a:nth-child(3)")</pre>
			</li>
			<li class="result error">
				<h2>Error: This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.</h2>
				<p>WCAG2AAA.Principle4.Guideline4_1.4_1_2.H91.Button.Name</p>
				<pre>&lt;button type=&quot;button&quot; class=&quot;styles_closeButton__112_d&quot; style=&quot;opacity: 1;&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusab...&lt;/button&gt; (select with "#modal-root &gt; div &gt; button")</pre>
			</li>
			<li class="result error">
				<h2>Error: This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.</h2>
				<p>WCAG2AAA.Principle4.Guideline4_1.4_1_2.H91.Button.Name</p>
				<pre>&lt;button&gt;&lt;svg aria-hidden=&quot;true&quot; focusab...&lt;/button&gt; (select with "#modal &gt; div &gt; table:nth-child(1) &gt; thead &gt; tr &gt; th:nth-child(3) &gt; div &gt; button")</pre>
			</li>
		</ul>

	</div>

</body>
</html>