<none>

"Richards, Jan" <[email protected]> Mon, 14 Apr 2014 16:48:02 +0000
Newsgroups gmane.org.w3c.accessibility.tools
Message-ID <0B1EB1C972BCB740B522ACBCD5F48DEB013A954FF9@ocadmail-maildb.ocad.ca> 
Updated test files (inaccessible, accessible) for HTML attached.

Cheers,
Jan



(MR) JAN RICHARDS
PROJECT MANAGER
INCLUSIVE DESIGN RESEARCH CENTRE (IDRC)
OCAD UNIVERSITY

T 416 977 6000 x3957
F 416 977 9844
E [email protected]
WCAG2_HTML_Problem_File.html (text/html, 7.3 KB) 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<style type="text/css">
.underscore {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
}
.dashed {
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #000;
}
:focus {outline: none}

</style>
</head>
<body>
<!-- From here: http://www.w3.org/WAI/GL/WCAG20/tests/ --> <font color="#666666" size="+6"><strong>Inaccessible File: Contains Numerous WCAG 2.0 Level AA Issues</strong></font>
<p class="underscore">Non-Applicable Success Criteria </p>
<p>These success criteria do no lend themselves to automatic checking and must be checked manually:</p>
<p><strong>- 1.2.1 Audio-only and Video-only (Prerecorded)</strong> - Level A <br />
  - 
<strong>1.2.3 Audio Description or Media Alternative (Prerecorded)</strong> - Level A <br /> 
-
<strong>1.2.4 Captions (Live)</strong> - Level AA<br />
-
<strong>1.3.3 Sensory Characteristics</strong> - Level A<br />
- 
<strong>1.4.1 Use of Color</strong> - Level A<br />
<strong>- 1.4.2 Audio Control</strong> - Level A<br />
- 
<strong>1.4.4 Resize text</strong> - Level AA<br />
- 
<strong>2.1.2 No Keyboard Trap</strong> - Level A<br />
- 
<strong>2.2.1 Timing Adjustable</strong> - Level A<br />
- 
<strong>2.3.1 Three Flashes or Below Threshold</strong> - Level A<br />
- 
<strong>2.4.5 Multiple Ways</strong> - Level AA<br />
- 
<strong>3.3.1 Error Identification</strong> - Level A<br />
- <strong>3.3.3 Error Suggestion</strong> - Level AA<br />
- 
<strong>3.3.4 Error Prevention (Legal, Financial, Data)</strong> - Level AA<br />
- 
<strong>4.1.2 Name, Role, Value</strong> - Level A</p>
<p class="underscore">Whole Page Issues</p>
<p>These success criteria are met by the page as a whole, rather than a specific object:</p>
<p>- Page not titled (Fails <strong>WCAG2 2.4.2 Page Titled</strong> - Level A)<br />
  - 
No bypass links (Fails <strong>WCAG2 2.4.1 Bypass Blocks</strong> - Level A)<br />
- 
No headings (Fails <strong>1.3.1 Info and Relationships</strong> - Level A;  <strong>2.4.6 Headings and Labels</strong> - Level AA)<br />
- 
Focus indicators have been turned off (<strong>2.4.7 Focus Visible</strong> - Level AA)</p>
<p class="underscore">Image</p>
<p><img src="rex.jpg" /></p>
<p>- Image lacks text alternative (<strong>WCAG2 1.1.1 Non-text Content</strong> - Level A)</p>
<p><a href="test.html"><img src="rex.jpg" /></a></p>
<p>- Linked image lacks text alternative (<strong>WCAG2 1.1.1 Non-text Content</strong> - Level A)</p>
<p><img style="border: 1px black solid;" src="spacer.png" width="16" height="14" /></p>
<p>- Spacer image lacks alt=&quot;&quot; (<strong>WCAG2 1.1.1 Non-text Content</strong> - Level A)</p>
<p class="underscore">Video
<p>
  <video>
    <source type="video/mp4" src="video_file" />
  </video>
