Content sample page
Alastair Campbell <[email protected]> Thu, 17 Apr 2014 17:17:57 +0100
| Newsgroups | gmane.org.w3c.accessibility.tools |
|---|---|
| Message-ID | <D4219A0ECCAE794C9ED7DC6F5A4C0CD5A6A500A7B4@jupiter.intranet.nomensa.com> |
Hi everyone, I got a chance to put together a test page of content, attached. My memory of what was required is a little hazy, but it's essentially a page of lots of different HTML elements. These are the ones we use in practice, there maybe some more obscure elements not included. There is a bit of HTML5 included, but not a great deal. Is there anything else I should include? Or anything to change for the usage we need? -Alastair -- Nomensa - humanising technology Alastair Campbell | Director of Accessibility t. +44 (0)117 929 7333 | m. +44 (0)7970 879 653 Nomensa Email Disclaimer: http://www.nomensa.com/email-disclaimer.html Nomensa Ltd, 13 Queen Square, Bristol BS1 4NT GB 771727411, Company number: 4214477
content-example.html
(text/html, 12.2 KB)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Page Example</title>
<meta charset="utf-8">
<style type="text/css">
body {margin: 20px 10%;}
.image-left {float: left; margin-right: 10px; width: 15%;}
.image-right {float: right; margin-left: 10px;width: 15%;}
.image-centre { display: block; margin: 0 auto;width: 30%;}
table { border-collapse: collapse; border-spacing: 0;}
td, th { border: 1px #ccc solid; padding: 5px;}
figure {text-align: center;}
figcaption {font-weight: bold;}
abbr {border-bottom: 1px grey dotted;}
[role="banner"] {border-bottom: 1px #666 solid;}
[role="contentinfo"] {border-top: 1px #666 solid; margin-top: 20px; padding-top: 5px;}
</style>
</head>
<body>
<div role="banner">
<p>Website name in a header.</p>
</div> <!-- end header -->
<div role="main">
<h1>Example content page</h1>
<p>Apologies for all the lorem ipsum, but I'm not going to make all this up...</p>
<h2>Text/inline elements</h2>
<p>When you use an abbreviation such as Prof., you should use an <code>abbr</code> element for <abbr title="Professor">Prof.</abbr>, other text elements are: <strong>strong</strong>, <em>emphsis</em>.</p>
<p>There is also markup for <ins>inserted</ins> and <del>deleted</del> things.</p>
<p>Horizontal rule:</p>
<hr />
<h2>Headings (this being an H2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius turpis sed arcu mattis facilisis. Cras hendrerit <a href="#">nunc ac sapien</a> feugiat vulputate. Nam dignissim, erat et <strong>auctor ullamcorper</strong>, eros enim pretium est</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Integer tempus tempus hendrerit! Suspendisse eu mauris tortor, a volutpat nisi. Phasellus egestas velit ut libero sollicitudin ut ultrices dui rhoncus.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus tempus hendrerit! Suspendisse <strong>eu mauris</strong> tortor, a volutpat nisi. Phasellus egestas velit ut libero sollicitudin ut ultrices dui rhoncus. Phasellus vehicula rhoncus nibh, et consequat enim consequat sed. Suspendisse porta, dui vitae tristique fermentum,</p>
<h5>Heading 5</h5>
<p>Sed sit amet sodales urna. Vestibulum a ipsum vel dui consectetur lacinia. Fusce condimentum pharetra mauris, id <a href="#">tempor arcu imperdiet non</a>? Nunc sit amet felis vitae urna pellentesque tincidunt porta quis turpis. Vestibulum nulla eros, feugiat sit amet fringilla in, tincidunt pellentesque lectus.</p>
<!-- *** LISTS *** -->
<h2>Lists</h2>
<h3>Links list</h3>
<p>Including nav element:</p>
<nav>
<ul>
<li><a href="#">Location and contact details</a></li>
<li><a href="#">Opening times</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Group Exercise Swimming</a></li>
<li><a href="#">Prices and membership options</a></li>
</ul>
</nav>
<h3>Unordered (including nesting)</h3>
<!-- *** UNORDERED *** -->
<ul>
<li>List item</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit ege, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.
<ul>
<li>List item</li>
<li>List item</li>
<li>List item
<ul>
<li>List item</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
</ul>
<p>In tristique. <a href="#">Integer blandit</a>, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam</p>
<h3>Ordered</h3>
<!-- *** ORDERED *** -->
<ol>
<li>List item</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.
<ol>
<li>List item</li>
<li>List item</li>
<li>List item
<ol>
<li>List item</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
</ol>
</li>
<li>List item</li>
</ol>
<h3>Combined</h3>
<ul>
<li>List item</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.
<ol>
<li>List item</li>
<li>List item</li>
<li>List item
<ul>
<li>List item</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
</ol>
</li>
<li>List item</li>
</ul>
<!-- *** DEFINTION LISTS *** -->
<h3>Definition List</h3>
<dl>
<dt>Definition Term</dt>
<dd>Definition Description</dd>
<dt>Definition Term</dt>
<dd>Description Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</dd>
<dt>Term Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</dt>
<dd>Definition Description</dd>
<dt>Term Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</dt>
<dd>Description Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</dd>
</dl>
<!-- *** IMAGES *** -->
<h2>Images</h2>
<p><img class="image-left" src="http://alastairc.ac/images/example-icicle-branch.jpg" alt="Test image." /> <strong>Some images placed left, right and centred with classes</strong>. Integer tempus tempus hendrerit! Suspendisse <strong>eu mauris</strong> tortor, a volutpat nisi. Phasellus egestas velit ut libero sollicitudin ut ultrices dui rhoncus. Phasellus vehicula rhoncus nibh, et consequat enim consequat sed. Suspendisse porta, dui vitae tristique fermentum.</p>
<p>Duis nec arcu malesuada magna pulvinar convallis. Donec urna nulla, elementum eu semper porta; cursus at lectus! Nunc commodo, nulla vitae hendrerit scelerisque, ligula mauris pretium dui, consequat semper turpis arcu eget nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sed metus ac mi condimentum malesuada vitae quis tortor. Donec consectetur sapien et lacus volutpat fringilla. Integer neque libero, commodo t</p>
<p><img class="image-right" src="http://alastairc.ac/images/example-icicle-branch.jpg" alt="Test image." /> magna sapien <a href="#">feugiat nulla</a>; at lobortis diam sem a odio. Nunc accumsan tempor lectus, sed euismod turpis mattis vitae. Proin commodo ante sed orci accumsan adipiscing. Nam ut ante eget nibh convallis accumsan sed <strong>faucibus nulla</strong>. Cras blandit mollis leo ac pellentesque.</p>
<p>Maecenas purus ante, rhoncus nec posuere sed, suscipit ut diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis rutrum neque in nisl rhoncus ut porttitor arcu hendrerit. Ut feugiat dictum sem, in volutpat augue porta nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin neque nisl, dictum eu cursus eu, molestie quis urna. Etiam et neque risus. Vivamus elementum dictum suscipit. C</p>
<p><img class="image-centre" src="http://alastairc.ac/images/example-icicle-branch.jpg" alt="Test image." />Description Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi.</p>
<h3>Image with caption</h3>
<p>A bit of HTML5 with figure, image, and figcaption:</p>
<figure role="group">
<img class="image-centre" src="http://alastairc.ac/images/example-icicle-branch.jpg" alt="A set of branches covered in ice." />
<figcaption>It was cold last January</figcaption>
</figure>
<!-- *** QUOTATIONS *** -->
<h2>Quotations</h2>
<p>Two paragraphs within one blockquote:</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat.</p>
<p>Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat.</p>
</blockquote>
<p>A blockquote with the cite attribute defined:</p>
<blockquote cite="http://www.lipsum.com">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat.</p>
</blockquote>
<h3>Inline Quotation With Citation</h3>
<p>And <cite>Bob</cite> said <q>Lorem ipsum elit eget sed tortor</q>.</p>
<!-- *** TABLES *** -->
<h2>Table</h2>
<table>
<caption>Levels of membership</caption>
<tr>
<th></th>
<th>Gold</th>
<th>Silver</th>
<th>Blue*</th>
<th>Advantage +</th>
<th>Advantage</th>
<th>Over 65</th>
</tr>
<tr>
<th scope="row">Joining Fee</th>
<td>£36</td>
<td>£36</td>
<td>£36*</td>
<td>£18</td>
<td>£6</td>
<td>£6</td>
</tr>
</table>
</div><!-- end content -->
<div class="footer" role="contentinfo">
Footer information, e.g. © 2014.
</div><!-- end footer -->
</body>
</html>