Azul Coding
The Ultimate Accessibility Checklist: WCAG 2.2 A/AA/AAA
snippets.html
<!-- AZUL CODING --------------------------------------- -->
<!-- The Ultimate Accessibility Checklist: WCAG 2.2 A/AA/AAA -->
<!-- https://youtu.be/njN4xEMC-PM -->
<!-- Setting aria-invalid on form validation error -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const emailInput = document.querySelector("#email");
const form = document.querySelector("#email-form");
const validateEmail = (emailField) => {
if (!emailField.value.includes("@")) {
// Invalid email address
emailField.setAttribute("aria-invalid", "true");
emailField.setAttribute("aria-describedby", "err1");
const errorParagraph = document.createElement("p");
errorParagraph.textContent = "Please enter a valid email address.";
errorParagraph.setAttribute("role", "alert");
errorParagraph.setAttribute("id", "err1");
emailField.parentNode.appendChild(errorParagraph);
}
}
form.addEventListener("submit", function(event) {
event.stopImmediatePropagation();
event.preventDefault();
validateEmail(emailInput);
});
});
</script>
<form id="email-form">
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
<!-- Skip to content button -->
<style>
#skip-to-content {
position: absolute;
transform: translateY(-100%);
margin-top: -30px;
}
#skip-to-content:focus {
transform: translateY(0%);
margin-top: 0;
}
</style>
<a class="btn" id="skip-to-content" href="#main">Skip to content</a><br><br>
<div role="navigation" class="btngroup">
<a class="btn" href="/">Home</a>
<a class="btn" href="/about">About</a>
<a class="btn" href="/contact">Contact</a>
</div>
<main id="main" tabindex="0">
<p>This is the main section</p>
<a class="btn" href="#">Another button</a>
</main>
<!-- Text spacing -->
<style>
.spacing {
/* AA */
line-height: calc(18px * 1.5);
padding-block-end: calc(18px * 2);
letter-spacing: calc(18px * 0.12);
word-spacing: calc(18px * 0.16);
/* AAA */
max-width: 80ch;
line-height: calc(18px * 1.5);
padding-block-end: calc(18px * 1.5 * 1.5);
}
</style>
<!-- Custom focus rings -->
<style>
/* Change the colours to match your style,
bearing in mind the contrast */
.btn.focusable:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
/* Two colour indicator */
box-shadow: 0 0 0 2px black;
}
</style>
<!-- Breadcrumb trail -->
<style>
nav.breadcrumb {
padding: 0.8em 1em;
background: white;
color: black;
}
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
}
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 0.25em;
transform: rotate(15deg);
border-right: 0.1em solid currentcolor;
height: 0.8em;
content: "";
}
nav.breadcrumb [aria-current="page"] {
color: black;
font-weight: bold;
text-decoration: none;
}
</style>
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/examples">Examples</a>
</li>
<li>
<a href="" aria-current="page">Breadcrumb Example</a>
</li>
</ol>
</nav>
<!-- Link tags -->
<head>
<link rel="prev" href="1.html" title="Chapter 1">
<link rel="next" href="3.html" title="Chapter 3">
</head>
<!-- Prefers reduced motion query-->
<style>
.btn.animated {
transition: transform 0.5s;
}
.btn.animated:active {
transform: rotateY(360deg);
}
@media (prefers-reduced-motion) {
.btn.animated:active {
transform: none;
}
}
</style>
<a class="btn animated" href="#">Animated button</a>
<!-- Word usage -->
<p><dfn>Non-text content</dfn> is content that...</p>
<dl title="Nautical terms">
<dt>Knot</dt>
<dd>A <i>knot</i> is a unit of speed...</dd>
</dl>
<p>
Sugar is commonly sold in 5
<abbr title="pound">lb.</abbr> bags.
</p>
<p>WCAG (Web Content Accessibility Guidelines) is...</p>