</p>
<p>- Lacks captions (<strong>1.2.2 Captions (Prerecorded)</strong> - Level A)<br />
  - Lacks audio descriptions (<strong>1.2.5 Audio Description (Prerecorded)</strong> - Level AA)</p>
<p class="underscore">Form</p>
<form>
<table width="200" border="0">
  <tr>
    <td>First name:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="text" name="firstname" tabindex="3"></td>
    <td><input type="text" name="lastname" tabindex="1"></td>
  </tr>
</table>

<input type="checkbox" name="pet" value="cat" tabindex="2"/> I have a cat
</form>
<p>- Lacks form labels (<strong>1.3.1 Info and Relationships</strong> - Level A;  <strong>3.3.2 Labels or Instructions</strong> - Level A)<br />
  - 
Lacks meaningful sequence due to layout table (<strong>1.3.2 Meaningful Sequence</strong> - Level A)<br />
  - 
  Last name receives focus first followed by &quot;I have a cat&quot; and then first name, a confusing order (<strong>2.4.3 Focus Order</strong> - Level A)</p>

<p class="underscore">Headings</p>
  <h2></h2>
<p>- Empty heading.</p>

<p class="underscore">Table</p>
<table border="1">
  <tr>
    <td></td
    ><td><strong>Name</strong></td>
    <td><strong>Phone Number</strong></td>
    <td><strong>City</strong></td>
  </tr>
  <tr>
    <td rowspan="2"><strong>Members</strong></td>
    <td >Joel Garner</td>
    <td>412-212-5421</td>
    <td>Pittsburgh</td>
  </tr>
  <tr>
    <td>Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>Baltimore</td>
  </tr>
  <tr>
    <td><strong>Non-Members</strong></td>
    <td>Gordon Greenidge</td>
    <td>281-564-6720</td>
    <td>Houston</td>
  </tr>
</table>
<p>- Lacks caption, header and scope markup (<strong>1.3.1 Info and Relationships</strong> - Level A)<br />
</p>
<p class="underscore">Sensory Characteristic Instructions</p>
<p>To learn more, look at the gray text below.</p>
<p>- Instructions rely on sensory characteristics (<strong>1.3.3 Sensory Characteristics</strong> - Level A)</p>

<p class="underscore">Contrast</p>
<p style="color:#ccc; background-color:#aaa">This text does not have sufficient contrast.</p>
<p>- Has insufficient contrast ratio (<strong>1.4.3 Contrast (Minimum)</strong> - Level AA)</p>
<p class="underscore">Image of Text</p>
<p><img src="image-of-text.png" width="111" height="30" alt="image of text"/></p>
<p>- Image of text that could have been styled using CSS (<strong>1.4.5 Images of Text</strong> - level AA)</p>
<p class="underscore">Mouse-Only Link</p>
<p onmousedown="myFunction();">[Click to display alert box]</p>

<script>
function myFunction()
{
alert("Hello\nHow are you?");
}
</script>
<p>- This functionality is only operable with the keyboard (<strong>2.1.1 Keyboard</strong> - Level A)</p>

<p class="underscore">Scrolling text</p>
<p>
  <marquee>
  This text scrolls
</marquee>
</p>
<p>-  The text scrolling cannot be stopped (<strong>2.2.2 Pause, Stop, Hide</strong>- Level A)

<p>
  <blink>
  This text blinks
</blink>
</p>
<p>- The blinking text cannot be stopped (<strong>2.2.2 Pause, Stop, Hide</strong>- Level A)
  
</p>
<p class="underscore">Link Out of Context</p>
<p>Freezing, or solidification, is a phase transition in which a liquid turns into a solid when its temperature is lowered below its freezing point.</p>

<p><a href="http://en.wikipedia.org/wiki/Freezing_point" tabindex="4">Read More...</a></p>
<p>- Link context is in a different paragraph (<strong>2.4.4 Link Purpose (In Context)</strong> - Level A)</p>

<p class="underscore">Second Language</p>
<p>Bonjour comment ça va?</p>
<p>- Language change is not marked (<strong>3.1.2 Language of Parts</strong> - Level AA)</p>




