Sa11y ACT Conformance Report

<p style="color: #333; background: #FFF;">
		Some text in a human language
	</p>

<p style="color: #333; background: linear-gradient(to right, #FFF, #BBF); width: 500px;">
		Some text in a human language
	</p>

<style>
		p {
			color: #fff;
			height: 50px;
			padding-top: 15px;
			background: #000 no-repeat -20px -20px url('/WAI/content-assets/wcag-act-rules/test-assets/contrast/black-hole.jpeg');
			text-shadow: 0px 0px 2px black;
		}
	</style>
	<p>Black hole sun</p>

<p style="color: #000; font-size:18pt; background: #777;">
		Some text in a human language
	</p>

<p style="color: #000; font-size:14pt; font-weight:700; background: #777;">
		Some text in English
	</p>

<p style="color: #000; background: #666;">
		----=====++++++++___________***********%%%%%%%%%%%±±±±@@@@@@@@
	</p>

<p>Some text in a human language</p>

<p style="color: #CCC; background: #fff;" id="p"></p>
	<script>
		const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
		shadowRoot.innerHTML = '<span style="color: #333;">Some text in English</span>'
	</script>

<a href="https://w3c.org/">W3C</a>

<div role="button">My button!</div>

<p style="color: #666; background: white;">
		Some text in English
	</p>

<p style="color: #666; background: linear-gradient(to right, #FFF, #0FF); width: 300px">
		Some text in English
	</p>

<p style="color: #000; font-size:18pt; background: #666;">
		Some text in a human language
	</p>

<p style="color: #AAA; background: white;">
		Some text in English
	</p>

<p style="color: #000; font-size:14pt; font-weight:700; background: #666;">
		Some text in English
	</p>

<p
		style="color: #777; height:50px; padding-top:20px; background: black no-repeat -20px -20px url('/WAI/content-assets/wcag-act-rules/test-assets/contrast/black-hole.jpeg');"
	>
		Black hole sun
	</p>

<p style="color: rgba(0,0,0,.6); background: #FFF">
		Some text in English
	</p>

<div style="background: #FFF">
		<p style="color: #000; opacity: .6">
			Some text in English
		</p>
	</div>

<p style="color: #666; background: #fff;" id="p"></p>
	<script>
		const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
		shadowRoot.textContent = 'Some text in English'
	</script>

<style>
		#backgroundSplit {
			color: rgba(90, 90, 90, 0.9);
			background-position: top 0 left 0;
			background-image: linear-gradient(90deg, transparent, transparent 3.3em, black 3.3em, black 6em);
			padding: 0 1em;
		}
	</style>
	<span id="backgroundSplit">
		Hello world
	</span>

<p style="color: #333; background: #FFF;">
		Helvetica is a widely used sans-serif typeface developed in 1957 by Max Miedinger and Eduard Hoffmann.
	</p>
	<p style="font-family: helvetica; background: #EEE; color: #555;">
		The quick brown fox jumps over the lazy dog.
	</p>

<button style="color: #555; background: #EEE;">My button!</button>

<div role="button" style="color: #555; background: #EEE;">My button!</div>

<p style="display: none">Some invisible text in English</p>

<p style="position:absolute; top: -999em">Some invisible text in English</p>

<p style="color: white; background: white;" aria-hidden="true">Hidden text - U U D D L R L R B A S</p>

<svg>
		<text x="0" y="15">I love SVG!</text>
	</svg>

<p>
		<img scr="/WAI/content-assets/wcag-act-rules/test-assets/contrast/example.png" alt="example" />
	</p>

<label style="color:#888; background: white;">
		My name
		<input type="text" disabled />
	</label>

<label id="my_pets_name" style="color:#888; background: white;">
		My pet's name
	</label>
	<div
		role="textbox"
		aria-labelledby="my_pets_name"
		aria-disabled="true"
		style="height:20px; width:100px; border:1px solid black;"
	>
		test
	</div>

<fieldset disabled style="color:#888; background: white;">
		<label>
			My name
			<input />
		</label>
	</fieldset>

<div role="group" aria-disabled="true" style="color:#888; background: white;">
		<label>
			My name
			<input />
		</label>
	</div>

<button style="color: #777; background: #EEE;" disabled>My button!</button>

<div role="button" style="color: #777; background: #EEE;" aria-disabled="true">My button!</div>

<button style="color: #666; background-color: #FFF" aria-label="Close">X</button>

<img alt="W3C logo" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />

<div
		role="img"
		aria-label="W3C logo"
		style="width:72px; height:48px; background-image: url(/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png)"
	></div>

<div style="display: none" id="img-label">W3C logo</div>
	<div
		role="img"
		aria-labelledby="img-label"
		style="width:72px; height:48px; background-image: url(/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png)"
	></div>

<img title="W3C logo" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />

<img alt="" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/background.png" />

<img role="presentation" style="width:72px; height:48px; background-image: url(/WAI/content-assets/wcag-act-rules/test-assets/shared/background.png)" />

<img role="none" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/background.png" />

<div style="margin-left:-9999px;">
		<img alt="" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/background.png" />
	</div>

<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />

