<a href="https://www.w3schools.com/html5" accesskey="h">HTML5</a>
<br>
<a href="https://www.w3schools.com/css3" accesskey="h">CSS3</a>
<map name="primary">
<area shape="circle" coords="75,75,75" href="left.html">
<area shape="circle" coords="275,75,75" href="right.html">
</map>
<div role="alert" aria-activedescendant="selected_option">alert role</div>
<div role="link" aria-selected="true">link role</div>
<button role="blablabla"></button>
<button role="doc-backlink"></button>
<span style="color: #800000;">NOT IMPLEMENTED</span>
<div role="checkbox">There is no required 'aria-checked' attribute for element with checkbox role</div>
<div role="list">Element with list role attribute should contain element with listitem role</div>
<div role="listitem">Elements with role listitem should be contained in, or owned by, an element with the role list or group.</div>
<div role="composite">composite is abstract role used for the ontology. This role shouldn't be used in content</div>
<div aria-hidden="rtue">aria-hidden attribute value should be only true, false or undefined</div>
<div aria-my-property="true">aria-my-property is not valid aria property</div>
<audio controls="" src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3">
<track kind>
</audio>
<input type="hidden" autocomplete="on">
<input type="password" autocomplete="name">
<input type="url" autocomplete="new-password">
<input autocomplete="street-address">
<input type="date" autocomplete="cc-exp">
<input type="tel" autocomplete="cc-exp-month">
<input type="password" autocomplete="bday">
<input type="email" autocomplete="url">
<input type="url" autocomplete="tel">
<input type="number" autocomplete="email">
<input type="search">
<input type="password">
<input type="url">
<input type="email">
<input type="tel">
<textarea autocomplete="blablabla">Textarea</textarea>
<blink>Why would somebody use this?</blink>
<button></button>
<span role="button"></span>
<input type="button">
<input type="submit">
<input type="reset">
<span style="color: #800000;">NOT IMPLEMENTED</span>
<a href="blablabla"></a>
<div>
<input type="checkbox" name="animal" value="Cat" />Cats
<br />
<input type="checkbox" name="animal" value="Dog" />Dogs
<br />
<input type="checkbox" name="animal" value="Bird" />Birds
<br />
<input type="submit" value="Submit now" />
</div>
<div style="height: 100px; background: aliceblue; color: #eaf2f9;">
<h2>Text with low contrast</h2>
</div>
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
</dd>
<span>Non valid <span> tag inside <dl> tag</span>
</dl>
<dl>
<dd>
Non valid: <dt> tag should precede <dd> tag
</dd>
<dt>Firefox</dt>
</dl>
<dt></dt>
<dd></dd>
<dd></dd>
Empty <title> tag.
<span id="duplicate-id">Duplicate id item</span>
<span id="duplicate-id">Duplicate id item 2</span>
<h2></h2>
<iframe title="non-unique-title" src="http://example.com"></iframe>
<iframe title="non-unique-title" src="http://example.com"></iframe>
<iframe src="http://example.com"></iframe>
<h1>First heading level</h1>
<h3>Third heading level</h3>
<span style="display: 'none';">hidden content</span>
<span style="visibility: 'hidden';">hidden content</span>
<a href="#">Link with href attribute equal to hash symbol ('#')</a>
Empty lang attributes of <html> tag.
<span style="color: #800000;">NOT IMPLEMENTED</span>
<img src="http://placehold.it/350x150">
<div role="img" style="background-image: url(http://placehold.it/350x150); width: 350px; height: 150px"></div>
<div id="imageRedundantAltAriaLabel">TEXT</div>
<button>
<img alt="Button">
</button>
<button>
<img alt="Button"> Button
</button>
<button>
<input type="image" alt="Button">
</button>
<button>
<input type="image" alt="Button"> Button
</button>
<button title="text">Text</button>
<a href="#" aria-label="text" title="Text"></a>
<button aria-labelledby="imageRedundantAltAriaLabel" title="Text"></button>
<label for="imageRedundantAltLabelViolations">text</label>
<a href="#" id="imageRedundantAltLabelViolations" title="Text"></a>
<label>
text
<button title="Text"></button>
</label>
<input id="image" type="image" width="100" height="30" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
<div id="labelInNameDiv">Accessible name</div>
<label for="labelInNameInput1">Visible Label</label>
<input id="labelInNameInput1" aria-labelledby="labelInNameDiv">
<label for="labelInNameInput2">Visible Label</label>
<input id="ariaLabelInput2" aria-label="accessibleName">
<label for="labelInNameInput3">Visible Label</label>
<input id="labelInNameInput3" type="button" title="accessibleName">
<label>Visible Label
<input aria-labelledby="labelInNameDiv">
</label>
<label>Visible Label
<input aria-label="accessibleName">
</label>
<label>Visible Label
<input type="button" title="accessibleName">
</label>
<label for="labelInNameAnchor1">Visible Label</label>
<a id="labelInNameAnchor1" aria-labelledby="labelInNameDiv" href="#">Anchor</a>
<label for="labelInNameAnchor2">Visible Label</label>
<a id="labelInNameAnchor2" aria-label="accessibleName">Anchor</a>
<label for="labelInNameAnchor3">Visible Label</label>
<a id="labelInNameAnchor3">Anchor</a>
<label>Visible Label
<a aria-labelledby="labelInNameDiv" href="#">Anchor</a>
</label>
<label>Visible Label
<a aria-label="accessibleName">Anchor</a>
</label>
<label>Visible Label
<a>Anchor</a>
</label>
<a aria-labelledby="labelInNameDiv" href="#">Anchor</a>
<a aria-label="accessibleName">Anchor</a>
<form action="#">
<div id="labelTitleOnlyLabel">Title</div>
<div id="describedLabelTitleOnlyLabel">anotherTitle</div>
<input title="title"
aria-describedby="labelTitleOnlyLabel"
aria-label="anotherTitle">Don't have both attribute "title" and "aria-describedby" on HTMLInputElement
<input title="title"
aria-describedby="labelTitleOnlyLabel"
aria-label="Title">
<textarea aria-labelledby="labelTitleOnlyLabel"
aria-describedby="labelTitleOnlyLabel"></textarea>
<input aria-describedby="labelTitleOnlyLabel"
aria-label="Title">
<label>title
<select aria-describedby="labelTitleOnlyLabel"></select>
</label>
<textarea title="title"
aria-labelledby="labelTitleOnlyLabel"></textarea>
<input title="title"
aria-label="Title">
<label>title
<input title="title">
</label>
</form>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<br>
<input type="radio" name="gender" id="female" value="female">
<br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other">
</form>
| Left block | Right block |
|---|
<table role="presentation">
<tr>
<th>Left block</th>
<th>Right block</th>
</tr>
</table>
<table role="presentation">
<caption>presentation table</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table role="presentation" summary="presentation table">
<tr>
<td></td>
<td></td>
</tr>
</table>
<p>
<span style="color: black">Text</span>
<a style="text-decoration: none; color: black" href="#">Link with contract ratio to surrounding text below 3:1</a>
<span style="color: black">Text</span>
</p>
<ul>
<li>List element</li>
<div>Not list element</div>
</ul>
<li>List item wrapped outside of <ul> or <ol> parent elements</li>
<marquee><marquee> elements shouldn't be used</marquee>
<span style="color: #800000;">NOT IMPLEMENTED (should be inside the <head> element)</span>
<span style="color: #800000;">NOT IMPLEMENTED (should be inside the <head> element)</span>
<span style="color: #800000;">NOT IMPLEMENTED (should be inside the <head> element)</span>
<a href="#" style="border: 1px solid red; outline: 1px solid #F2F0E6">Anchor</a>
<a href="#" style="border: 1px solid #F2F0E6; outline: 1px solid #E0FFFF">Anchor</a>
<a href="#" style="border: 1px solid #F2F0E6">Anchor</a>
<a href="#" style="outline: 1px solid #E0FFFF">Anchor</a>
<button style="border: 1px solid red; outline: 1px solid #F2F0E6">Button</button>
<button style="border: 1px solid #F2F0E6; outline: 1px solid #E0FFFF">Button</button>
<button style="border: 1px solid #F2F0E6">Button</button>
<button style="outline: 1px solid #E0FFFF">Button</button>
<input type="text" style="border: 1px solid red; outline: 1px solid #F2F0E6"> Input
<input type="text" style="border: 1px solid #F2F0E6; outline: 1px solid #E0FFFF"> Input
<input type="text" style="border: 1px solid #F2F0E6"> Input
<input type="text" style="outline: 1px solid #E0FFFF"> Input
<textarea style="border: 1px solid red; outline: 1px solid #F2F0E6">TEXTAREA</textarea>
<textarea style="border: 1px solid #F2F0E6; outline: 1px solid #E0FFFF">TEXTAREA</textarea>
<textarea style="border: 1px solid #F2F0E6">TEXTAREA</textarea>
<textarea style="outline: 1px solid #E0FFFF">TEXTAREA</textarea>
<select style="border: 1px solid red; outline: 1px solid #F2F0E6"><option>option</option></select>
<select style="border: 1px solid #F2F0E6; outline: 1px solid #E0FFFF"><option>option</option></select>
<select style="border: 1px solid #F2F0E6"><option>option</option></select>
<select style="outline: 1px solid #E0FFFF"><option>option</option></select>
<object width="100" height="100" style="background: green"></object>
<input type="radio" id="male" name="sex">
<label for="contactChoice2">Male</label>
<input type="radio" id="female" name="sex">
<label for="contactChoice2">Female</label>
<div style="width: 500px; overflow: scroll">
<div style="width: 1000px">
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text Some text Some text
</div>
</div>
<span>Not all content on this page contained within a landmark region</span>
| scope attribute in html5 should be used only on <th> element | 2 |
<table>
<tr>
<td scope="row">scope attribute in html5 should be used only on <th> element</td>
<td>2</td>
</tr>
</table>
<img ismap src="picture.jpeg">
<div class="fakeBodyElm">
<header>Header</header>
<nav>Navigation</nav>
<main>Main</main>
</div>
<div class="fakeBodyElm">
<header>Header</header>
<a>SkipLink</a>
<nav>Navigation</nav>
<main>Main</main>
</div>
<div class="fakeBodyElm">
<header>Header</header>
<a href="http://example.com/">SkipLink</a>
<nav>Navigation</nav>
<main>Main</main>
</div>
<div class="fakeBodyElm">
<header>Header</header>
<a href="#">SkipLink</a>
<nav>Navigation</nav>
<main>Main</main>
</div>
<div class="fakeBodyElm">
<header>Header</header>
<a href="#lostContent">SkipLink</a>
<nav>Navigation</nav>
<main>Main</main>
</div>
<input type="text" tabindex=3>
| Date | Event | Venue |
|---|---|---|
| 12 Feb | Waltz with Strauss | Main Hall |
| Date | Event | Venue |
|---|
<table summary="Concerts">
<caption>Concerts</caption>
<tr>
<th>Date</th>
<th>Event</th>
<th>Venue</th>
</tr>
<tr>
<td>12 Feb</td>
<td>Waltz with Strauss</td>
<td>Main Hall</td>
</tr>
</table>
<figure>
<figcaption>Concerts</figcaption>
<table summary="Concerts">
<tr>
<th>Date</th>
<th>Event</th>
<th>Venue</th>
</tr>
</table>
</figure>
| colspan attribute instead of caption | |
| Cell 2 | Cell 3 |
<table width="200" border="1" align="center" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#FBF0DB">colspan attribute instead of caption</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
<button type="button" style="width: 40px;">Button</button>
<input type="button" style="width: 40px;">
<div><a href="blablalbla">Anchor</a></div>
<div><img src="blablalbla" style="width: 40px;"></div>
| Header of 1st row | Header of 2nd row | Header of 3nd row | |
|---|---|---|---|
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 |
<table width="200" border="1" align="center" cellpadding="4" cellspacing="0">
<tr>
<th>Header of 1st row</th>
<th>Header of 2nd row</th>
<th>Header of 3nd row</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
| hello |
|---|
| goodbye |
<table>
<tr>
<th>
<span id="hi">hello</span>
</th>
</tr>
<tr>
<td headers="hi">goodbye</td>
</tr>
</table>
| Text |
|---|
| Text2 |
<table>
<tr>
<th>Text</th>
</tr>
<tr>
<th>Text2</th>
</tr>
</table>
<span lang="nonvalid">nonvalid lang attribute</span>
<video width="320" height="240" controls>
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<track kind="descriptions">
</video>
<video width="320" height="240" controls>
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<track kind="captions">
</video>