jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
-$(document).ready(function(e) {
+$(document).ready(function(e) {
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
@@ -28,8 +28,8 @@ Injecting error messages into a container with role=alert already present in
}
return false;
});
-});
-<form name="signup" id="signup">
+});
+<form name="signup" id="signup">
<p id="errors" role="alert" aria-atomic="true"></p>
<div>
<label for="first">First Name (required)</label><br>
diff --git a/techniques/failures/F2.html b/techniques/failures/F2.html
index ce3b8c194b..9762459d2a 100644
--- a/techniques/failures/F2.html
+++ b/techniques/failures/F2.html
@@ -8,17 +8,16 @@ Using CSS to style the p element to look like a heading
The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading.
-<style>
+<style>
.heading1{
font-family: Times, serif;
font-size:200%;
font-weight:bold;
}
</style>
-
-<p class="heading1">Introduction</p>
-<p>This introduction provides detailed information about how to use this ...</p>
-
+
+<p class="heading1">Introduction</p>
+<p>This introduction provides detailed information about how to use this ...</p>
In this case, the proper approach would be to use CSS to style the H1 element in HTML.
diff --git a/techniques/failures/F37.html b/techniques/failures/F37.html
index 5e60d0b720..2cdb0705ab 100644
--- a/techniques/failures/F37.html
+++ b/techniques/failures/F37.html
@@ -19,14 +19,13 @@
the form when a radio button is selected instead of using a submit
button.
-<script>
+<script>
function goToMirror(theInput) {
var mirrorSite = "https://download." + theInput.value + "/";
window.open(mirrorSite);
}
-</script>
-...
-<form name="mirror_form" id="mirror_form" action="" method="get">
+</script>
+<form name="mirror_form" id="mirror_form" action="" method="get">
<p>Please select a mirror download site:</p>
<p>
<input type="radio" onclick="goToMirror(this);" name="mirror"
diff --git a/techniques/failures/F50.html b/techniques/failures/F50.html
index bd21660980..c61c137250 100644
--- a/techniques/failures/F50.html
+++ b/techniques/failures/F50.html
@@ -25,9 +25,8 @@
// kick it off
show();
-</script>
-...
-<span id="blink1">This content will blink</span>
+</script>
+<span id="blink1">This content will blink</span>
Tests
Procedure
diff --git a/techniques/failures/F88.html b/techniques/failures/F88.html
index 0723928c06..bea6b08cb8 100644
--- a/techniques/failures/F88.html
+++ b/techniques/failures/F88.html
@@ -7,7 +7,7 @@
In the following example of a failure, the HTML align attribute is used to create justified text.
-<p align="justify">
+<p align="justify">
Peter Piper picked a peck of pickled peppers
A peck of pickled peppers Peter Piper picked
If Peter Piper picked a peck of pickled peppers
@@ -18,13 +18,12 @@
In this example of a failure, the CSS text-align property is used to create justified text.
-p {text-align: justify}
-<p>
+p {text-align: justify}
+<p>
How much wood would a woodchuck chuck if a woodchuck could chuck wood?
He would chuck, he would, as much as he could, and chuck as much wood
As a woodchuck would if a woodchuck could chuck wood.
-</p>
-
+</p>
Tests
Procedure
diff --git a/techniques/failures/F94.html b/techniques/failures/F94.html
index 630119e0f0..6d212e627d 100644
--- a/techniques/failures/F94.html
+++ b/techniques/failures/F94.html
@@ -27,12 +27,11 @@ Examples
Failure example 1
The following CSS and HTML snippet uses VW units to size the text.
-/* CSS */
+/* CSS */
.callout {
font-size:1vw;
-}
-
-<p class="callout">Text that scales by viewport units</p>
+}
+<p class="callout">Text that scales by viewport units</p>