<div role="img" style="width:72px; height:48px; background-image: url(/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png)"></div>

<div style="margin-left:-9999px;"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" /></div>

<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" alt=" " />

<img role="none" tabindex="0" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
		<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
	</svg>

<div
		role="img"
		aria-hidden="true"
		style="width:72px; height:48px; background-image: url(/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png)"
	></div>

<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" aria-hidden="true" />

<div style="display: none">
		<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />
	</div>

<div style="visibility: hidden">
		<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />
	</div>

<!DOCTYPE html>
<html>
	<title>This page has a title</title>
</html>

<!DOCTYPE html>
<html>
	<title>This page gives a title to an iframe</title>
	<iframe src="/WAI/content-assets/wcag-act-rules/test-assets/sc2-4-2-title-page-without-title.html"></iframe>
</html>

<title>Title of the page.</title>

<title>Title of the page.</title>

<title></title>

<!DOCTYPE html>
<html>
	<h1>this page has no title</h1>
</html>

<!DOCTYPE html>
<html>
	<title></title>
</html>

<!DOCTYPE html>
<html>
	<iframe src="/WAI/content-assets/wcag-act-rules/test-assets/sc2-4-2-title-page-with-title.html"></iframe>
</html>

<title>Title of the page.</title>

<!DOCTYPE html>
<html>
	<title> </title>
</html>

<iframe src="/WAI/content-assets/wcag-act-rules/test-assets/sc2-4-2-title-page-without-title.html"></iframe>

<template id="shadow-element">
			<title>This is the page title</title>
		</template>
		<script>
			const host = document.querySelector('body')
			const shadow = host.attachShadow({ mode: 'open' })
			const template = document.getElementById('shadow-element')

			shadow.appendChild(template.content)
		</script>

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" alt="Search" />

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" aria-label="Search" />

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" title="Search" />

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" aria-labelledby="id1" />
	<div id="id1">Search</div>

<input type="image" name="search" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" />

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" alt="" />

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" aria-labelledby="non-existing" />

<button>My button</button>

<input type="button" value="My button" />

<button><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" alt="Search" /></button>

<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" alt="W3C logo" />

<input type="image" src="/WAI/content-assets/wcag-act-rules/test-assets/shared/search-icon.svg" style="display: none;" />

<a href="#desc">See the description of this product.</a>
	
	<p id="desc">This product consists of several web pages.</p>

<a href="#main"><img src="/WAI/content-assets/wcag-act-rules/test-assets/5effbb/main.png" alt="Go to the main content"/></a>
	
	<main>
		<p id="main">This is the main content.</p>
	</main>

<p>See the description of <a href="#desc">this product</a>.</p>
	
	<p id="desc">This product consists of several web pages.</p>

<span role="link" tabindex="0" onclick="document.location+='#desc'">See description of the product.</span>
	
	<p id="desc">This product consists of several web pages.</p>

<ul>
		<li>
			Ulysses
			<ul>
				<li><a href="https://www.gutenberg.org/files/4300/4300-h/4300-h.htm"> HTML </a></li>
				<li>
					<a href="https://www.gutenberg.org/ebooks/4300.epub.images?session_id=04cd710372888de8d8d322215cdfe8ce5b0f8d73">
						EPUB
					</a>
				</li>
				<li><a href="https://www.gutenberg.org/files/4300/4300-0.txt"> Plain text </a></li>
			</ul>
		</li>
	</ul>

<table>
		<tr>
			<th colspan="3">Ulysses</th>
		</tr>
		<tr>
			<td><a href="https://www.gutenberg.org/files/4300/4300-h/4300-h.htm">HTML</a></td>
			<td>
				<a href="https://www.gutenberg.org/ebooks/4300.epub.images?session_id=04cd710372888de8d8d322215cdfe8ce5b0f8d73"
					>EPUB</a
				>
			</td>
			<td><a href="https://www.gutenberg.org/files/4300/4300-0.txt">Plain text</a></td>
		</tr>
	</table>

<p id="instructions">Go to the main content.</p>
	<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0">
		<a href="#main" aria-labelledby="instructions">
			<path
				style="fill:#1E201D;"
				d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111
				C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587
				c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"
			/>
		</a>
	</svg>
	
	<main>
		<p id="main">This is the main content.</p>
	</main>

<table>
		<tr>
			<td>
				Download Ulysses in
				<a href="https://www.gutenberg.org/files/4300/4300-h/4300-h.htm">HTML</a>
			</td>
			<td>
				Download Ulysses in
				<a href="https://www.gutenberg.org/ebooks/4300.epub.images?session_id=04cd710372888de8d8d322215cdfe8ce5b0f8d73"
					>EPUB</a
				>
			</td>
		</tr>
	</table>

<h2 id="rule">Button has accessible name</h2>
	<ul>
		<li>
			<a href="https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/#applicability" aria-describedby="rule"
				>Applicability</a
			>
		</li>
		<li>
			<a href="https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/#expectation" aria-describedby="rule"
				>Expectation</a
			>
		</li>
	</ul>

<a href="#desc">More</a>
	
	<p id="desc">This product consists of several web pages.</p>