<p class="underscore">On-Focus:</p>
<p>
  <input onfocus="myFunction();" type="text" name="test1" id="test1" />
</p>
<p>- Change of context on focus (<strong>3.2.1 On Focus</strong> - Level A)</p>
<p class="underscore">On-Input:</p>
<p>
  <input onkeydown="myFunction();" type="text" name="test2" id="test2"  />
</p>
<p>- Change of context on keyboard input (<strong>3.2.2 On Input</strong> - Level A)</p>
<p class="underscore">Parsing Error:</p>
<p><a name="skip" id="skip"></a><a name="skip" id="skip"></a>Duplicate IDs</p>
<ul>
  <li><strong>4.1.1 Parsing</strong> - (Level A)</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
WCAG2_HTML_Problem_File_Fixed.html (text/html, 6.7 KB) 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h2 {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
}
h3 {
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #000;
}
.underscore {	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
}
</style>
<title>ATAG 2.0 Test File - No accessibility issues</title>
</head>
<body>
<p>
  <!-- From here: http://www.w3.org/WAI/GL/WCAG20/tests/ -->
  <a href="#skip">Skip</a>
</p>
<h1>Accessible File: Many WCAG 2.0 Level AA  Issues Addressed</h1>
<h2>Non-Applicable Success Criteria</h2>
<p>These success criteria do no lend themselves to automatic checking and must be checked manually:</p>
<ul>
  <li><strong>1.2.1 Audio-only and Video-only (Prerecorded)</strong> - Level A</li>
  <li><strong>1.2.3 Audio Description or Media Alternative (Prerecorded)</strong> - Level A</li>
  <li><strong>1.2.4 Captions (Live)</strong> - Level AA</li>
  <li><strong>1.3.3 Sensory Characteristics</strong> - Level A</li>
  <li><strong>1.4.1 Use of Color</strong> - Level A</li>
  <li><strong>1.4.2 Audio Control</strong> - Level A</li>
  <li><strong>2.2.1 Timing Adjustable</strong> - Level A</li>
  <li><strong>2.2.2 Pause, Stop, Hide</strong>- Level A</li>
  <li><strong>2.3.1 Three Flashes or Below Threshold</strong> - Level A</li>
  <li><strong>2.4.5 Multiple Ways</strong> - Level AA</li>
  <li><strong>3.3.1 Error Identification</strong>- Level A</li>
  <li><strong>3.3.3 Error Suggestion</strong> - Level AA</li>
  <li><strong>3.3.4 Error Prevention (Legal, Financial, Data)</strong> - Level AA</li>
  <li><strong>4.1.2 Name, Role, Value</strong> - Level A</li>
</ul>
<h2><a name="skip" id="skip"></a>Whole-Page Issues</h2>
<p>These success criteria are met by the page as a whole, rather than a specific object:</p>
<ul>
<li>Page titled (<strong>2.4.2 Page Titled</strong> - Level A)</li>
<li>Bypass link (<strong>2.4.1 Bypass Blocks</strong> - Level A)</li>
<li>Headings (<strong>1.3.1 Info and Relationships</strong> - Level A; <strong>2.4.6 Headings and Labels</strong> - Level AA)</li>

<li>Parsing is correct. <strong>(4.1.1 Parsing</strong> - Level A)</li>
<li>Meaningful sequences (<strong>1.3.2 Meaningful Sequence</strong> - Level A)</li>
<li>All text is resizable (<strong>1.4.4 Resize text</strong> - Level AA)</li>
<li>No images of text (<strong>1.4.5 Images of Text</strong> - level AA)</li>
<li>All functionality is usable with the keyboard (<strong>2.1.1 Keyboard</strong> - Level A)</li>
<li>No keyboard traps (<strong>2.1.2 No Keyboard Trap</strong> - Level A)</li>
<li>Focus indicators are turned on (<strong>2.4.7 Focus Visible</strong> - AA)</li>
<li>No change of context on focus (<strong>3.2.1 On Focus</strong> - Level A)</li>
<li>No change of context on keyboard input(<strong>3.2.1 On Input</strong> - Level A)</li>
</ul>
<h2>Image</h2>
<p><img src="rex.jpg" alt="A black and brown cat named Rex."/></p>
<ul>
  <li>Has text alternative (<strong>1.1.1 Non-text Content </strong>- Level A)</li>
