w3c · fstrr · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026
diff --git a/working-examples/aria-alert-identify-errors/index.html b/working-examples/aria-alert-identify-errors/index.html
@@ -2,13 +2,13 @@
 <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
@@ -2,38 +2,54 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Using aria-alertdialog to Identify Errors</title>
-<script src="http://code.jquery.com/jquery.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Using aria-alertdialog to Identify Errors: WCAG 2</title>
 <script>
-$(document).ready(function(e) {
-	$('#trigger-alertdialog').click(function() {
-		$('main').attr('aria-hidden','true');
-		var lastFocus = document.activeElement;
-		var modalOverlay = $('<div>').attr({id:"modalOverlay", tabindex:"0"});
-		$(modalOverlay).appendTo('body');		
-		var dialog = $('<div>').attr({role:"alertdialog", "aria-labelledby":"alertHeading", tabindex:"0"});
-		$(dialog).html('<div id="firstElement" tabindex="0"></div><h1 id="alertHeading">Error</h1><p>Employee\'s Birth Date is after their hire date. Please verify the birth date and hire date.</p><button id="firstButton">Save and Continue</button><button id="lastButton">Return to page and correct error</button><div id="lastElement" tabindex="0"></div>').appendTo('body');
-		$('#firstButton').focus();
+document.addEventListener('DOMContentLoaded', function() {
+	document.getElementById('trigger-alertdialog').addEventListener('click', function(e) {
+		e.preventDefault();
+		const main = document.querySelector('main');
+		main.setAttribute('aria-hidden', 'true');
+		const lastFocus = document.activeElement;
 
-$('#lastElement').focusin(function(e) {
-	   $('#firstButton').focus();
-});
-$('#firstElement').focusin(function(e) {
-	   $('#lastButton').focus();
-});
+		const modalOverlay = document.createElement('div');
+		modalOverlay.id = 'modalOverlay';
+		modalOverlay.setAttribute('tabindex', '0');
+		document.body.appendChild(modalOverlay);
 
-$('[role=alertdialog] button').click(function(e) {
-    	$('main').attr('aria-hidden','false');		
-		$(modalOverlay).remove();
-		$(dialog).remove();
-        lastFocus.focus();
-});
-		return false;
+		const ariaDialog = document.createElement('div');
+		ariaDialog.setAttribute('role', 'alertdialog');
+		ariaDialog.setAttribute('aria-labelledby', 'alertHeading');
+		ariaDialog.setAttribute('tabindex', '0');
+		ariaDialog.innerHTML = '<div id="firstElement" tabindex="0"></div><h1 id="alertHeading">Error</h1><p>Employee\'s Birth Date is after their hire date. Please verify the birth date and hire date.</p><button id="firstButton">Save and Continue</button><button id="lastButton">Return to page and correct error</button><div id="lastElement" tabindex="0"></div>';
+		document.body.appendChild(ariaDialog);
+
+		document.getElementById('firstButton').focus();
+
+		document.getElementById('lastElement').addEventListener('focusin', function() {
+			document.getElementById('firstButton').focus();
+		});
+		document.getElementById('firstElement').addEventListener('focusin', function() {
+			document.getElementById('lastButton').focus();
+		});
+
+		ariaDialog.querySelectorAll('button').forEach(function(button) {
+			button.addEventListener('click', function() {
+				main.setAttribute('aria-hidden', 'false');
+				modalOverlay.remove();
+				ariaDialog.remove();
+				lastFocus.focus();
+			});
+		});
 	});
-
 });
 </script>
-<style type="text/css">
+<style>
+body{
+	background:#fff;
+	color:#000;
+	font:100% / 1.5 sans-serif;
+}
 #modalOverlay {
 	width:100%;
 	height:100%;
@@ -65,7 +81,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-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
@@ -1,17 +1,19 @@
 <!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{
       box-sizing: border-box;
     }
-
+    
     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
@@ -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
@@ -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
@@ -1,7 +1,8 @@
 <!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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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-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>