<div role="link" tabindex="0" onclick="document.location+='#main'">More</div>
	
	<main>
		<p id="main">This is the main content.</p>
	</main>

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0">
		<a href="#main">
			<text x="20" y="20">
				Go
			</text>
		</a>
	</svg>
	
	<main>
		<p id="main">This is the main content.</p>
	</main>

<p>
		The W3C held a workshop on June 9-10, 2005 at DERI Innsbruck (Austria), to gather information about potential
		standardization work on Semantics in Web Services.
	</p>
	
	<p><a href="https://www.w3.org/2005/04/FSWS/workshop-report.html">Workshop</a></p>

<p style="font-weight: bold">Ulysses</p>
	<ul>
		<li><a href="https://www.gutenberg.org/files/4300/4300-h/4300-h.htm"> HTML </a></li>
		<li>
			<a href="https://www.gutenberg.org/ebooks/4300.epub.images?session_id=04cd710372888de8d8d322215cdfe8ce5b0f8d73">
				EPUB
			</a>
		</li>
		<li><a href="https://www.gutenberg.org/files/4300/4300-0.txt"> Plain text </a></li>
	</ul>

<table>
		<tr>
			<th colspan="3">Books</th>
		</tr>
		<tr>
			<td>Ulysses</td>
			<td><a href="https://www.gutenberg.org/files/4300/4300-h/4300-h.htm">Download</a></td>
			<td>1.61MB</td>
		</tr>
	</table>

<a href="https://www.w3.org/WAI" role="button">Web Accessibility Initiative (WAI)</a>

<a href="https://www.w3.org/WAI" style="display: none;"
		><img src="/WAI/content-assets/wcag-act-rules/test-assets/5effbb/cart.svg" alt="Checkout" />Checkout</a
	>

<a>placeholder</a>

<p aria-hidden="true">Some text</p>

<div aria-hidden="true">
		<a href="/" style="display:none">Link</a>
	</div>

<input disabled aria-hidden="true" />

<div
		id="sampleModal"
		role="dialog"
		aria-label="Sample Modal"
		aria-modal="true"
		style="border: solid black 1px; padding: 1rem;"
	>
		<label>First and last name <input id="dialogFirst"/></label><br />
		<button id="closeButton">Close button</button>
	</div>
	<div aria-hidden="true">
		<a href="#" id="sentinelAfter" style="position:absolute; top:-999em"
			>Upon receiving focus, this focus sentinel should wrap focus to the top of the modal</a
		>
	</div>
	<script>
		document.getElementById('sentinelAfter').addEventListener('focus', () => {
			document.getElementById('dialogFirst').focus()
		})
		document.getElementById('closeButton').addEventListener('click', () => {
			document.getElementById('sampleModal').style.display = 'none'
		})
	</script>

<div aria-hidden="true">
		<button tabindex="-1">Some button</button>
	</div>

<a href="#">
		<svg width="16" height="16" aria-hidden="true">
			<circle cx="8" cy="11" r="4" stroke="black" stroke-width="2" fill="transparent" />
		</svg>
		Hello ACT
	</a>

<div aria-hidden="true">
		<a href="/" style="position:absolute; top:-999em">Link</a>
	</div>

<div aria-hidden="true">
		<input aria-disabled="true" />
	</div>

<div aria-hidden="true">
		<div aria-hidden="false">
			<button>Some button</button>
		</div>
	</div>

<p tabindex="0" aria-hidden="true">Some text</p>

<details aria-hidden="true">
		<summary>Some button</summary>
		<p>Some details</p>
	</details>

<div
		id="sampleModal"
		role="dialog"
		aria-label="Sample Modal"
		aria-modal="true"
		style="border: solid black 1px; padding: 1rem;"
	>
		<label>First and last name <input id="dialogFirst"/></label><br />
		<button id="closeButton">Close button</button>
	</div>
	<div aria-hidden="true">
		<a href="#" id="sentinelAfter" style="position:absolute; top:-999em"
			>Upon receiving focus, this focus sentinel should wrap focus to the top of the modal</a
		>
	</div>
	<script>
		document.getElementById('closeButton').addEventListener('click', () => {
			document.getElementById('sampleModal').style.display = 'none'
		})
	</script>

<button tabindex="-1" aria-hidden>Some button</button>

<p aria-hidden="false">Some text</p>

<div aria-hidden="yes">
		<p>Some text</p>
	</div>

<p>How many circles are there?</p>
	<svg xmlns="http://www.w3.org/2000/svg" role="img" width="100" height="100">
		<title>1 circle</title>
		<circle cx="50" cy="50" r="40" fill="yellow"></circle>
	</svg>

<p>How many circles are there?</p>
	<svg xmlns="https://www.w3.org/2000/svg">
		<circle
			role="graphics-symbol"
			cx="50"
			cy="50"
			r="40"
			stroke="green"
			stroke-width="4"
			fill="yellow"
			aria-label="1 circle"
		></circle>
	</svg>

<p>How many circles are there?</p>
	<svg xmlns="http://www.w3.org/2000/svg" role="graphics-document" width="100" height="100">
		<title>1 circle</title>
		<circle cx="50" cy="50" r="40" fill="yellow"></circle>
	</svg>

