Skip to content

Commit

Permalink
adding accessible html examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdavidmills
chrisdavidmills committed Nov 10, 2016
1 parent 509139b commit a08792e
Show file tree
Hide file tree
Showing 14 changed files with 359 additions and 5 deletions.
27 changes: 27 additions & 0 deletions accessibility/html/accessible-image.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accessible image example</title>
<style>
img {
display: block;
margin: 3em;
}
</style>
</head>
<body>

<h1>Images</h1>

<img src="dinosaur.png">

<img src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">

<img src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
title="The Mozilla red dinosaur">

</body>
</html>
0 ...owser-testing/accessibility/bad-form.html → accessibility/html/bad-form.html
View file
File renamed without changes.
0 ...wser-testing/accessibility/bad-links.html → accessibility/html/bad-links.html
View file
File renamed without changes.
22 changes: 22 additions & 0 deletions accessibility/html/bad-semantics.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bad semantics example</title>
</head>
<body>
<font size="7">My heading</font>
<br><br>
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
<br><br>
Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. Crack Jennys tea cup Sail ho killick transom trysail Chain Shot. Measured fer yer chains lateen sail Davy Jones' Locker prow wench weigh anchor. Port me hang the jib Davy Jones' Locker skysail pirate. Sail ho run a shot across the bow fluke belaying pin boom carouser. Chase guns broadside Corsair mizzen provost Admiral of the Black. Red ensign list brigantine line booty hands. Booty topgallant grapple coffer pinnace fire ship.
<br><br>
<font size="5">My subheading</font>
<br><br>
Yard Pirate Round hearties Sail ho log salmagundi. Ye scuttle smartly Jack Tar man-of-war measured fer yer chains. Shrouds sloop transom quarter wench case shot. Hempen halter Cat o'nine tails red ensign strike colors lugsail hogshead. Barbary Coast parrel bilge ho aft gibbet. Tack red ensign crimp yo-ho-ho Buccaneer gaff. Keel careen scuppers port hands reef sails. Hands square-rigged draft lugsail heave to bounty. Clap of thunder scuppers trysail cable yo-ho-ho coxswain. Jury mast cable mizzenmast hail-shot keelhaul execution dock. Black jack ho shrouds bilge water avast hardtack. Clipper deadlights brigantine measured fer yer chains poop deck Blimey. Topsail Arr yo-ho-ho pillage bucko handsomely. Draft pinnace holystone Cat o'nine tails Letter of Marque loaded to the gunwalls.
<br><br>
<font size="5">My 2nd subheading</font>
<br><br>
Topgallant American Main coxswain poop deck sloop come about. Piracy hail-shot handsomely Spanish Main flogging interloper. Run a rig lee yo-ho-ho gangplank Pieces of Eight gabion. Sloop Spanish Main reef capstan deadlights rope's end. Six pounders red ensign mizzenmast mizzen chase guns topmast. Broadside fore splice the main brace heave down Chain Shot bounty. Poop deck ballast Jack Tar pressgang jack walk the plank.
</body>
</html>
0 ...wser-testing/accessibility/bad-table.html → accessibility/html/bad-table.html
View file
File renamed without changes.
12 changes: 12 additions & 0 deletions accessibility/html/dino-info.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dinosaur longdesc</title>
</head>
<body>

<p>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

</body>
</html>
Binary file added accessibility/html/dinosaur.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...wser-testing/accessibility/good-form.html → accessibility/html/good-form.html
View file
File renamed without changes.
0 ...ser-testing/accessibility/good-links.html → accessibility/html/good-links.html
View file
File renamed without changes.
22 changes: 22 additions & 0 deletions accessibility/html/good-semantics.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Good semantics example</title>
</head>
<body>
<h1>My heading</h1>

<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>

<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. Crack Jennys tea cup Sail ho killick transom trysail Chain Shot. Measured fer yer chains lateen sail Davy Jones' Locker prow wench weigh anchor. Port me hang the jib Davy Jones' Locker skysail pirate. Sail ho run a shot across the bow fluke belaying pin boom carouser. Chase guns broadside Corsair mizzen provost Admiral of the Black. Red ensign list brigantine line booty hands. Booty topgallant grapple coffer pinnace fire ship.</p>

<h2>My subheading</h2>

