diff --git a/working-examples/aria-alert-identify-errors/index.html b/working-examples/aria-alert-identify-errors/index.html
index 9ce260d29b..84b14f6cf5 100644
--- a/working-examples/aria-alert-identify-errors/index.html
+++ b/working-examples/aria-alert-identify-errors/index.html
@@ -1,14 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Using ARIA live regions or role=alert to identify errors</title>
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>Using ARIA live regions or role=alert to identify errors | WCAG 2</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 	body{
 		background:#fff;
 		color:#000;
-		font-family:system-ui;
+		font:100% / 1.5 sans-serif;
 	}
 
 	input{
diff --git a/working-examples/aria-alertdialog-identify-errors/index.html b/working-examples/aria-alertdialog-identify-errors/index.html
index bd42b86560..7fc69ad453 100644
--- a/working-examples/aria-alertdialog-identify-errors/index.html
+++ b/working-examples/aria-alertdialog-identify-errors/index.html
@@ -1,8 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Using aria-alertdialog to Identify Errors</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Using aria-alertdialog to Identify Errors | WCAG 2</title>
 <script src="http://code.jquery.com/jquery.js"></script>
 <script>
 $(document).ready(function(e) {
@@ -33,7 +34,12 @@
 	
 });
 </script>
-<style type="text/css">
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
 #modalOverlay {
 	width:100%;
 	height:100%;
@@ -65,7 +71,7 @@
 <main>
 <h1>Using aria-alertdialog to Identify Errors</h1>
 <p>This example shows how role=&quot;alertdialog&quot; can be used to notify someone they have entered invalid information.</p>
-<button id="trigger-alertdialog">Trigger Alertdialog</button>
+<button id="trigger-alertdialog" type="button">Trigger Alertdialog</button>
 </main>
 </body>
 </html>
diff --git a/working-examples/aria-current/index.html b/working-examples/aria-current/index.html
index 93ede480c2..4dd4473d1d 100644
--- a/working-examples/aria-current/index.html
+++ b/working-examples/aria-current/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Using aria-current to identify the current item in a set examples</title>
+    <title>Using aria-current to identify the current item in a set examples | WCAG 2</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
 
     :root {
@@ -24,10 +25,10 @@
         box-sizing: inherit;
       }
 
-        body {
+      body {
         background: var(--white);
         color: var(--black);
-        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+        font: 1rem/1.5 sans-serif;
       }            
 
       [hidden]{
diff --git a/working-examples/aria-grouping-multipart-fields-ssn/index.html b/working-examples/aria-grouping-multipart-fields-ssn/index.html
index d004043ad5..85c21eeb8b 100644
--- a/working-examples/aria-grouping-multipart-fields-ssn/index.html
+++ b/working-examples/aria-grouping-multipart-fields-ssn/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
-    <title>Marking up multi-part groups of form fields</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">  
+    <title>Marking up multi-part groups of form fields | WCAG 2</title>
     <style>
-		:root {
-      box-sizing: border-box;
-     }
-
-     body{
-      font:100% / 1.5 system-ui;
-     }
+      :root {
+        box-sizing: border-box;
+       }
+      
+       body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
+      }
 
      #ssn1{
       margin-block-end: 0.5rem;
diff --git a/working-examples/aria-grouping-related-fields/index.html b/working-examples/aria-grouping-related-fields/index.html
index 17ca01321f..bbcafcd7c0 100644
--- a/working-examples/aria-grouping-related-fields/index.html
+++ b/working-examples/aria-grouping-related-fields/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>Using grouping roles to identify related form controls</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
+  <meta charset="UTF-8">
+  <title>Using grouping roles to identify related form controls | WCAG 2</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">  
   <style>
 
     :root{
@@ -11,7 +11,9 @@
     }
 
     body{
-      font:100% / 1.5 system-ui;
+      background:#fff;
+      color:#000;
+      font:100% / 1.5 sans-serif;
     }
 
     div[role=group], div[role=radiogroup] {
diff --git a/working-examples/aria-icon-font-img-role/index.html b/working-examples/aria-icon-font-img-role/index.html
index 1e5b5b02c8..3374c685a5 100644
--- a/working-examples/aria-icon-font-img-role/index.html
+++ b/working-examples/aria-icon-font-img-role/index.html
@@ -2,17 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Semantically identifying a font icon with role="img" examples</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Semantically identifying a font icon with role="img" examples | WCAG 2</title>
     <style>
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
+        margin: 2rem 2rem 4rem 2rem;
+      }
 
     /* Icon Fonts Styling */
 
-    body {
-      background-color: #fafafc;
-      font-family: "Times New Roman", Times, serif;
-      margin: 2rem 2rem 4rem 2rem;
-    }
-
     @font-face {
       font-family: 'IconFontRoleImg';
       src:  url('fonts/icon-font-role-img.eot?i66rw8');
diff --git a/working-examples/aria-invalid-data-format/index.html b/working-examples/aria-invalid-data-format/index.html
index cc49f75102..b07c02bde9 100644
--- a/working-examples/aria-invalid-data-format/index.html
+++ b/working-examples/aria-invalid-data-format/index.html
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-<title>Forms: Using aria-invalid </title>
-<style type="text/css">
+    <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Forms: Using aria-invalid  | WCAG 2</title>
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
 div.control label {
 margin: 0;
 padding: 0;
@@ -35,7 +41,7 @@
 }
 </style>
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
-<script type="text/JavaScript" src="valcheck.js"></script>
+<script src="valcheck.js"></script>
 </head>
 <body>
 <h2>Forms: Using aria-invalid to identify failed fields </h2>
diff --git a/working-examples/aria-invalid-required-fields/index.html b/working-examples/aria-invalid-required-fields/index.html
index a1a2f35697..4f10dde992 100644
--- a/working-examples/aria-invalid-required-fields/index.html
+++ b/working-examples/aria-invalid-required-fields/index.html
@@ -1,7 +1,8 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html lang="en">
- <head> <title>Input Error Notification with aria-live=assertive and aria-invalid using jQuery</title> 
-<meta charset="utf-8">
+ <head> <title>Input Error Notification with aria-live=assertive and aria-invalid using jQuery | WCAG 2</title> 
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 <script>
 $(document).ready(function(e) {
@@ -32,7 +33,12 @@
 	});
 });
 </script>
-<style type="text/css">
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
 label.failed {
 	border: red thin solid;
 }
diff --git a/working-examples/aria-label-accessible-name-dialog/index.html b/working-examples/aria-label-accessible-name-dialog/index.html
index a65effcec1..cec08b4a09 100644
--- a/working-examples/aria-label-accessible-name-dialog/index.html
+++ b/working-examples/aria-label-accessible-name-dialog/index.html
@@ -2,12 +2,15 @@
 <html lang="en">
 
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>aria-label Example: close button</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>aria-label Example: close button | WCAG 2</title>
 
     <style>
-      body {
-        font-family: sans-serif;
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
       }
 
       button {
diff --git a/working-examples/aria-labelledby-description-complex-graphic/index.html b/working-examples/aria-labelledby-description-complex-graphic/index.html
index 3ad4234dea..c8f7d8a5a7 100644
--- a/working-examples/aria-labelledby-description-complex-graphic/index.html
+++ b/working-examples/aria-labelledby-description-complex-graphic/index.html
@@ -1,8 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset=utf-8>
-<title>ARIA10 Example 1</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ARIA10 Example 1 | WCAG 2</title>
+<style>
+  body{
+    background:#fff;
+    color:#000;
+    font:100% / 1.5 sans-serif;
+  }
+</style>
 </head>
 
 <body>
diff --git a/working-examples/aria-labelledby-table-text-inputs/index.html b/working-examples/aria-labelledby-table-text-inputs/index.html
index d0621ec10c..12b6e74ab2 100644
--- a/working-examples/aria-labelledby-table-text-inputs/index.html
+++ b/working-examples/aria-labelledby-table-text-inputs/index.html
@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Testing aria-labelledby: A simple table with text inputs - code</title>	
-	</head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Testing aria-labelledby: A simple table with text inputs - code | WCAG 2</title>	
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
+</style>
+</head>
 
 <body>
 <table cellpadding="0">
diff --git a/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html b/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
index 342e9172eb..e3205accd7 100644
--- a/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
+++ b/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta content="charset=UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>aria-labelledby example 1: Extend time-out</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>aria-labelledby example 1: Extend time-out | WCAG 2</title>
 <style>
     body{
         background:#fff;
         color:#000;
-        font-family: system-ui;
+        font:100% / 1.5 sans-serif;
     }
 </style>
 </head>
diff --git a/working-examples/aria-labelledby-workshop-booking-timetable/index.html b/working-examples/aria-labelledby-workshop-booking-timetable/index.html
index bbf8d83a9c..01d36dd174 100644
--- a/working-examples/aria-labelledby-workshop-booking-timetable/index.html
+++ b/working-examples/aria-labelledby-workshop-booking-timetable/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<title>Dinosaur conference</title>
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta charset="UTF-8">
+<title>Dinosaur conference | WCAG 2</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <style>
 	body{
 		background:#fff;
 		color:#000;
-		font:1rem / 1.5 system-ui;
+		font:100% / 1.5 sans-serif;
 	}
 
 	table{
diff --git a/working-examples/aria-progressbar-status-message/index.html b/working-examples/aria-progressbar-status-message/index.html
index a3a41d18b9..18ea6c922c 100644
--- a/working-examples/aria-progressbar-status-message/index.html
+++ b/working-examples/aria-progressbar-status-message/index.html
@@ -1,18 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>
-      Working example - Using an ARIA live region to convey the status of a progress bar
+      Working example - Using an ARIA live region to convey the status of a progress bar | WCAG 2
     </title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       :root {
         --color-brand: #0054ae;
         --color-progress: #1e2eb8;
         background: #fff;
         color: #000;
-        font: 100% / 1.5 system-ui;
+        font: 100% / 1.5 sans-serif;
       }
 
       button {
diff --git a/working-examples/aria-role-log/chatlog.html b/working-examples/aria-role-log/chatlog.html
index 2de13b08c3..efb92535ee 100644
--- a/working-examples/aria-role-log/chatlog.html
+++ b/working-examples/aria-role-log/chatlog.html
@@ -1,13 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Using role=log with chat conversation</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Using role=log with chat conversation | WCAG 2</title>
 		<style>
+			body{
+				background:#fff;
+				color:#000;
+				font:100% / 1.5 sans-serif;
+			}
+			
 			.scrollable {
 			    height: 10rem;
 			    overflow-y: auto;
 			}
+			label{
+				display:block;
+			}
 		</style>
 	</head>
 	<body>
@@ -46,7 +56,7 @@
 
 			
 		</script>
-		<div role="main">
+		<main>
 			<h1>Using <code>role="log"</code> with chat conversation</h1>
 			<p>This simple script demonstrates how the conversation region in a chat is updated and surfaced to ATs using the aria <code>log</code> role. Here the role is placed on the region containing the dynamically updating conversation. This is not intended to be a fully-functional chat client, but to demonstrate the use of log role. In this mock demo, the conversation is updated with a brief, one-sided conversation, which is initiated by pressing Send.</p>	
 			<hr>
@@ -56,10 +66,11 @@ <h2>Conversation</h2>
 			</div>
 			<div>
 				<h2>Mock input</h2>
-				<input type="text" name="fakeinput" readonly value="Hello"> <button id="btn" onclick="initiateChat()">Send</button>
+				<label for="fakeinput">Enter a message</label>
+				<input id="fakeinput" type="text" name="fakeinput" readonly value="Hello"> <button id="btn" onclick="initiateChat()" type="button">Send</button>
 			</div>
 			
-		</div>
+		</main>
 
 
 	</body>
diff --git a/working-examples/aria-role-log/serverlog.html b/working-examples/aria-role-log/serverlog.html
index 384c8beeaa..3bb038b350 100644
--- a/working-examples/aria-role-log/serverlog.html
+++ b/working-examples/aria-role-log/serverlog.html
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Using role=log with server logs</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Using role=log with server logs | WCAG 2</title>
 		<style>
+			body{
+				background:#fff;
+				color:#000;
+				font:100% / 1.5 sans-serif;
+			}
 			.scrollable {
 			    height: 10rem;
 			    overflow-y: auto;
diff --git a/working-examples/aria-role-status-searchresults/index.html b/working-examples/aria-role-status-searchresults/index.html
index 29964cf4aa..da99d8f616 100644
--- a/working-examples/aria-role-status-searchresults/index.html
+++ b/working-examples/aria-role-status-searchresults/index.html
@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Using role=status to provide status message on search results</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
-	</head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Using role=status to provide status message on search results | WCAG 2</title>
+		<style>
+			body{
+				background:#fff;
+				color:#000;
+				font:100% / 1.5 sans-serif;
+			}
+	</style>
+</head>
 	<body>
 		<script>
 			function findOrange () {
diff --git a/working-examples/aria-role-status-shoppingcart/index.html b/working-examples/aria-role-status-shoppingcart/index.html
index daa4f44c17..eefbd58305 100644
--- a/working-examples/aria-role-status-shoppingcart/index.html
+++ b/working-examples/aria-role-status-shoppingcart/index.html
@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Using role=status to provide status message on shopping cart</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
-	</head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Using role=status to provide status message on shopping cart | WCAG 2</title>
+		<style>
+			body{
+				background:#fff;
+				color:#000;
+				font:100% / 1.5 sans-serif;
+			}
+	</style>
+</head>
 	<body>
 		<script>
       let counter = 0;
diff --git a/working-examples/breadcrumb-trail/index.html b/working-examples/breadcrumb-trail/index.html
index bf997256e5..dd9b92bb61 100644
--- a/working-examples/breadcrumb-trail/index.html
+++ b/working-examples/breadcrumb-trail/index.html
@@ -1,15 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
-    <title>G65 Providing a breadcrumb trail examples</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">    
+    <title>G65 Providing a breadcrumb trail examples | WCAG 2</title>
     <style>
-      body {
+      body{
         background:#fff;
-        color: #000;
-        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-      }      
+        color:#000;
+        font:100% / 1.5 sans-serif;
+      }
       h2, ul, ul li {
         display: inline;
       }
diff --git a/working-examples/colour-picker/choosecolour.php b/working-examples/colour-picker/choosecolour.php
index 977fe8f3ad..fc8337ad74 100644
--- a/working-examples/colour-picker/choosecolour.php
+++ b/working-examples/colour-picker/choosecolour.php
@@ -31,12 +31,13 @@
 	setcookie("forecolour", $strForecolour, time() + (3600 * 24 * 365), "/");
 }
 ?>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
+<!DOCTYPE html> 
 <html lang="en">
 <head>
-	<title>Colour Picker - Choose Colour</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link href="style.css" rel="stylesheet" type="text/css">
+	<meta charset="utf-8">
+	<title>Colour Picker - Choose Colour | WCAG 2</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link href="style.css" rel="stylesheet">
 <?php
 // Set style block
 echo "\t<style type=\"text/css\">body, legend, a{ color: " . htmlspecialchars($strForecolour) . "; background: " . htmlspecialchars($strBackcolour) . ";}</style>\n";
diff --git a/working-examples/colour-picker/index.php b/working-examples/colour-picker/index.php
index a5174d08fc..efeddcd557 100644
--- a/working-examples/colour-picker/index.php
+++ b/working-examples/colour-picker/index.php
@@ -31,13 +31,14 @@
 	setcookie("backcolour", $strBackcolour, time() + (3600 * 24 * 365), "/");
 	setcookie("forecolour", $strForecolour, time() + (3600 * 24 * 365), "/");
 }
-?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
+?><!DOCTYPE html> 
 <html lang="en">
 <head>
-	<title>Colour Picker</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<script type="text/javascript" src="colourpicker.js"></script>
-	<link href="style.css" rel="stylesheet" type="text/css">
+	<meta charset="utf-8">
+	<title>Colour Picker | WCAG 2</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script src="colourpicker.js"></script>
+	<link href="style.css" rel="stylesheet">
 <?php
 // Set style block
 echo "\t<style type=\"text/css\">body, legend, a{ color: " . htmlspecialchars($strForecolour) . "; background: " . htmlspecialchars($strBackcolour) . ";}</style>\n";
diff --git a/working-examples/colour-picker/persist.php b/working-examples/colour-picker/persist.php
index ecb5c0f33a..0972f2ca9e 100644
--- a/working-examples/colour-picker/persist.php
+++ b/working-examples/colour-picker/persist.php
@@ -1,9 +1,10 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
+<!DOCTYPE html> 
 <html lang="en">
 <head>
-	<title>Colour picker persistence</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link href="style.css" rel="stylesheet" type="text/css">
+	<meta charset="utf-8">
+	<title>Colour picker persistence | WCAG 2</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link href="style.css" rel="stylesheet">
 <?php
 // Get the foreground colour
 if (strlen($_COOKIE["forecolour"]) == 4)
diff --git a/working-examples/colour-picker/style.css b/working-examples/colour-picker/style.css
index e809daa3ab..c5bd731400 100644
--- a/working-examples/colour-picker/style.css
+++ b/working-examples/colour-picker/style.css
@@ -1,6 +1,6 @@
 body
 {
-	font: normal 95.01% helvetica, verdana, arial, sans-serif;
+	font: 100% / 1.5 sans-serif;
 	color:#000;
 	background: #fff;
 	margin: 0;
diff --git a/working-examples/css-24px-target-size/index.html b/working-examples/css-24px-target-size/index.html
index 2190a8dbfb..3e9dd0ffea 100644
--- a/working-examples/css-24px-target-size/index.html
+++ b/working-examples/css-24px-target-size/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Working example - Using min-height and min-width on target container to ensure sufficient target spacing</title>	
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>Working example - Using min-height and min-width on target container to ensure sufficient target spacing | WCAG 2</title>	
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<style>
 body{
 	background:#fff;
 	color:#000;
-	font: 1rem/1.5 system-ui;
+	font:100% / 1.5 sans-serif;
 }
 
 nav, ol, li {
diff --git a/working-examples/css-44px-target-size/index.html b/working-examples/css-44px-target-size/index.html
index 9d387d75a4..3cc341be3c 100644
--- a/working-examples/css-44px-target-size/index.html
+++ b/working-examples/css-44px-target-size/index.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Working example - Using CSS to ensure sufficient target size</title>	
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Working example - Using CSS to ensure sufficient target size | WCAG 2</title>	
 <style>
 	:root {
-		font-size: 100%;
 		box-sizing: border-box;
 	}
 
@@ -14,10 +13,10 @@
 		box-sizing: inherit;
 	}
 
-	body {
+	body{
 		background:#fff;
 		color:#000;
-		font: 1rem/1.5 system-ui;
+		font:100% / 1.5 sans-serif;
 	}
 
 	.visually-hidden {
diff --git a/working-examples/css-fit-labels-inputs/index.html b/working-examples/css-fit-labels-inputs/index.html
index f615307d2a..a7f3a0f891 100644
--- a/working-examples/css-fit-labels-inputs/index.html
+++ b/working-examples/css-fit-labels-inputs/index.html
@@ -2,9 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Using Adjustable Labels and Inputs for Reflow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Using Adjustable Labels and Inputs for Reflow | WCAG 2</title>
     <style>
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
+      }
 
       /* Fitting Inputs Styling */
 
diff --git a/working-examples/css-fitting-images/index.html b/working-examples/css-fitting-images/index.html
index 66af734f4e..dbe7f4a123 100644
--- a/working-examples/css-fitting-images/index.html
+++ b/working-examples/css-fitting-images/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Fitting Images Reflow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Fitting Images Reflow | WCAG 2</title>
     <style>
-
       /* Fitting Images Styling */
 
       .img-responsive {
@@ -23,10 +23,10 @@
         box-sizing: inherit;
       }
 
-      body {
-        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-        background-color: #fafafc;
-        margin: 0;
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
       }
 
       a:hover {
diff --git a/working-examples/css-flexbox/index.html b/working-examples/css-flexbox/index.html
index f71a25f108..a2ef7090ab 100644
--- a/working-examples/css-flexbox/index.html
+++ b/working-examples/css-flexbox/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Using CSS Flexbox for Reflow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Using CSS Flexbox for Reflow | WCAG 2</title>
     <style>
 
     /* Reflow Styling */
@@ -53,9 +53,10 @@
       box-sizing: inherit;
     }
 
-    body {
-      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-      background-color: #fafafc;
+    body{
+      background:#fff;
+      color:#000;
+      font:100% / 1.5 sans-serif;
       margin: 0;
     }
 
diff --git a/working-examples/css-focus-visible/index.html b/working-examples/css-focus-visible/index.html
index 45250fce67..aa29570b3f 100644
--- a/working-examples/css-focus-visible/index.html
+++ b/working-examples/css-focus-visible/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Using CSS :focus-visible to provide keyboard focus indication</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Using CSS :focus-visible to provide keyboard focus indication | WCAG 2</title>
     <style>
 
       /* Specific :focus-visible styles */
@@ -15,9 +15,9 @@
       /* General styles for the example */
 
       body {
-        font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
-        background-color: #fafafc;
-        color: #222;
+        font-family: sans-serif;
+        background-color: #fff;
+        color: #000;
         margin: 0;
         padding: 1em;
       }
diff --git a/working-examples/css-grid/index.html b/working-examples/css-grid/index.html
index 2a66bbbf90..3208441878 100644
--- a/working-examples/css-grid/index.html
+++ b/working-examples/css-grid/index.html
@@ -2,10 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Using media queries and grid CSS to reflow columns</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Using media queries and grid CSS to reflow columns | WCAG 2</title>
     <style>
-
     /* Reflow Styling */
     header { grid-area: header; }
     main  { grid-area: main; }
@@ -69,11 +68,11 @@
       box-sizing: inherit;
     }
 
-    body {
-      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-      background-color: #fafafc;
+    body{
+      background:#fff;
       color:#000;
-      margin: 0;
+      font:100% / 1.5 sans-serif;
+      margin:0;
     }
 
     a:hover {
diff --git a/working-examples/css-new-window-warn/index.html b/working-examples/css-new-window-warn/index.html
index 2fc9bd6621..3a817be136 100644
--- a/working-examples/css-new-window-warn/index.html
+++ b/working-examples/css-new-window-warn/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<title>Link opens in new window notification</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Link opens in new window notification | WCAG 2</title>
 	<style>
 		body {
-        background:#fff;
-        color: #000;
-        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-      }
+			background:#fff;
+			color: #000;
+			font: 1rem/1.5 sans-serif;
+		}
 
 		[hidden]{
 			display:none;
@@ -35,4 +35,4 @@
 <h1>Link opens in new window notification</h1>
 <p>This is an example of an <a aria-describedby="new-win-desc" href="https://example.com" rel="noopener" target="_blank">external link<svg class="new-window-icon" aria-hidden="true" role="img"><use href="#new-window-icon"></use></svg></a></p>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/css-padding-focus-not-obscured/index.html b/working-examples/css-padding-focus-not-obscured/index.html
index 3f0d8431ac..5df97f8229 100644
--- a/working-examples/css-padding-focus-not-obscured/index.html
+++ b/working-examples/css-padding-focus-not-obscured/index.html
@@ -1,10 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Using CSS scroll-padding to un-obscure content</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Using CSS scroll-padding to un-obscure content | WCAG 2</title>
     <style>
+
  			:root {
 				font-size: 100%;
 				box-sizing: border-box;
@@ -31,7 +32,7 @@
       body {
 				background: var(--white);
         color: var(--black);
-        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+        font: 1rem/1.5 sans-serif;
 				margin:0;
       }
 
diff --git a/working-examples/css-reduced-motion-query/index.html b/working-examples/css-reduced-motion-query/index.html
index e2904512d9..f3c79337e0 100644
--- a/working-examples/css-reduced-motion-query/index.html
+++ b/working-examples/css-reduced-motion-query/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Motion triggered by user interaction</title>
-  <style type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Motion triggered by user interaction | WCAG 2</title>
+  <style>
+    
     body
     {
       background: #fff;
       color:#000;
-      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;      
+      font: 1rem/1.5 sans-serif;      
       margin-left:2em;
       margin-right:2em;
     }
diff --git a/working-examples/css-reflow-url/index.html b/working-examples/css-reflow-url/index.html
index 20dd7e4e7f..ef34093ff8 100644
--- a/working-examples/css-reflow-url/index.html
+++ b/working-examples/css-reflow-url/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
     <head>
     <meta charset="UTF-8">
-    <title>Allowing for Reflow with Long URLs</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Allowing for Reflow with Long URLs | WCAG 2</title>
     <style>
 /* Reflow Styling */
 
@@ -41,12 +42,14 @@
 *,  *::before,  *::after {
 	box-sizing: inherit;
 }
-body {
-  font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-	background-color: #fafafc;
+
+body{
+	background:#fff;
 	color:#000;
+	font:100% / 1.5 sans-serif;
 	margin: 0;
 }
+
 a:hover {
 	text-decoration: none;
 }
diff --git a/working-examples/css-sticky/index.html b/working-examples/css-sticky/index.html
index 94dbf86d4d..d0a07cadb8 100644
--- a/working-examples/css-sticky/index.html
+++ b/working-examples/css-sticky/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Using media queries to un-fix sticky headers / footers</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Using media queries to un-fix sticky headers / footers | WCAG 2</title>
     <style>
 
     /* Sticky Styling */
@@ -102,9 +102,9 @@
     }
 
     body {
-      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-      background-color: #fafafc;
+      background:#fff;
       color:#000;
+      font:100% / 1.5 sans-serif;
       margin: 0;
     }
 
diff --git a/working-examples/css-text-spacing/index.html b/working-examples/css-text-spacing/index.html
index ba5e4d3dfd..cdd20939ec 100644
--- a/working-examples/css-text-spacing/index.html
+++ b/working-examples/css-text-spacing/index.html
@@ -1,13 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Allowing for text spacing without wrapping</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Allowing for text spacing without wrapping | WCAG 2</title>
 	<style>
 		body{
-			background: #fff;
+			background:#fff;
 			color:#000;
-			font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+			font:100% / 1.5 sans-serif;
 		}
 
 		nav ul {
diff --git a/working-examples/css-two-focus-colors/index.html b/working-examples/css-two-focus-colors/index.html
index 9a828b9761..893d869978 100644
--- a/working-examples/css-two-focus-colors/index.html
+++ b/working-examples/css-two-focus-colors/index.html
@@ -1,8 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Example of a two-color focus indicator</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Example of a two-color focus indicator | WCAG 2</title>
     <style>
+        body{
+            background:#fff;
+            color:#000;
+            font:100% / 1.5 sans-serif;
+        }
         *:focus {
             /* inner indicator */
             outline: 2px #F9F9F9 solid;
diff --git a/working-examples/description-list-contact-info/index.html b/working-examples/description-list-contact-info/index.html
index 7b8a86d8fc..0969b0f7c2 100644
--- a/working-examples/description-list-contact-info/index.html
+++ b/working-examples/description-list-contact-info/index.html
@@ -1,37 +1,38 @@
 ﻿<!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <title>Contact information with description List</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Contact information with description List | WCAG 2</title>
     <style>
-        :root {
+      :root {
         font-size: 100%;
         box-sizing: border-box;
-        }
+      }
 
-        *,*::after,*::before {
+      *,*::after,*::before {
         box-sizing: inherit;
-        }
+      }
 
-        body {
+      body{
         background:#fff;
         color:#000;
-        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-        }
+        font:100% / 1.5 sans-serif;
+      }
 
-        dl div{
+      dl div{
         display:grid;
         gap:0.25rem;
         grid-template-columns:minmax(4rem, max-content) max-content;
-        }
+      }
 
-        dt, dd{
+      dt, dd{
         margin:0;
-        }
+      }
 
       dt{
-          font-weight:bold;
-        }
+        font-weight:bold;
+      }
 
 
     </style>
diff --git a/working-examples/device-motion-sensor-input-failure/index.html b/working-examples/device-motion-sensor-input-failure/index.html
index 30ae2747d0..56544ac4e1 100644
--- a/working-examples/device-motion-sensor-input-failure/index.html
+++ b/working-examples/device-motion-sensor-input-failure/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
-    body{
-      background: #fff;
-      color:#000;
-      font-family:system-ui;
-    }
+  body{
+    background: #fff;
+    color:#000;
+    font:100% / 1.5 sans-serif;
+  }
 
     button{
       font:inherit;
@@ -19,7 +19,7 @@
   }
 </style>
 
-<title>WCAG Failure Example of Motion Sensor</title> 
+<title>WCAG Failure Example of Motion Sensor | WCAG 2</title> 
 </head>
 <body>
 
diff --git a/working-examples/device-motion-sensor-input/index.html b/working-examples/device-motion-sensor-input/index.html
index 6370ff9e39..92a7885be4 100644
--- a/working-examples/device-motion-sensor-input/index.html
+++ b/working-examples/device-motion-sensor-input/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
-    body{
-      background: #fff;
-      color:#000;
-      font-family:system-ui;
-    }
+  body{
+	  background:#fff;
+	  color:#000;
+	  font:100% / 1.5 sans-serif;
+  }
 
     button{
       font:inherit;
@@ -18,7 +18,7 @@
   }
 </style>
 
-<title>WCAG Example of Motion Sensor</title> 
+<title>WCAG Example of Motion Sensor | WCAG 2</title> 
 </head>
 <body>
 
diff --git a/working-examples/failure-css-positioning/index.html b/working-examples/failure-css-positioning/index.html
index dca325389a..8fc3d9a36f 100644
--- a/working-examples/failure-css-positioning/index.html
+++ b/working-examples/failure-css-positioning/index.html
@@ -1,9 +1,15 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd" >
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-<title>Improper use of CSS to create a tabular layout</title>
-   <style type="text/css">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Improper use of CSS to create a tabular layout | WCAG 2</title>
+   <style>
+      body{
+         background:#fff;
+         color:#000;
+         font:100% / 1.5 sans-serif;
+      }
       .menu1 {
          position: absolute;
          top: 3em;
diff --git a/working-examples/failure-css-positioning/styles-removed.html b/working-examples/failure-css-positioning/styles-removed.html
index b783bd395a..6f01b3463e 100644
--- a/working-examples/failure-css-positioning/styles-removed.html
+++ b/working-examples/failure-css-positioning/styles-removed.html
@@ -1,10 +1,15 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd" >
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-<title>Improper use of CSS to create a tabular layout</title>
-   <style type="text/css">
-
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Improper use of CSS to create a tabular layout | WCAG 2</title>
+   <style>
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
+      }
    </style>
 </head>
 <body>
@@ -23,4 +28,4 @@ <h2>Simulated removal of CSS to demonstrate improper use of CSS to create a tabu
       <span class="item4">Idaho</span>
    </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/failure-orientation-message/index.html b/working-examples/failure-orientation-message/index.html
index 491330134f..64a52a26c0 100644
--- a/working-examples/failure-orientation-message/index.html
+++ b/working-examples/failure-orientation-message/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Showing message asking to reorient device</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Showing message asking to reorient device | WCAG 2</title>
     <style>
 
       /* Orientation "door slam" Styling */
@@ -36,9 +36,10 @@
         box-sizing: inherit;
       }
 
-      body {
-        font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
-        background-color: #fafafc;
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
         margin: 0;
       }
 
@@ -297,4 +298,4 @@ <h2>Footer</h2>
     </div>
     
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/failure-status-message/index.html b/working-examples/failure-status-message/index.html
index 0e170d8ad8..3eb62b3d47 100644
--- a/working-examples/failure-status-message/index.html
+++ b/working-examples/failure-status-message/index.html
@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Including a search results message without a status role</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
-	</head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Including a search results message without a status role | WCAG 2</title>
+	<style>
+		body{
+			background:#fff;
+			color:#000;
+			font:100% / 1.5 sans-serif;
+		}
+	</style>
+</head>
 	<body>
 		<script>
 			function findOrange () {
diff --git a/working-examples/failure-table-headers-incorrect-association/index.html b/working-examples/failure-table-headers-incorrect-association/index.html
index 00db5c12f7..337773b945 100644
--- a/working-examples/failure-table-headers-incorrect-association/index.html
+++ b/working-examples/failure-table-headers-incorrect-association/index.html
@@ -1,23 +1,31 @@
-<!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">
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
-	<title>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes - example</title>
-	<link title="oturn-style" rel="stylesheet" href="style/oturn.css" type="text/css">
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+	<title>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes - example | WCAG 2</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	
-	<style type="text/css">
-        .extraneous {background-color:#fcc;}
-    </style>
-
-
+  <style>
+    body{
+      background:#fff;
+      color:#000;
+      font:100% / 1.5 sans-serif;
+    }
+    
+    table{
+      border:1px solid;
+      border-collapse: collapse;
+    }
+    
+    th, td{
+      border:1px solid;
+      padding:0.25em;
+    }
+  </style>
 </head>
-
 <body>
-
 <h2>Table incorrectly associating <code>headers</code> attributes in table content (<code>td</code>) to table headers (<code>th</code>)</h2>
-<table border="1">
+<table>
    <tr>
      <th rowspan="2" id="h">Homework</th>
      <th colspan="3" id="e">Exams</th>
diff --git a/working-examples/failure-td-not-th/index.html b/working-examples/failure-td-not-th/index.html
index 19a67e900e..890772cd5a 100644
--- a/working-examples/failure-td-not-th/index.html
+++ b/working-examples/failure-td-not-th/index.html
@@ -1,16 +1,29 @@
-
-<!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">
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-	<title>Failure of Success Criterion 1.3.1 for not correctly marking up table headers - example 2</title>
+	<title>Failure of Success Criterion 1.3.1 for not correctly marking up table headers - example 2 | WCAG 2</title>
 	
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	
-	<style type="text/css">
-        .extraneous {background-color:#fcc;}
-    </style>
+  <style>
+    body{
+      background:#fff;
+      color:#000;
+      font:100% / 1.5 sans-serif;
+    }
+
+    table{
+      border:1px solid;
+      border-collapse: collapse;
+    }
+    
+    th, td{
+      border:1px solid;
+      padding:0.25em;
+    }
+  </style>
 
 
 </head>
@@ -20,7 +33,7 @@
 <h2>Table using <code>td</code> instead of <code>th</code> for headers</h2>
 
 
-<table border="1">
+<table>
    
    <tr>
       <td>Name</td>
diff --git a/working-examples/failure-viewport-units/index.html b/working-examples/failure-viewport-units/index.html
index 47c73f172a..67d616f587 100644
--- a/working-examples/failure-viewport-units/index.html
+++ b/working-examples/failure-viewport-units/index.html
@@ -1,8 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Failure due to text sized in viewport units</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Failure due to text sized in viewport units | WCAG 2</title>
     <style>
+        body{
+            background:#fff;
+            color:#000;
+            font:100% / 1.5 sans-serif;
+        }
         .example {
             font-size: 2vh;
             padding: 1vh;
diff --git a/working-examples/focus-pseudo-class/index.html b/working-examples/focus-pseudo-class/index.html
index 089a628947..790975d520 100644
--- a/working-examples/focus-pseudo-class/index.html
+++ b/working-examples/focus-pseudo-class/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<title>Highlighting elements that receive focus</title>
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta charset="UTF-8">
+<title>Highlighting elements that receive focus | WCAG 2</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <style>
    body {
     background:#fff;
     color:#000;
-    font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+    font: 100%/1.5 sans-serif;
   }
 
   input[type=text]:focus-visible {
diff --git a/working-examples/input-resize/index.html b/working-examples/input-resize/index.html
index a7799490c4..dcdd092d5d 100644
--- a/working-examples/input-resize/index.html
+++ b/working-examples/input-resize/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Example of resizing input with CSS</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Example of resizing input with CSS | WCAG 2</title>
 <style>
-  body {
-    background:#fff;
-    color:#000;
-    font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-  }
+	body {
+		background:#fff;
+		color:#000;
+		font:100% / 1.5 sans-serif;
+	}
 	
 	h1 { font-size: 2em;}
 	
diff --git a/working-examples/label-in-name-general/example1.html b/working-examples/label-in-name-general/example1.html
index 0e6a83d780..ba4ee7503a 100644
--- a/working-examples/label-in-name-general/example1.html
+++ b/working-examples/label-in-name-general/example1.html
@@ -2,16 +2,18 @@
 <html lang="en">
 <head>
 
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
-<title>Example of Simple Radio Button Group</title>
+<title>Example of Simple Radio Button Group | WCAG 2</title>
 <style>
 	html{
 		background: white;
 		color:black;
 	}
+	
 	body{
-		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+		font:100% / 1.5 sans-serif;
 	}
 </style>
 </head>
@@ -26,4 +28,4 @@
 	<label for="no">No</label>
 </fieldset>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/label-in-name-general/example2.html b/working-examples/label-in-name-general/example2.html
index ac87a787b7..916f89bdbe 100644
--- a/working-examples/label-in-name-general/example2.html
+++ b/working-examples/label-in-name-general/example2.html
@@ -2,17 +2,20 @@
 <html lang="en">
 <head>
 
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
-	<title>Example of Stacked Labels</title>
+	<title>Example of Stacked Labels | WCAG 2</title>
 	<style>
 		html{
-		background: white;
-		color:black;
+			background: white;
+			color:black;
 		}
+		
 		body{
-		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+			font:100% / 1.5 sans-serif;
 		}
+		
 		input{
 			border: 2px solid #0b0c0c;
 			border-radius: 0;
@@ -63,4 +66,4 @@
 		</div>
 	</form>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/label-in-name-general/example3.html b/working-examples/label-in-name-general/example3.html
index 0359223eac..d4d16c2c6b 100644
--- a/working-examples/label-in-name-general/example3.html
+++ b/working-examples/label-in-name-general/example3.html
@@ -2,17 +2,20 @@
 <html lang="en">
 <head>
 
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
-<title>Example of inputs with simplified accessible names</title>
+<title>Example of inputs with simplified accessible names | WCAG 2</title>
 <style>
+
 	html{
 		background: white;
 		color:black;
-		}
-		body{
-		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-		}
+	}
+	body{
+		font:100% / 1.5 sans-serif;
+	}
+		
 		input{
 			border: 1px solid #0b0c0c;
 			font:inherit;
@@ -28,4 +31,4 @@
 <label for="birth">Birth date</label> (<span id="mask">YYYY-MM-DD</span>)
 <input type="text" name="birth" id="birth" autocomplete="bday" aria-describedby="mask">
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/label-in-name-general/example4.html b/working-examples/label-in-name-general/example4.html
index 472dbdb68e..314a0f5c4f 100644
--- a/working-examples/label-in-name-general/example4.html
+++ b/working-examples/label-in-name-general/example4.html
@@ -2,17 +2,20 @@
 <html lang="en">
 <head>
 
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
-<title>Example of Range of Inputs</title>
+<title>Example of Range of Inputs | WCAG 2</title>
 <style>
+
 	html{
 		background: white;
 		color:black;
-		}
-		body{
-		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
-		}
+	}
+
+	body{
+		font:100% / 1.5 sans-serif;
+	}
 </style>
 </head>
 <body>
@@ -28,4 +31,4 @@
 </fieldset>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/link-contrast/index.html b/working-examples/link-contrast/index.html
index 101c438c9c..04386bd73b 100644
--- a/working-examples/link-contrast/index.html
+++ b/working-examples/link-contrast/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
-
 body {
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 80%;
+	font:100% / 1.5 sans-serif;
 	margin: 12px 12px 12px 12px;
-	color: #000000;
-	background-color: #FFFFFF;
-	width: 800px;
+	color: #000;
+	background: #fff;
 }
 
 
@@ -64,7 +62,7 @@
 }
 </style>
 
-<title>Links with a 3:1 contrast ratio with surrounding text</title>
+<title>Links with a 3:1 contrast ratio with surrounding text | WCAG 2</title>
 
 </head>
 
@@ -97,9 +95,9 @@ <h2>The following 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white</h2>
 
 	<thead>
 		<tr>
-			<th colspan="1" width="60">Color Value</th>
-			<th colspan="1" width="60">Color Swatch</th>
-			<th colspan="1" width="150">Colored Text Sample</th>
+			<th width="60">Color Value</th>
+			<th width="60">Color Swatch</th>
+			<th width="150">Colored Text Sample</th>
 		</tr>
 	</thead>
 
@@ -266,4 +264,4 @@ <h2>The following 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white</h2>
 </table>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/providing-single-point-control-slider/index.html b/working-examples/providing-single-point-control-slider/index.html
index 7b003771bd..814634780d 100644
--- a/working-examples/providing-single-point-control-slider/index.html
+++ b/working-examples/providing-single-point-control-slider/index.html
@@ -3,11 +3,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Custom control slider built on top of a native slider</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Custom control slider built on top of a native slider | WCAG 2</title>
     <link rel="stylesheet" href="example.css">
     <script src="pep.js"></script>
     <script src="example.js" defer></script>
-  </head>
+  <style>
+    body{
+      background:#fff;
+      color:#000;
+      font:100% / 1.5 sans-serif;
+    }
+  </style>
+</head>
   <body>
   <h1>Custom control slider built on top of a native slider (Accessible faked slider)</h1>
   <p>This slider uses an actual <code>&lt;input type="range"&gt;</code> behind the scenes. This is what keyboard and touch + assistive technology users interact with. Mouse/stylus/touch users interact with the fake sliders.</p>
@@ -26,4 +34,4 @@ <h1>Custom control slider built on top of a native slider (Accessible faked slid
 <button class="custom-slider-increment" aria-label="Increment">&gt;</button>
   </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/reflow-carousel-panel-horizontal-scroll/index.html b/working-examples/reflow-carousel-panel-horizontal-scroll/index.html
index 261a867635..4ca3e9a94f 100644
--- a/working-examples/reflow-carousel-panel-horizontal-scroll/index.html
+++ b/working-examples/reflow-carousel-panel-horizontal-scroll/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title>Carousel panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page</title>
-        <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Carousel panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page | WCAG 2</title>
         <style>
             * {
                 margin: 0;
@@ -11,7 +12,8 @@
             }
 
             body {
-                font-family: sans-serif;
+                background: #fff;
+                font: 100% / 1.5 sans-serif;
                 margin: 0;
                 padding: 0;
                 color: #000;
@@ -114,7 +116,7 @@
             .carousel ul.colors li.flame {background: linear-gradient(90deg, rgba(0,0,0,1) 35%, rgba(255,168,53,1) 65%);}
             .carousel ul.colors li.stripe-brown-beige {background: linear-gradient(90deg, rgba(46,24,17,1) 35%, rgba(255,244,230,1) 65%);}
         </style>
-        <script type="text/javascript">
+        <script>
             document.addEventListener('DOMContentLoaded', function() {
                 (function() {
                     const carousel = document.querySelector('.carousel .prod-list > ul');
diff --git a/working-examples/reflow-indenting/index.html b/working-examples/reflow-indenting/index.html
index 9329b4aba4..7a88ac0b32 100644
--- a/working-examples/reflow-indenting/index.html
+++ b/working-examples/reflow-indenting/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Reflow: Code snippet indentation examples</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Reflow: Code snippet indentation examples | WCAG 2</title>
     <style>
-        body, html {
-            font-family: arial;
-        }
+			body{
+				background:#fff;
+				color:#000;
+				font:100% / 1.5 sans-serif;
+			}
         .example {
             overflow: auto;
         }
@@ -39,7 +42,7 @@
 	</head>
 	<body>
 		<main>
-
+			<h1>Code snippet indentation examples</h1>
       <h2>Example 1: Python code snippet</h2>
 	  <p>With Python, indentation and new lines have meaning. 
 		This example adjusts indentation width at different breakpoints to maintain indentation, while ensuring more, characters can be seen
@@ -73,25 +76,25 @@ <h2>Example 3: HTML markup nesting</h2>
 	  </p>
 	  <button aria-pressed="false" id="w">Enable text wrap</button>
       <pre class="example" id="p">
-&lt;html lang=en>
-	&lt;head>...&lt;/head>
-	&lt;body>
-		&lt;div id=app>
-			&lt;header>
-				&lt;!-- header content here, Such as logo, primary navigation, search field, etc. -->
-			&lt;/header>
-			&lt;main>
-				&lt;!-- main content here, Such as headings to introduce the primary content of the page, and related sub-headings and sections. -->
-			&lt;/main>
-			&lt;aside>
-				&lt;!-- aside content here. Tangentially related content. Adverts. Links to other related pages. -->
-			&lt;/aside>
-			&lt;footer>
-				&lt;!-- footer content here. Copyright info, globally repeating company links and disclaimers. -->
-			&lt;/footer>
-		&lt;/div>
-	&lt;/body>
-&lt;/html>
+&lt;html lang=en&gt;
+	&lt;head&gt;...&lt;/head&gt;
+	&lt;body&gt;
+		&lt;div id=app&gt;
+			&lt;header&gt;
+				&lt;!-- header content here, Such as logo, primary navigation, search field, etc. --&gt;
+			&lt;/header&gt;
+			&lt;main&gt;
+				&lt;!-- main content here, Such as headings to introduce the primary content of the page, and related sub-headings and sections. --&gt;
+			&lt;/main&gt;
+			&lt;aside&gt;
+				&lt;!-- aside content here. Tangentially related content. Adverts. Links to other related pages. --&gt;
+			&lt;/aside&gt;
+			&lt;footer&gt;
+				&lt;!-- footer content here. Copyright info, globally repeating company links and disclaimers. --&gt;
+			&lt;/footer&gt;
+		&lt;/div&gt;
+	&lt;/body&gt;
+&lt;/html&gt;
 </pre>
 <script>
 const w = document.getElementById('w');
diff --git a/working-examples/reflow-nested-lists/index.html b/working-examples/reflow-nested-lists/index.html
index dd8e3337b7..8c1528279c 100644
--- a/working-examples/reflow-nested-lists/index.html
+++ b/working-examples/reflow-nested-lists/index.html
@@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Reflow: lists with nested list levels</title>
-		<link rel="stylesheet" type="text/css" href="sources.css">
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Reflow: lists with nested list levels | WCAG 2</title>
     <style>
+        body{
+            background:#fff;
+            color:#000;
+            font:140% / 1.5 sans-serif;
+        }
         *, *::before, *::after {
             box-sizing: border-box;
         }
-        body, html {
-            font-family: arial;
-            font-size:1.2em;
-        }
         @media screen and ( max-width: 640px ) {
             .example {
                 overflow: auto;
@@ -47,7 +49,7 @@
 	<body>
 		<main>
 
-      <h2>Example lists with nested lists</h2>
+      <h1>Example lists with nested lists</h1>
       <p>The following two examples are meant to demonstrate why Success Criterion 1.4.10 Reflow allows for a whole list to scroll in two-dimensions while ensuring individual list items still fit within the 320 CSS pixel width.</p>
       <p>Zooming in to 400% on an original browser viewport width of 1280 pixels, the difference between a list which allows two-dimensional scrolling vs one that limits the entire list and its nested lists to a 320px width can be seen.</p>
       <ul>
@@ -57,7 +59,7 @@ <h2>Example lists with nested lists</h2>
       </p>
       <p>Note that there are additional styling updates that one might make, or futher manipulations to the lists to present the content in a differnet manner, bypassing the need for any horizontal scrolling. And those would be ways to adjust content to meet Reflow. But this example is also a valid means to meet the Reflow SC.</p>
 
-      <h3>Example 1</h2>
+      <h2>Example 1</h2>
       <div class="example">
       <ul>
           <li>
@@ -105,7 +107,7 @@ <h3>Example 1</h2>
       </ul>
   </div>
 
-  <h3>Example 2</h2>
+  <h2>Example 2</h2>
   <div class="bad-experience">
     <ul>
         <li>
diff --git a/working-examples/script-action-buttons/index.html b/working-examples/script-action-buttons/index.html
index 03f4b19b7c..55d13798f2 100644
--- a/working-examples/script-action-buttons/index.html
+++ b/working-examples/script-action-buttons/index.html
@@ -1,9 +1,9 @@
  <!DOCTYPE html>
  <html lang="en">
  <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <title>Creating Action Buttons using JavaScript</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Creating Action Buttons using JavaScript | WCAG 2</title>
  <script>
  //<![CDATA[
  // this is the function to perform the action.  This simple example just displays an alert message.
@@ -22,7 +22,14 @@
  }
  //]]>
  </script>
- </head>
+ <style>
+  body{
+    background:#fff;
+    color:#000;
+    font:100% / 1.5 sans-serif;
+  }
+</style>
+</head>
  <body onload="setUpActions();">
  	<p>Here is the button to modify with a javascript action:</p>
    <form action="doSomething.aspx" onsubmit="return false;">
@@ -30,4 +37,4 @@
    </form>
  <p>As in the previous example, the button element is given a unique <code>id</code> attribute; a script uses the Document Object Model (DOM) to find the button element by its id and add the onclick handler. The <code>action</code> attribute of the enclosing <code>form</code> element contains a script that will perform the action on the server.</p>
  </body>
- </html>
\ No newline at end of file
+ </html>
diff --git a/working-examples/script-action-links/index.html b/working-examples/script-action-links/index.html
index eb4f3e2ab6..1ee81a623d 100644
--- a/working-examples/script-action-links/index.html
+++ b/working-examples/script-action-links/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
- <meta charset="utf-8">
- <title>Creating Action Links using JavaScript</title>
- <script type="text/javascript">
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Creating Action Links using JavaScript | WCAG 2</title>
+ <script>
  //<![CDATA[
  // this is the function to perform the action.  This simple example just displays an alert message.
  function doSomething(event) {
@@ -24,7 +25,14 @@
  }
  //]]>
  </script>
- </head>
+ <style>
+  body{
+    background:#fff;
+    color:#000;
+    font:100% / 1.5 sans-serif;
+  }
+ </style>
+</head>
  <body onload="setUpActions();">
  <p>Here is the link to modify with a JavaScript action:
  <a href="https://example.com/noscript.html" id="actionLink" >Link to invoke JavaScript.</a></p>
diff --git a/working-examples/script-action-on-div/index.html b/working-examples/script-action-on-div/index.html
index f1bb4a1aff..14110cd3e5 100644
--- a/working-examples/script-action-on-div/index.html
+++ b/working-examples/script-action-on-div/index.html
@@ -1,16 +1,20 @@
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
  <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>Creating Divs with Actions using JavaScript</title>
-<style type="text/css" media="screen">
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Creating Divs with Actions using JavaScript | WCAG 2</title>
+<style media="screen">
+body{
+  background:#fff;
+  color:#000;
+  font:100% / 1.5 sans-serif;
+}
 #active {
   border:solid;
 }
 </style>
- <script type="text/javascript">
+ <script>
  //<![CDATA[
  // this is the function to perform the action. This simple example toggles a message.
  function doSomething(event) {
diff --git a/working-examples/script-change-css-property/index.html b/working-examples/script-change-css-property/index.html
index 493aebb105..c5b11780df 100644
--- a/working-examples/script-change-css-property/index.html
+++ b/working-examples/script-change-css-property/index.html
@@ -1,10 +1,11 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<title>Using a client-side JavaScript to change a CSS property</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Using a client-side JavaScript to change a CSS property | WCAG 2</title>
 
-<script type="text/javascript">
+<script>
 function changeColor(hghltColor)
 {
   // collects table data cells into an array
@@ -22,8 +23,12 @@
 }
 </script>
 
-<style type="text/css">
-body { color:#000000; background-color:#FFFFFF; }
+<style>
+body{
+  background:#fff;
+  color:#000;
+  font:100% / 1.5 sans-serif;
+}
 
 .hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
 .hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
diff --git a/working-examples/script-check-multiple-controls/index.html b/working-examples/script-check-multiple-controls/index.html
index 1630a5c9ae..45c597eaf0 100644
--- a/working-examples/script-check-multiple-controls/index.html
+++ b/working-examples/script-check-multiple-controls/index.html
@@ -2,8 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
-		<title>Validate multiple controls</title>
-		<script type="text/ecmascript"><!--
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Validate multiple controls | WCAG 2</title>
+		<script><!--
 			function validate() {
 				// initialize error message
 				var msg = "";
@@ -36,7 +37,14 @@
 			
 			if (getQueryVariable("name") && getQueryVariable("tel")) alert("You appear to have successfully validated and submitted the form.");
 		//--></script>
-	</head>
+	<style>
+		body{
+			background:#fff;
+			color:#000;
+			font:100% / 1.5 sans-serif;
+		}
+</style>
+</head>
 	<body>
 		<h1>Validate multiple controls</h1>
 		<p>This page demonstrates validating multiple form controls at once. If there is invalid input, the user is alerted and the form is not submitted.</p>
diff --git a/working-examples/script-control-blink/index.html b/working-examples/script-control-blink/index.html
index 0f5ba0e447..4af34a2ad9 100644
--- a/working-examples/script-control-blink/index.html
+++ b/working-examples/script-control-blink/index.html
@@ -1,9 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Example of SCR22: Using scripts to control blinking and stop it in five seconds or less</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Example of SCR22: Using scripts to control blinking and stop it in five seconds or less | WCAG 2</title>
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
+</style>
 </head>
 
 <body>
diff --git a/working-examples/script-dynamic-select/index.html b/working-examples/script-dynamic-select/index.html
index 23cef075c4..e0f6712994 100644
--- a/working-examples/script-dynamic-select/index.html
+++ b/working-examples/script-dynamic-select/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<title>Dynamic Select Statements</title>
-<script type="text/javascript">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Dynamic Select Statements | WCAG 2</title>
+<script>
 //<![CDATA[
 // array of possible countries in the same order as they appear in the country selection list
 var countryLists = new Array(4)
@@ -41,6 +42,13 @@
 }
 //]]>
 </script>
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
+</style>
 </head>
 <body>
 <h1>Dynamic Select Statements</h1>
diff --git a/working-examples/script-expand-links/index.html b/working-examples/script-expand-links/index.html
index 859fab0fa0..f1c2ad4c58 100644
--- a/working-examples/script-expand-links/index.html
+++ b/working-examples/script-expand-links/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Providing link expansions on demand</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Providing link expansions on demand | WCAG 2</title>
 <script>
 var expanded = false;
 var linkContext = {
@@ -55,6 +55,13 @@
 	else doExpand();
 }
 </script>
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
+</style>
 </head>
 <body>
 <h1>Books for download</h1>
diff --git a/working-examples/script-form-validation-2/css/validate.css b/working-examples/script-form-validation-2/css/validate.css
index 9442176e02..f20a0290fb 100644
--- a/working-examples/script-form-validation-2/css/validate.css
+++ b/working-examples/script-form-validation-2/css/validate.css
@@ -1,6 +1,6 @@
 body
 {
-	font: normal 100.01%/140% arial, Verdana, helvetica, sans-serif;
+	font: 100% / 1.5 sans-serif;
 	color:#000;
 	background-color: #fff;
 	margin: 0;
diff --git a/working-examples/script-form-validation-2/index.php b/working-examples/script-form-validation-2/index.php
index eb8e2cd43a..fb9be34104 100644
--- a/working-examples/script-form-validation-2/index.php
+++ b/working-examples/script-form-validation-2/index.php
@@ -68,12 +68,12 @@
 			$strError = "<h2>$iErrorCount Errors in Submission</h2>\n" . $strError;
 	}
 ?>
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">	
-	<title>Form Validation</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">	
+	<title>Form Validation | WCAG 2</title>
 	<link href="css/validate.css" rel="stylesheet">
 	<script src="scripts/validate.js"></script>
 </head>
diff --git a/working-examples/script-form-validation/index.html b/working-examples/script-form-validation/index.html
index 2f0da8d4da..df049b7db2 100644
--- a/working-examples/script-form-validation/index.html
+++ b/working-examples/script-form-validation/index.html
@@ -1,10 +1,17 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8">
-	<title>ECMAScript Form Validation</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">	
+	<meta charset="UTF-8">
+	<title>ECMAScript Form Validation | WCAG 2</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">	
 	<script src="validate.js"></script>
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
+</style>
 </head>
 <body>
 <h1>Form Validation</h1>
diff --git a/working-examples/script-hoverable/hover-focus.css b/working-examples/script-hoverable/hover-focus.css
index 48ca5b32b7..da9b858be7 100644
--- a/working-examples/script-hoverable/hover-focus.css
+++ b/working-examples/script-hoverable/hover-focus.css
@@ -1,9 +1,7 @@
 body {
-    width:40em;
-}
-
-h1 {
-    color:blue;
+    background:#fff;
+    color:#000;
+    font:100% / 1.5 sans-serif;
 }
 
 [role="tooltip"] {
@@ -23,4 +21,4 @@ h1 {
     position: absolute;
     left:0;
     top:1em;
-}
\ No newline at end of file
+}
diff --git a/working-examples/script-hoverable/index.html b/working-examples/script-hoverable/index.html
index 835d329db2..d9c220669c 100644
--- a/working-examples/script-hoverable/index.html
+++ b/working-examples/script-hoverable/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8">
-	<title>Hover & Focus General Technique Example 1</title>
-	<link title="hover-focus-style" rel="stylesheet" href="hover-focus.css" type="text/css">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Hover & Focus General Technique Example 1 | WCAG 2</title>
+	<link title="hover-focus-style" rel="stylesheet" href="hover-focus.css">
     <script src="hover-focus.js" defer></script>
 </head>
-
 <body>
 <h1>Example of a pop-over on hover and focus</h1>
 <p>This is the <a class="a-and-tooltip" id="parent" href="../index.html">trigger<span id="popup" role="tooltip">And this additional text gives additional context on the trigger term</span></a>. Text and popup are <strong>in one link (a)</strong> element.</p>  
 <p>This is another line of text that users may want to read even though it can be obscured by the popup.</p>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/script-scroll-pause/index.html b/working-examples/script-scroll-pause/index.html
index 1b86ddc6c9..1d0a6560ed 100644
--- a/working-examples/script-scroll-pause/index.html
+++ b/working-examples/script-scroll-pause/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" >
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Example of using script to scroll content and providing mechanism to pause it</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Example of using script to scroll content and providing mechanism to pause it | WCAG 2</title>
 <link rel="stylesheet" href="scroll.css">
 <script src="scroll.js"></script>
 </head>
diff --git a/working-examples/script-scroll-pause/scroll.css b/working-examples/script-scroll-pause/scroll.css
index fc7e04791f..535c9bcf72 100644
--- a/working-examples/script-scroll-pause/scroll.css
+++ b/working-examples/script-scroll-pause/scroll.css
@@ -1,4 +1,8 @@
-body {font:1em verdana,sans-serif; color:#000; margin:0}
+body{
+  background:#fff;
+  color:#000;
+  font:100% / 1.5 sans-serif;
+}
 
 /* position:relative and overflow:hidden are required */
 #scroller { position:relative; overflow:hidden; width:15em; border:1px solid #008080; }
@@ -10,4 +14,4 @@ body {font:1em verdana,sans-serif; color:#000; margin:0}
 #testP { visibility:hidden; position:absolute; white-space:nowrap; } 
 
 /* used as a page top marker and to limit width */
-#top { width:350px; margin:auto; }
\ No newline at end of file
+#top { width:350px; margin:auto; }
diff --git a/working-examples/script-scroll-text-expand/index.html b/working-examples/script-scroll-text-expand/index.html
index 472d62fa1b..1ce13edd9a 100644
--- a/working-examples/script-scroll-text-expand/index.html
+++ b/working-examples/script-scroll-text-expand/index.html
@@ -1,9 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <title>Expanding Scrolling Text in Place</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Expanding Scrolling Text in Place | WCAG 2</title>
     <style>
+      body{
+        background:#fff;
+        color:#000;
+        font:100% / 1.5 sans-serif;
+      }
 
       #scrollContainer {
         visibility: visible;
@@ -85,4 +91,4 @@
         <p>Folds of scarlet drapery shut in my view to the right hand; to the left were the clear panes of glass, protecting, but not separating me from the drear November day. At intervals, while turning over the leaves of my book, I studied the aspect of that winter afternoon. Afar, it offered a pale blank of mist and cloud; near a scene of wet lawn and storm-beat shrub, with ceaseless rain sweeping away wildly before a long and lamentable blast.</p></p>
     </div>
   </div>
-</body></html>
\ No newline at end of file
+</body></html>
diff --git a/working-examples/script-swap-css/index.html b/working-examples/script-swap-css/index.html
index 0a1c8bfa49..464a332422 100644
--- a/working-examples/script-swap-css/index.html
+++ b/working-examples/script-swap-css/index.html
@@ -1,13 +1,14 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<title>Using a Javascript control to apply a different external CSS file </title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Using a Javascript control to apply a different external CSS file  | WCAG 2</title>
    
-  <script type="text/javascript" src="colorswitcher.js"></script>
+  <script src="colorswitcher.js"></script>
 
-  <link href="main.css" rel="stylesheet" type="text/css">
-  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css">
+  <link href="main.css" rel="stylesheet">
+  <link id="currentCSS" href="defaultColors.css" rel="stylesheet">
 </head>
 
 <body>
diff --git a/working-examples/script-swap-css/main.css b/working-examples/script-swap-css/main.css
index 93c07cf2c4..1dd9ee20dc 100644
--- a/working-examples/script-swap-css/main.css
+++ b/working-examples/script-swap-css/main.css
@@ -1,14 +1,15 @@
 @charset "utf-8";
 /* CSS Document */
 
-body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
+body{
+  background:#fff;
+  color:#000;
+  font:100% / 1.5 sans-serif;
+  margin:2em;
+}
 
 #mainbody { padding: 1em; }
 
 #colorswitch {float: right; width: 12em; border: 1px #000066 solid; padding:0 1em 1em 1em; margin:0;}
 
 #colorswitch p { padding-top:.5em; font-weight:bold;}
-
-
-
-
diff --git a/working-examples/script-toggle-aria-alerts/index.html b/working-examples/script-toggle-aria-alerts/index.html
index f73285fe39..b84c447950 100644
--- a/working-examples/script-toggle-aria-alerts/index.html
+++ b/working-examples/script-toggle-aria-alerts/index.html
@@ -1,9 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Togglimg ARIA alerts</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Togglimg ARIA alerts | WCAG 2</title>
 <script>
 document.addEventListener("DOMContentLoaded", function (e) {
   const stockBox = document.querySelector("#stock-box");
@@ -50,7 +50,7 @@
 body {
 	background:white;
 	color:black;
-	font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+	font: 100%/1.5 sans-serif;
 }
 
 #stock-box{
diff --git a/working-examples/script-toggle-toc-button/index.html b/working-examples/script-toggle-toc-button/index.html
index b1441403d0..c88ded2bd8 100644
--- a/working-examples/script-toggle-toc-button/index.html
+++ b/working-examples/script-toggle-toc-button/index.html
@@ -1,10 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>SCR 28 Example: Toggle table of contents with a button</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SCR 28 Example: Toggle table of contents with a button | WCAG 2</title>
 <style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
 #toc {
 	border: 1px solid #aaa;
 	background-color: #f9f9f9;
diff --git a/working-examples/semantic-text/index.html b/working-examples/semantic-text/index.html
index 6a990999a3..8fb129710b 100644
--- a/working-examples/semantic-text/index.html
+++ b/working-examples/semantic-text/index.html
@@ -1,8 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Semantic Text Markup Example</title>
-  <meta charset="utf-8">
+  <title>Semantic Text Markup Example | WCAG 2</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body{
+  background:#fff;
+  color:#000;
+  font:100% / 1.5 sans-serif;
+}
+</style>
 </head>
 <body>
 <h1>Using Semantic markup to mark emphasized or special text</h1>
@@ -25,4 +33,4 @@ <h2>Using the <code>sup</code> and <code>sub</code> elements to mark up superscr
  <p>Beth won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
  <p>The chemical notation for water is H<sub>2</sub>O.</p>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/server-referrer-access-nonconforming/conforming.php b/working-examples/server-referrer-access-nonconforming/conforming.php
index 9df391130b..917b5c95f5 100644
--- a/working-examples/server-referrer-access-nonconforming/conforming.php
+++ b/working-examples/server-referrer-access-nonconforming/conforming.php
@@ -2,8 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Conforming Content</title>
-  </head>
+    <title>Conforming Content | WCAG 2</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body{
+      background:#fff;
+      color:#000;
+      font:100% / 1.5 sans-serif;
+    }
+  </style>
+</head>
   <body>
     <h1>This is a conforming page</h1>
     <p>From here, you can visit the <a href="non-conforming.php">non-conforming page</a>. </p>
diff --git a/working-examples/server-referrer-access-nonconforming/non-conforming.php b/working-examples/server-referrer-access-nonconforming/non-conforming.php
index bff8a7b29b..9c18edfbc8 100644
--- a/working-examples/server-referrer-access-nonconforming/non-conforming.php
+++ b/working-examples/server-referrer-access-nonconforming/non-conforming.php
@@ -6,7 +6,15 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Non-Conforming Content</title>
+  <title>Non-Conforming Content | WCAG 2</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+  body{
+    background:#fff;
+    color:#000;
+    font:100% / 1.5 sans-serif;
+  }
+</style>
 </head>
 <body>
   <h1>This is a non-conforming page</h1>
diff --git a/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html b/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html
index 5a29bf2824..97a21429e5 100644
--- a/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html
+++ b/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Sticky footer is hiding focused elements</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Sticky footer is hiding focused elements | WCAG 2</title>
 		<style>
 			* {box-sizing: border-box;}
 			body {
 				background: #fff;
 				color: #000;
-				font-family: Arial, sans-serif;
-				font-size: 1.6em;
+				font: 150% / 1.5 sans-serif;
 				margin: 4em;
-				line-height: 1.5em;
 			}
 			h1 {margin: 2em 0em;}
 			ul {margin: 3em 0;}
diff --git a/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html b/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html
index 0b119e2e89..52c9370044 100644
--- a/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html
+++ b/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Sticky header is hiding focused elements</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Sticky header is hiding focused elements | WCAG 2</title>
 		<style>
 			* {box-sizing: border-box;}
 			body {
 				background: #fff;
 				color: #000;
-				font-family: Arial, sans-serif;
-				font-size: 1.6em;
+				font: 150% / 1.5 sans-serif;
 				margin: 4em;
-				line-height: 1.5em;
 			}
 			h1 {margin: 6em 0em 2em 0;}
 			ul {margin: 3em 0;}
diff --git a/working-examples/uri-parameter-choose-stylesheet/index.php b/working-examples/uri-parameter-choose-stylesheet/index.php
index 0448896ca1..90624d60a8 100644
--- a/working-examples/uri-parameter-choose-stylesheet/index.php
+++ b/working-examples/uri-parameter-choose-stylesheet/index.php
@@ -11,15 +11,15 @@
 	}
 ?>
 
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Using PHP $_GET to apply a different external CSS file</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Using PHP $_GET to apply a different external CSS file | WCAG 2</title>
    
 
-  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
-
+  <link rel="stylesheet" media="screen" href="<?php echo($thestyle);?>.css" >
 </head>
 
 <body>
diff --git a/working-examples/uri-parameter-choose-stylesheet/style1.css b/working-examples/uri-parameter-choose-stylesheet/style1.css
index 8ff9b2e344..f7022ed6de 100644
--- a/working-examples/uri-parameter-choose-stylesheet/style1.css
+++ b/working-examples/uri-parameter-choose-stylesheet/style1.css
@@ -1,5 +1,10 @@
 @charset "utf-8";
 /* CSS Document */
 
-  body, p { color:#000000; background-color:#FFFFFF; }
-  h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
+body{
+  background:#fff;
+  color:#000;
+  font:100% / 1.5 sans-serif;
+}
+
+h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
diff --git a/working-examples/uri-parameter-choose-stylesheet/style2.css b/working-examples/uri-parameter-choose-stylesheet/style2.css
index 6a1eb7d03b..3304e746ac 100644
--- a/working-examples/uri-parameter-choose-stylesheet/style2.css
+++ b/working-examples/uri-parameter-choose-stylesheet/style2.css
@@ -1,5 +1,9 @@
 @charset "utf-8";
 /* CSS Document */
 
+body{
+  font:100% / 1.5 sans-serif;
+}
+
 body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
 