<p>How many circles are there?</p>
	<svg xmlns="http://www.w3.org/2000/svg" role="img">
		<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
	</svg>

<p>How many circles are there?</p>
	<svg xmlns="http://www.w3.org/2000/svg" role="img">
		<title></title>
		<circle cx="50" cy="50" r="40" fill="yellow"></circle>
	</svg>

<p>How many circles are there?</p>
	<svg xmlns="http://www.w3.org/2000/svg">
		<circle role="graphics-symbol" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
	</svg>

<p>How many circles are there?</p>
	<svg xmlns="http://www.w3.org/2000/svg" role="img" width="100" height="100">
		<circle cx="50" cy="50" r="40" fill="yellow"></circle>
		<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
			1 circle
		</text>
	</svg>

<svg xmlns="http://www.w3.org/2000/svg">
		<circle cx="50" cy="50" r="40" fill="yellow"></circle>
	</svg>

<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
		<circle cx="50" cy="50" r="40" fill="yellow"></circle>
	</svg>

<svg xmlns="http://www.w3.org/2000/svg">
		<circle role="graphics-object" cx="50" cy="50" r="40" fill="yellow"></circle>
	</svg>

<button>My button</button>

<input type="submit" value="Submit" />

<button aria-label="My button"></button>

<span role="button" aria-label="My button"></span>

<button disabled>Delete</button>

<button class="notInPage">Save</button>

<input type="reset" />

<button></button>

<button type="button" value="read more"></button>

<span role="button"></span>

<button class="notInPage" value="delete"></button>

<button role="none"></button>

<input type="image" value="download" alt="Download" />

<button style="display: none;"></button>

<button role="link">take me somewhere</button>

<div>Press Here</div>

<button role="none" disabled></button>

<table>
		<thead>
			<tr>
				<th id="header1">Projects</th>
				<th id="header2">Objective</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td headers="header1">15%</td>
				<td headers="header2">10%</td>
			</tr>
		</tbody>
	</table>

<table>
		<thead>
			<tr>
				<th id="header1">Projects</th>
				<th id="header2">Exams</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td colspan="2" headers="header1 header2">15%</td>
			</tr>
		</tbody>
	</table>

<table>
		<thead>
			<tr>
				<td role="columnheader" id="header1">Projects</td>
				<td role="columnheader" id="header2">Objective</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td headers="header1">15%</td>
				<td headers="header2">10%</td>
			</tr>
		</tbody>
	</table>

<table>
		<tr>
			<th colspan="2" id="header1">Projects</th>
			<th colspan="2" id="header2">Exams</th>
		</tr>
		<tr>
			<th id="e1" headers="header1">1</th>
			<th id="e2" headers="header1">2</th>
			<th id="p1" headers="header2">1</th>
			<th id="p2" headers="header2">2</th>
		</tr>
		<tr>
			<td colspan="2" headers="header1 e1 e2">15%</td>
			<td headers="header2 p1">15%</td>
			<td headers="header2 p2">45%</td>
		</tr>
	</table>

<table>
		<tbody>
			<tr>
				<th role="rowheader" id="headerAge">Age</th>
				<td headers="headerAge">65</td>
			</tr>
			<tr>
				<th role="rowheader" id="headerObjective">Objective</th>
				<td headers="headerObjective">40%</td>
			</tr>
		</tbody>
	</table>

<table>
		<tr>
			<th id="name" colspan="2">Name</th>
		</tr>
		<tr>
			<th headers="name">Firstname</th>
			<th headers="name">Lastname</th>
		</tr>
	</table>

<table>
		<tr>
			<th id="projects1" scope="row">Projects</th>
			<th id="progress1" scope="row">Progress</th>
		</tr>
		<tr>
			<td headers="projects1">My Project</td>
			<td headers="progress1">15%</td>
		</tr>
	</table>

<table>
		<tr>
			<td></td>
			<th id="projects2">Projects</th>
		</tr>
		<tr>
			<td headers="projects2">15%</td>
			<td></td>
		</tr>
	</table>

<table>
		<tr>
			<th id="headerOfColumn1">Projects</th>
			<th id="headerOfColumn2">Objective</th>
		</tr>
		<tr>
			<td headers="headOfColumn1">15%</td>
			<td headers="headOfColumn2">10%</td>
		</tr>
	</table>

<table>
		<tr>
			<th id="headOfColumn1">Projects</th>
			<th id="headOfColumn2">Objective</th>
		</tr>
	</table>
	
	<table>
		<tr>
			<td headers="headOfColumn1">15%</td>
			<td headers="headOfColumn2">10%</td>
		</tr>
	</table>

<table>
		<tr>
			<th>Event Type</th>
		</tr>
		<tr>
			<td id="headerBday" headers="headerBday">
				Birthday
			</td>
		</tr>
	</table>

<table>
		<tr>
			<td>
				<span id="headerProject">Projects</span>
			</td>
			<td>
				<span id="headerObjective">Objective</span>
			</td>
		</tr>
		<tr>
			<td headers="headerProject">
				15%
			</td>
			<td headers="headerObjective">
				10%
			</td>
		</tr>
	</table>