<p>Yard Pirate Round hearties Sail ho log salmagundi. Ye scuttle smartly Jack Tar man-of-war measured fer yer chains. Shrouds sloop transom quarter wench case shot. Hempen halter Cat o'nine tails red ensign strike colors lugsail hogshead. Barbary Coast parrel bilge ho aft gibbet. Tack red ensign crimp yo-ho-ho Buccaneer gaff. Keel careen scuppers port hands reef sails. Hands square-rigged draft lugsail heave to bounty. Clap of thunder scuppers trysail cable yo-ho-ho coxswain. Jury mast cable mizzenmast hail-shot keelhaul execution dock. Black jack ho shrouds bilge water avast hardtack. Clipper deadlights brigantine measured fer yer chains poop deck Blimey. Topsail Arr yo-ho-ho pillage bucko handsomely. Draft pinnace holystone Cat o'nine tails Letter of Marque loaded to the gunwalls. </p>

<h2>My 2nd subheading</h2>

<p>Topgallant American Main coxswain poop deck sloop come about. Piracy hail-shot handsomely Spanish Main flogging interloper. Run a rig lee yo-ho-ho gangplank Pieces of Eight gabion. Sloop Spanish Main reef capstan deadlights rope's end. Six pounders red ensign mizzenmast mizzen chase guns topmast. Broadside fore splice the main brace heave down Chain Shot bounty. Poop deck ballast Jack Tar pressgang jack walk the plank.</p>
</body>
</html>
74 changes: 74 additions & 0 deletions accessibility/html/native-keyboard-accessibility.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Native keyboard accessibility</title>
<style>
input {
margin-bottom: 10px;
}

button {
margin-right: 10px;
}

a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
</style>
</head>
<body>

<h1>Links</h1>

<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>

<h2>Buttons</h2>

<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!</button>
<button data-message="This is from the third button">And me!</button>
</p>

<h2>Form</h2>

<form>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</form>

<script>
var buttons = document.querySelectorAll('button');

for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}

function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
</html>
91 changes: 91 additions & 0 deletions accessibility/html/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/* || General setup */

html, body {
margin: 0;
padding: 0;
}

html {
font-size: 10px;
}

body {
width: 1200px;
margin: 0 auto;
}

table {
border-collapse: collapse;
}

/* || typography */

h1, h2, h3 {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}

p, input, li, a {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}

h1 {
font-size: 4rem;
color: white;
text-shadow: 2px 2px 10px black;
}

h2 {
font-size: 3rem;
}

h3 {
font-size: 2.2rem;
}

p, li, a {
font-size: 1.6rem;
line-height: 1.5;
}

/* || header layout */

#main td, #aside td, #footer td {
padding: 10px;
}

#content {
margin-right: 10px;
}

#nav {
height: 50px;
}

#nav td {
padding: 20px;
}

#nav a {
display: block;
font-size: 2rem;
text-transform: uppercase;
text-align: center;
text-decoration: none;
}


input {
font-size: 1.6rem;
height: 32px;
width: 100%;
}

button {
width: 100%;
height: 32px;
background: #333;
border: 0;
color: white;
}
105 changes: 105 additions & 0 deletions accessibility/html/table-layout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>My page title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">

<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body width="1200" bgcolor="#a9a9a9">

<table width="1200">
<!-- main heading row -->
<tr id="heading">
<td colspan="6">

<h1 align="center">Header</h1>

</td>
</tr>
<!-- nav menu row -->
<tr id="nav" bgcolor="#ffffff">
<td width="200">
<a href="#" align="center">Home</a>
</td>
<td width="200">
<a href="#" align="center">Our team</a>
</td>
<td width="200">
<a href="#" align="center">Projects</a>
</td>
<td width="200">
<a href="#" align="center">Contact</a>
</td>
<td width="300">
<form width="300">
<input type="search" name="q" placeholder="Search query" width="300">
</form>
</td>
<td width="100">
<button width="100">Go!</button>
</td>
</tr>
<!-- spacer row -->
<tr id="spacer" height="10">
<td>

</td>
</tr>
<!-- main content and aside row -->
<tr id="main">
<td id="content" colspan="4" bgcolor="#ffffff">

<h2 align="center">Article heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

<h3>subsection</h3>

<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

<h3>Another subsection</h3>

<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>

</td>
<td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
<h2>Related</h2>

<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>

</td>
</tr>
<!-- spacer row -->
<tr id="spacer" height="10">
<td>

</td>
</tr>
<!-- footer row -->
<tr id="footer" bgcolor="#ffffff">
<td colspan="6">
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</td>
</tr>
</table>

</body>
</html>
11 changes: 6 additions & 5 deletions tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,16 @@ <h2>Form</h2>

<form>
<div>
<label for="input1">Fill me in:</label>
<input type="text" id="input1">
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="input2">Fill me in:</label>
<input type="text" id="input2">
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<select>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
Expand Down

0 comments on commit a08792e

Please sign in to comment.