</ul>
<p><a href="test.html"><img src="rex.jpg" alt="More images of Rex the cat" /></a></p>
<ul>
  <li>Linked image includes text alternative (<strong>WCAG2 1.1.1 Non-text Content</strong> - Level A)</li>
</ul>
<p><img style="border: 1px black solid;" src="spacer.png" alt="" width="16" height="14" /></p>
<ul>
  <li>Spacer image includes alt=&quot;&quot; (<strong>WCAG2 1.1.1 Non-text Content</strong> - Level A)</li>
</ul>
<h2>Video</h2>
<p>
  <video>
    <source type="video/mp4" src="http://build.fluidproject.org/videoPlayer/demos/videos/Mammals/Mammals.webm" />
    <track src="http://build.fluidproject.org/videoPlayer/demos/videos/Mammals/Mammals.en.vtt" type="text/vtt" srclang="en" label="English captions" kind="captions" default></track>
    
    <track src="captions_file" label="English captions" kind="captions" srclang="en-us" default>
    <track src="descriptions_file" label="English description" kind="descriptions" srclang="en-us">
  </video>
</p>
<ul>
  <li>Has captions (<strong>1.2.2 Captions (Prerecorded)</strong> - Level A)</li>
  <li>Has audio description (<strong>1.2.5 Audio Description (Prerecorded)</strong> - Level AA)</li>
</ul>
<h2>Form</h2>
<form>
 <label for="firstname">First name:</label> 
 <input type="text" name="firstname" id="firstname" tabindex="1">
 <br />
 <label for="lastname">Last name:</label>  
 <input type="text" name="lastname" id="lastname" tabindex="2">
 <br />
 <input type="checkbox" name="pet" value="cat" id="cat" tabindex="3"/><label for="cat">I have a cat</label>
 
</form>
<ul>
  <li>Has form labels (<strong>1.3.1 Info and Relationships</strong> - Level A; <strong>3.3.2 Labels or Instructions</strong> - Level A)</li>
  <li>Meaningful sequences (<strong>1.3.2 Meaningful Sequence</strong> - Level A)</li>
  <li>Focusable items receive focus in meaningful order (<strong>2.4.3 Focus Order</strong> - Level A)</li>
</ul>
<h2>Table</h2>
 <table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone Number</th>
    <th scope="col">City</th>
  </tr><tr>
    <th rowspan="2" scope="row">Members</th>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>Baltimore</td>
  </tr><tr>
    <th scope="row">Non-Members</th>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>Houston</td>
  </tr>
</table> 

<ul>
   <li>Has caption, header and scope markup (<strong>1.3.1 Info and Relationships</strong> - Level A)</li>
</ul>
<h2>Contrast</h2>
<p style="color:white; background-color:black">This text has sufficient contrast.</p>
<ul>
  <li>Has sufficient contrast ratio (<strong>1.4.3 Contrast (Minimum)</strong> - Level AA)</li>
</ul>
<h2>Link in Context</h2>
<p>Freezing, or solidification, is a phase transition in which a liquid turns into a solid when its temperature is lowered below its freezing point.</p>
<p><a href="http://en.wikipedia.org/wiki/Freezing_point" title="Read more about freezing">Read More...</a></p>
<ul>
  <li>Link context is encoded in the link title (<strong>2.4.4 Link Purpose (In Context)</strong> - Level A)</li>
</ul>
<h2>Second Language</h2>
<p lang="fr">Bonjour comment ça va?</p>
<ul>
  <li>Language change is  marked (<strong>3.1.2 Language of Parts</strong> - Level AA)</li>
</ul>

<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>