<table>
		<tr>
			<th scope="col">Projects</th>
			<th scope="col">Exams</th>
		</tr>
		<tr>
			<td>15%</td>
			<td>45%</td>
		</tr>
	</table>

<table role="presentation">
		<tr>
			<td id="header1">Project Status</td>
			<td id="header2">Objective</td>
		</tr>
		<tr>
			<td headers="header1">15%</td>
			<td headers="header2">10%</td>
		</tr>
	</table>

<!DOCTYPE html>
<html>
	<style>
		.notInPage {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<table class="notInPage">
		<tr>
			<th id="header1">Project Status</th>
			<th id="header2">Objective</th>
		</tr>
		<tr>
			<td headers="header1">15%</td>
			<td headers="header2">10%</td>
		</tr>
	</table>
</html>

<div role="table">
		<div role="row">
			<div role="columnheader" id="header1">Projects</div>
			<div role="columnheader" id="header2">Exams</div>
		</div>
		<div role="row">
			<div role="cell" headers="header2">15%</div>
			<div role="cell" headers="header1">15%</div>
		</div>
	</div>

<table style="display:none;">
		<tr>
			<td id="header1">Project Status</td>
			<td id="header2">Objective</td>
		</tr>
		<tr>
			<td headers="header1">15%</td>
			<td headers="header2">10%</td>
		</tr>
	</table>

<div role="table" aria-label="Grades">
		<div role="row">
			<div role="columnheader" id="header1">Projects</div>
			<div role="columnheader" id="header2">Exams</div>
		</div>
		<div role="row">
			<div role="cell" headers="header2">15%</div>
			<div role="cell" headers="header1">15%</div>
		</div>
	</div>

<table role="heading" aria-level="1">
		<td id="self" headers="self">World</td>
	</table>

<p style="color: #333; background: #FFF;">
		Some text in a human language
	</p>

<p style="color: #333; background: linear-gradient(to right, #FFF, #00F); width: 500px;">
		Some text in a human language
	</p>

<style>
		p {
			color: #ccc;
			height: 50px;
			padding-top: 15px;
			background: #000 no-repeat -20px -20px url('/WAI/content-assets/wcag-act-rules/test-assets/contrast/black-hole.jpeg');
			text-shadow: 0px 0px 2px black;
		}
	</style>
	<p>Black hole sun</p>

<p style="color: #000; background: #737373; text-shadow: white 0 0 3px">
		Some text in a human language
	</p>

<p style="color: #000; font-size:18pt; background: #666;">
		Some text in a human language
	</p>

<p style="color: #000; font-size:14pt; font-weight:700; background: #666;">
		Some text in English
	</p>

<p style="color: #000; background: #666;">
		----=====++++++++___________***********%%%%%%%%%%%±±±±@@@@@@@@
	</p>

<p>Some text in a human language</p>

<p style="color: #CCC; background: #fff;" id="p"></p>
	<script>
		const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
		shadowRoot.innerHTML = '<span style="color: #333;">Some text in English</span>'
	</script>

<a href="https://w3c.org/">W3C</a>

<div role="button">My button!</div>

<p style="color: #AAA; background: white;">
		Some text in English
	</p>

<p style="color: #AAA; background: linear-gradient(to right, #FFF, #00F); width: 300px">
		Some text in English
	</p>

<p
		style="color: #555; height:50px; padding-top:20px; background: black no-repeat -20px -20px url('/WAI/content-assets/wcag-act-rules/test-assets/contrast/black-hole.jpeg');"
	>
		Black hole sun
	</p>

<p style="color: rgba(0,0,0,.3); background: #FFF">
		Some text in English
	</p>

<div style="background: #FFF">
		<p style="color: #000; opacity: .3">
			Some text in English
		</p>
	</div>

<p style="color: #aaa; background: #fff;" id="p"></p>
	<script>
		const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
		shadowRoot.textContent = 'Some text in English'
	</script>

<style>
		#backgroundSplit {
			color: rgba(90, 90, 90, 0.8);
			background-position: top 0 left 0;
			background-image: linear-gradient(90deg, transparent, transparent 3.3em, black 3.3em, black 6em);
			padding: 0 1em;
		}
	</style>
	<span id="backgroundSplit">
		Hello world
	</span>

<p style="color: #333; background: #FFF;">
		Helvetica is a widely used sans-serif typeface developed in 1957 by Max Miedinger and Eduard Hoffmann.
	</p>
	<p style="font-family: helvetica; background: #EEE; color: #777;">
		The quick brown fox jumps over the lazy dog.
	</p>

<button style="color: #777; background: #EEE;">My button!</button>

<div role="button" style="color: #777; background: #EEE;">My button!</div>

<p style="display: none">Some invisible text in English</p>

<p style="position:absolute; top: -999em">Some invisible text in English</p>

<p style="color: white; background: white;" aria-hidden="true">Hidden text - U U D D L R L R B A S</p>

<svg>
		<text x="0" y="15">I love SVG!</text>
	</svg>

<p>
		<img src="/WAI/content-assets/wcag-act-rules/test-assets/contrast/example.png" alt="example" />
	</p>

<label style="color:#888; background: white;">
		My name
		<input type="text" disabled />
	</label>

<label id="my_pets_name" style="color:#888; background: white;">
		My pet's name
	</label>
	<div
		role="textbox"
		aria-labelledby="my_pets_name"
		aria-disabled="true"
		style="height:20px; width:100px; border:1px solid black;"
	>
		test
	</div>

<fieldset disabled style="color:#888; background: white;">
		<label>
			My name
			<input />
		</label>
	</fieldset>

<div role="group" aria-disabled="true" style="color:#888; background: white;">
		<label>
			My name
			<input />
		</label>
	</div>

<button style="color: #777; background: #EEE;" disabled>My button!</button>

<div role="button" style="color: #777; background: #EEE;" aria-disabled="true">My button!</div>

<button style="color: #666; background-color: #000" aria-label="Close">X</button>

<p
		style="background: #fff; color: #666; text-shadow: #aaa 2px 2px 4px, #aaa -2px 2px 4px, #aaa 2px -2px 4px, #aaa -2px -2px 4px;"
	>
		Some text in a human language
	</p>

<iframe srcdoc="<a href='/'>Home</a>"></iframe>

<iframe tabindex="0" srcdoc="<a href='/'>Home</a>"></iframe>

<iframe tabindex="-1" srcdoc="<a href='/'>Home</a>"></iframe>

<iframe tabindex="-1" srcdoc="<h1>Hello world</h1>"></iframe>

<iframe tabindex="-1" hidden srcdoc="<a href='/'>Home</a>"></iframe>

<iframe tabindex="-1" width="1" height="1" srcdoc="<a href='/'>Home</a>"></iframe>

<iframe tabindex="-1" srcdoc="<a href='/' tabindex='-1'>Home</a>"></iframe>

<iframe tabindex="-1" inert srcdoc="<a href='/'>Home</a>"></iframe>

<iframe id="myFrame" title="Links" srcdoc="<a href='/'>Home</a>"></iframe>
	<div>
		<button id="ppButton" onclick="openDialog()">Privacy policy details</button>
	</div>
	<dialog id="ppDialog" aria-labelledby="dialogLabel">
		<h2 id="dialogLabel">Privacy Policy</h2>
		<p>We store no data.</p>
		<button id="cancel" onclick="ppDialog.close()">Cancel</button>
	</dialog>
	<script>
		const openDialog = () => {
			ppDialog.showModal();
			myFrame.tabIndex = '-1'
		}
		ppDialog.addEventListener('close', () => myFrame.tabIndex = 0)
		window.addEventListener('DOMContentLoaded', openDialog);
	</script>

<iframe id="myFrame" title="Links" srcdoc="<a href='/'>Home</a>"></iframe>
	<div>
		<button id="ppButton" onclick="openDialog()">Privacy policy details</button>
	</div>
	<dialog id="ppDialog" aria-labelledby="dialogLabel">
		<h2 id="dialogLabel">Privacy Policy</h2>
		<p>We store no data.</p>
		<button id="cancel" onclick="ppDialog.close()">Cancel</button>
	</dialog>
	<script>
		const openDialog = () => {
			ppDialog.showModal()
			myFrame.tabIndex = '-1'
		}
		ppDialog.addEventListener('close', () => (myFrame.tabIndex = 0))
		window.addEventListener('DOMContentLoaded', openDialog)
	</script>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

<p>
			Lorem ipsum
		</p>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="0; URL='https://github.com'" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="0; https://w3.org" />
	<meta http-equiv="refresh" content="5; https://w3.org" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="72001; https://w3.org" />
</head>
</html>

<p>This page refreshes after 30 seconds.</p>

<p>This page redirects afte 30 seconds.</p>

<p>This page refreshes after 5 seconds.</p>

<p>This page redirects after exactly 20 hours.</p>

<p>This page does not refresh.</p>

<p>This page does not refresh.</p>

<p>This page does not redirect.</p>

<p>This page does not refresh.</p>

<p>This page does not refresh.</p>

<p>This page does not refresh.</p>

<p>This page does not redirect.</p>

<p>This page does not redirect.</p>

<!DOCTYPE html>
<html lang="FR"></html>

<!DOCTYPE html>
<html lang="en-US-GB"></html>

<!DOCTYPE html>
<html lang="em-US"></html>

<!DOCTYPE html>
<html lang="#1"></html>

<p lang="en">I love ACT rules!</p>

<p lang="lb">Lëtzebuerg ass e Land an Europa.</p>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="0; URL='https://w3.org'" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="0; https://w3.org" />
	<meta http-equiv="refresh" content="30; https://w3.org" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="30" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="72001; URL='https://w3.org'" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="0: https://w3.org" />
	<meta http-equiv="refresh" content="72001; https://w3.org" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="72001" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="0: http://example.com" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="-00.12 foo" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="; 72001" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="+72001; http://w3.org" />
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="refresh" content="foo; URL='https://w3.org'" />
</head>
</html>

<a href="https://www.w3.org/WAI"> Web Accessibility Initiative (WAI) </a>

<div role="link" onclick="openLink(event)" onkeyup="openLink(event)" tabindex="0">
		Web Accessibility Initiative (WAI)
	</div>
	<script>
		function openLink(event) {
			if (event.type === 'click' || ['Enter', ' '].includes(event.key)) {
				window.location.href = 'https://www.w3.org/WAI/'
			}
		}
	</script>

<button role="link" onclick="window.location.href='https://www.w3.org/WAI/'">Click me for WAI!</button>

<a href="https://www.w3.org/WAI"
		><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" aria-label="Web Accessibility Initiative"
	/></a>

<a href="https://www.w3.org/WAI" title="Web Accessibility Initiative"
		><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" alt=""
	/></a>

<a href="https://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" title="Web Accessibility Initiative"/></a>

<a href="https://www.w3.org/WAI"
		><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" alt="" />Web Accessibility Initiative (WAI)</a
	>

<a href="https://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>
	<div id="id1">Web Accessibility Initiative (WAI)</div>

<a class="offScreenLink" href="https://www.w3.org/WAI">Web Accessibility Initiative (WAI)</a>

<img src="/WAI/content-assets/wcag-act-rules/test-assets/c487ae/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
	
	<map name="planetmap">
		<area shape="rect" coords="0,0,30,100" href="sun.htm" alt="Sun" />
	</map>

<a href="http://www.w3.org/WAI"></a>

<a href="https://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" alt=""/></a>

<a href="http://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" role="presentation"/></a>

<a href="http://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" role="none"/></a>

<a href="https://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" title=""/></a>

<a href="https://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>
	<div id="id1"></div>

<a href="https://www.w3.org/WAI"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>

<a href="https://www.w3.org/WAI" style="left: -9999px; position: absolute;">
		<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png" />
	</a>

<img src="/WAI/content-assets/wcag-act-rules/test-assets/c487ae/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
	
	<map name="planetmap">
		<area shape="rect" coords="0,0,82,126" href="sun.htm" />
	</map>

<a href="https://www.w3.org/WAI" role="none"> </a>

<a href="https://www.w3.org/WAI" role="button">
		Web Accessibility Initiative (WAI)
	</a>

<a href="https://www.w3.org/WAI" style="display: none;"><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/w3c-logo.png"/></a>

<a href="https://www.w3.org/WAI" style="visibility: hidden;">Some text</a>

<a aria-hidden="true" href="https://www.w3.org/WAI">
		Web Accessibility Initiative (WAI)
	</a>

<area shape="rect" coords="0,0,82,126" />

<a />

See [<a href="https://act-rules.github.io/" role="doc-biblioref">ACT rules</a>]

See [<a href="https://act-rules.github.io/" role="doc-biblioref"
		><img src="https://github.com/act-rules/act-rules.github.io/blob/develop/test-assets/shared/act-logo.png" alt=""/></a
	>]

<iframe title="Grocery List" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<iframe aria-label="Grocery list" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<div id="frame-title-helper">Grocery List</div>
	<iframe aria-labelledby="frame-title-helper" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<iframe name="Grocery List" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<iframe src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<iframe title="" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<iframe title=" " src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"> </iframe>

<button>take me somewhere</button>

<iframe style="display:none;" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html"></iframe>

<iframe tabindex="-1" src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html" style="height: 250px"> </iframe>

<iframe src="/WAI/content-assets/wcag-act-rules/test-assets/SC4-1-2-frame-doc.html" role="none"> </iframe>

<article lang="en">
			They wandered into a strange Tiki bar on the edge of the small beach town.
		</article>

<blockquote lang="fr-CH">
			Ils ont trouvé un étrange bar Tiki aux abords de la petite ville balnéaire.
		</blockquote>

<p lang="en-US-GB">
			They wandered into a strange Tiki bar on the edge of the small beach town.
		</p>

<article lang="invalid">
			<div lang="en">
				They wandered into a strange Tiki bar on the edge of the small beach town.
			</div>
		</article>

<div lang="EN">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/fireworks.jpg" alt="Fireworks over Paris" />
		</div>

<article lang="dutch">
			Zij liepen een vreemde Tiki bar binnen, aan de rand van een dorpje aan het strand.
		</article>

<article lang="#!">
			They wandered into a strange Tiki bar on the edge of the small beach town.
		</article>

<article lang="  ">
			They wandered into a strange Tiki bar on the edge of the small beach town.
		</article>

<article lang="english">
			<p aria-hidden="true">
				They wandered into a strange Tiki bar on the edge of the small beach town.
			</p>
		</article>

<article lang="English">
			<p style="position: absolute; top: -9999px">
				They wandered into a strange Tiki bar on the edge of the small beach town.
			</p>
		</article>

<article lang="en">
			<div lang="invalid">
				They wandered into a strange Tiki bar on the edge of the small beach town.
			</div>
		</article>

<div lang="invalid">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/fireworks.jpg" alt="Fireworks over Paris" />
		</div>

<p lang="eng">I love ACT rules!</p>

<p lang="i-lux">Lëtzebuerg ass e Land an Europa.</p>

They wandered into a strange Tiki bar on the edge of the small beach town.

<article lang="">
			They wandered into a strange Tiki bar on the edge of the small beach town.
		</article>

<p lang="hidden">
			<span style="display: none;">
				They wandered into a strange Tiki bar on the edge of the small beach town.
			</span>
		</p>

<div lang="invalid">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/fireworks.jpg" alt="" />
		</div>

<div lang="invalid"></div>

<label>
		first name
		<input />
	</label>

<div>last name</div>
	<input aria-label="last name" disabled />

<label for="country">Country</label>
	<select id="country">
		<option>England</option>
		<option>Scotland</option>
		<option>Wales</option>
		<option>Northern Ireland</option>
	</select>

<div id="country">Country</div>
	<textarea aria-labelledby="country"></textarea>

<input placeholder="Your search query" /> <button type="submit">search</button>

<div>Country</div>
	<div aria-label="country" role="combobox" aria-disabled="true">England</div>

<div role="checkbox">I agree to the terms and conditions.</div>

<div>last name</div>
	<input />

<input disabled />

<input aria-label=" " />

<div id="country"></div>
	<select aria-labelledby="country">
		<option>England</option>
	</select>

<label>
		first name
		<div role="textbox"></div>
	</label>

<label for="firstname">first name</label>
	<div role="textbox" id="firstname"></div>

<div role="textbox">first name</div>

<input aria-label="firstname" style="display:none;" />

<input disabled aria-hidden="true" aria-label="firstname" />

<select role="none" disabled>
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="opel">Opel</option>
	</select>

<p id="dip">Add one or more dip:</p>
	<div role="menu" aria-labelledby="dip">
		<input type="checkbox" role="menuitemcheckbox" aria-labelledby="ketchup" /><span id="ketchup" aria-hidden="true">Ketchup</span
		><br />
		<input type="checkbox" role="menuitemcheckbox" aria-labelledby="mayonnaise" /><span id="mayonnaise" aria-hidden="true"
			>Mayonnaise</span
		>
	</div>

<p id="dip">Add one or more dip:</p>
	<div role="menu" aria-labelledby="dip">
		<input type="checkbox" role="menuitemcheckbox" /><span aria-hidden="true">Ketchup</span><br />
		<input type="checkbox" role="menuitemcheckbox" /><span aria-hidden="true">Mayonnaise</span>
	</div>

<p id="dip">Add one or more dip:</p>
	<div role="menu" aria-labelledby="dip">
		<input type="checkbox" role="menuitemcheckbox" aria-labelledby="ketchup" /><span id="ketchup" aria-hidden="true"
			>Ketchup</span
		><br />
		<input type="checkbox" role="menuitemcheckbox" aria-labelledby="mayonnaise" /><span id="mayonnaise" aria-hidden="true"
			>Mayonnaise</span
		>
	</div>

<label>
		Favorite color
		<input type="color" />
	</label>

<label>Date of birth</label> <input type="date" />

<h1>ACT rules</h1>

<div role="heading" aria-level="1">ACT rules</div>

<span id="h-name" hidden>ACT rules</span>
	<h1 aria-labelledby="h-name">Learn about ACT rules</h1>

<h1><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/act-logo.png" alt="ACT rules" /></h1>

<h1 style="position: absolute; top: -9999px">ACT rules</h1>

<h1><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/act-logo.png" alt="" /></h1>

<h1 aria-label=""><span aria-hidden="true">ACT rules</span></h1>

<span id="h-name" hidden></span>
	<h1 aria-labelledby="h-name"><span aria-hidden="true">ACT rules</span></h1>

<h1><img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/act-logo.png" alt="ACT rules" role="presentation" /></h1>

<h1><br /></h1>

<span>Hello</span>
	<h1></h1>
	<span>World!</span>

<div role="heading" aria-level="1" style="border-style: solid"></div>

<h1 aria-label="" role="none"><span aria-hidden="true">ACT rules</span></h1>

<div></div>

<h1 aria-hidden="true"></h1>

<div role="menu">
		<button role="menuitem">New file</button>
	</div>

<div role="menu">
		<button role="menuitem" aria-label="New file">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/file.svg" alt="" />
		</button>
	</div>

<div role="menu">
		<button role="menuitem" aria-labelledby="newfile">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/file.svg" alt="" />
			<span id="newfile" hidden>New file</span>
		</button>
	</div>

<div role="menu">
		<button role="menuitem" title="New file">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/file.svg" alt="" />
		</button>
	</div>

<div role="menu">
		<button role="menuitem">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/file.svg" alt="" />
		</button>
	</div>

<!DOCTYPE html>
<html lang="en">
	<style>
		.offscreen {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<div role="menu" class="offscreen">
		<button role="menuitem">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/file.svg" alt="" />
		</button>
	</div>
</html>

<menu>
		<li>
			<a href="#">New file</a>
		</li>
	</menu>

<div role="menu" hidden>
		<button role="menuitem">
			<img src="/WAI/content-assets/wcag-act-rules/test-assets/shared/file.svg" alt="" />
		</button>
	</div>