Skip to content

Remove jQuery from Techniques #4981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fstrr wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Remove jQuery from Techniques #4981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d02aed7
Remove jQuery from ARIA19
fstrr Mar 7, 2026
02d606e
Merge branch 'main' into remove-jquery-from-working-examples
fstrr Mar 10, 2026
904bf33
update aria-invalid-data-format example
fstrr Mar 10, 2026
022eb49
update aria-invalid required fields working example
fstrr Mar 11, 2026
5757c89
Merge branch 'main' into remove-jquery-from-working-examples
fstrr Mar 11, 2026
0c1d79d
Update ARIA21
fstrr Mar 11, 2026
143ec3c
change font
fstrr Mar 11, 2026
f23baf5
tweak styling
fstrr Mar 11, 2026
e172545
update alertdialog example
fstrr Mar 11, 2026
66741e3
update aria18 to use updated HTML example
fstrr Mar 11, 2026
b54a9ac
Merge branch 'main' into remove-jquery-from-working-examples
patrickhlauke Apr 5, 2026
f9c3117
Apply suggestion from @patrickhlauke
patrickhlauke Apr 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 71 additions & 55 deletions techniques/aria/ARIA18.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,72 @@
<!DOCTYPE html><html lang="en"><head><title>Using aria-alertdialog to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Using aria-alertdialog to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA18</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>The purpose of this technique is to alert people that an input error has occurred. Using <code>role="alertdialog"</code> creates a notification. This notification should be modal with the following characteristics:
</p>
<ul>
<li><code>aria-label</code> or <code>aria-labelledby</code> attribute gives the alertdialog an accessible name.</li>
<li>The <code>alertdialog</code> contains at least one focusable element, and the focus should move to that element when the <code>alertdialog</code> opens.</li>
<li>The tab order is constrained within the <code>alertdialog</code> whilst it is open.</li>
<li>When the <code>alertdialog</code> is dismissed, the focus moves back to the position it had before the <code>alertdialog</code> opened, if possible.</li>
</ul>

<p>Note that the <code>alertdialog</code> should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Alert dialog</h3>

<p>This example shows how a notification using <code>role="alertdialog"</code> can be used to notify someone they have entered invalid information.</p>
<pre><code class="language-html">&lt;div role="alertdialog" aria-labelledby="alertHeading"&gt;
&lt;h1 id="alertHeading"&gt;Error&lt;/h1&gt;
&lt;p&gt;Employee's Birth Date is after their hire date.
Please verify the birth date and hire date.&lt;/p&gt;
&lt;button&gt;Save and Continue&lt;/button&gt;
&lt;button&gt;Return to page and correct error&lt;/button&gt;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using aria-alertdialog to Identify Errors</title>
</head>
<body>
<h1>Using <code>aria-alertdialog</code> to Identify Errors</h1>
<section class="meta">
<p class="id">ID: ARIA18</p>
<p class="technology">Technology: aria</p>
<p class="type">Type: Technique</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The purpose of this technique is to alert people that an input error has occurred. Using <code>role="alertdialog"</code> creates a notification. This notification should be modal with the following characteristics:</p>
<ul>
<li><code>aria-label</code> or <code>aria-labelledby</code> attribute gives the alertdialog an accessible name.</li>
<li>The <code>alertdialog</code> contains at least one focusable element, and the focus should move to that element when the <code>alertdialog</code> opens.</li>
<li>The tab order is constrained within the <code>alertdialog</code> whilst it is open.</li>
<li>When the <code>alertdialog</code> is dismissed, the focus moves back to the position it had before the <code>alertdialog</code> opened, if possible.</li>
</ul>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Alert dialog</h3>
<p>This example shows how a notification using <code>role="alertdialog"</code> can be used to notify someone they have entered invalid information.</p>
<pre><code class="language-html">&lt;div aria-modal="true" role="alertdialog" aria-labelledby="alert-heading"&gt;
&lt;h1 id="alert-heading"&gt;Error&lt;/h1&gt;
&lt;p&gt;Employee&#39;s Birth Date is after their hire date. Please verify the birth date and hire date.&lt;/p&gt;
&lt;button type="button"&gt;Return to page and correct error&lt;/button&gt;
&lt;/div&gt;</code></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-alertdialog-identify-errors/">Alert dialog</a>.</p>

</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Trigger the error that causes the <code>alertdialog</code> to appear.</li>
<li>Determine that the <code>alertdialog</code> contains at least one focusable element, and the focus moves to that element when the <code>alertdialog</code> opens.</li>
<li>Determine that the tab order is constrained within the <code>alertdialog</code> while it is open, and when the <code>alertdialog</code> is dismissed, the focus moves back to the position it had before the <code>alertdialog</code> opened, if possible.</li>
<li>Examine the element with <code>alertdialog</code> applied.</li>
<li>Determine that either the <code>aria-label</code> or <code>aria-labelledby</code> attribute has been correctly used to give the alertdialog an accessible name.</li>
<li>Determine that the contents of the <code>alertdialog</code> identifies the input error.</li>
<li>Determine whether contents of the <code>alertdialog</code> suggests how to fix the error.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks #2, #3, #5 and #6 are true. For Success Criterion 3.3.3, check #7 is also true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>

<ul>
<li>
<a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
</li>
</ul>

</section>
</body></html>
<p class="working-example">Working example: <a href="../../working-examples/aria-alertdialog-identify-errors/">Using <code>aria-alertdialog</code> to Identify Errors
</a>.</p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<ol>
<li>Trigger the error that causes the <code>alertdialog</code> to appear.</li>
<li>Determine that the <code>alertdialog</code> contains at least one focusable element, and the focus moves to that element when the <code>alertdialog</code> opens.</li>
<li>Determine that the tab order is constrained within the <code>alertdialog</code> while it is open, and when the <code>alertdialog</code> is dismissed, the focus moves back to the position it had before the <code>alertdialog</code> opened, if possible.</li>
<li>Examine the element with <code>alertdialog</code> applied.</li>
<li>Determine that either the <code>aria-label</code> or <code>aria-labelledby</code> attribute has been correctly used to give the alertdialog an accessible name.</li>
<li>Determine that the contents of the <code>alertdialog</code> identifies the input error.</li>
<li>Determine whether contents of the <code>alertdialog</code> suggests how to fix the error.</li>
</ol>
</section>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>Checks #2, #3, #5 and #6 are true. For Success Criterion 3.3.3, check #7 is also true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
</section>
<section id="resources">
<h2>Resources</h2>
<ul>
<li><a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a></li>
</ul>
</section>
</body>
</html>
95 changes: 62 additions & 33 deletions techniques/aria/ARIA19.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<!DOCTYPE html><html lang="en"><head><title>Using ARIA role=alert or Live Regions to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Using ARIA role=alert or Live Regions to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA19</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<!DOCTYPE html><html lang="en"><head><title>Using ARIA role=alert or Live Regions to Identify Errors</title></head><body>
<h1>Using ARIA <code>role=alert</code> or Live Regions to Identify Errors</h1>
<section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The <code>aria-live</code> attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the <code>aria-live</code> region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
Expand All @@ -8,40 +10,70 @@
<section class="example">
<h3>Injecting error messages into a container with role=alert already present in the DOM</h3>

<p>The following example uses role=alert which is equivalent to using aria-live=assertive.
</p>
<p>In the example there is an empty error message container element with aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.
</p>
<p>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.
</p>
<pre><code class="language-javascript">$(document).ready(function(e) {
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('&lt;p&gt;Please enter your first name.&lt;/p&gt;');
}
if ($('#last').val() === '') {
$('#errors').append('&lt;p&gt;Please enter your last name.&lt;/p&gt;');
}
if ($('#email').val() === '') {
$('#errors').append('&lt;p&gt;Please enter your email address.&lt;/p&gt;');
}
return false;
});
<p>The following example uses role=alert which is equivalent to using <code>aria-live=assertive</code>.</p>
<p>In the example there is an empty error message container element with <code>aria-atomic=true</code> and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. <code>aria-atomic=true</code> is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.</p>
<p>JavaScript 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.</p>

<pre><code class="language-javascript">// Get the form element
const form = document.getElementById('signup');

// Listen for when the form is submitted
form.addEventListener('submit', function(event) {

// Stop the form from actually submitting (so we can check it first)
event.preventDefault();

// Get references to the input fields
const firstNameInput = document.getElementById('first');
const lastNameInput = document.getElementById('last');
const emailInput = document.getElementById('email');

// Get the element where we'll show error messages
const errorsContainer = document.getElementById('errors');

// Create an empty array to collect error messages
const errorMessages = [];

// Check if first name is empty
if (firstNameInput.value === '') {
errorMessages.push('&lt;li&gt;Please enter your first name.&lt;/li&gt;');
}

// Check if last name is empty
if (lastNameInput.value === '') {
errorMessages.push('&lt;li&gt;Please enter your last name.&lt;/li&gt;');
}

// Check if email is empty
if (emailInput.value === '') {
errorMessages.push('&lt;li&gt;Please enter your email address.&lt;/li&gt;');
}

// Clear the errors container first
// (This helps screen readers notice when new content appears)
errorsContainer.innerHTML = '';

// Wait 500 milliseconds, then show the errors
setTimeout(function() {
// If there are any errors, wrap them in a list and display them
if (errorMessages.length &gt; 0) {
errorsContainer.innerHTML = '&lt;ul&gt;' + errorMessages.join('') + '&lt;/ul&gt;';
}
}, 500);
});</code></pre>
<pre><code class="language-html">&lt;form name="signup" id="signup"&gt;
&lt;p id="errors" role="alert" aria-atomic="true"&gt;&lt;/p&gt;
&lt;div&gt;
&lt;label for="first"&gt;First Name (required)&lt;/label&gt;&lt;br&gt;
&lt;input type="text" name="first" id="first"&gt;
&lt;label for="first"&gt;First Name (required)&lt;/label&gt;
&lt;input autocomplete="given-name" type="text" name="first" id="first"&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="last"&gt;Last Name (required)&lt;/label&gt;&lt;br&gt;
&lt;input type="text" name="last" id="last"&gt;
&lt;label for="last"&gt;Last Name (required)&lt;/label&gt;
&lt;input autocomplete="family-name" type="text" name="last" id="last"&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="email"&gt;Email (required)&lt;/label&gt;&lt;br&gt;
&lt;input type="text" name="email" id="email"&gt;
&lt;label for="email"&gt;Email (required)&lt;/label&gt;
&lt;input autocomplete="email" type="text" name="email" id="email"&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input type="submit" name="button" id="button" value="Submit"&gt;
Expand All @@ -52,9 +84,9 @@ <h3>Injecting error messages into a container with role=alert already present in
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Determine that an empty error container with <code>role=alert</code> or <code>aria-live=assertive</code> attribute is present in the DOM at page load.</li>
<li> Trigger the error that causes the content in the live region to appear or update.</li>
<li> Determine that the error message was injected into the already present error container.</li>
<li>Determine that an empty error container with <code>role=alert</code> or <code>aria-live=assertive</code> attribute is present in the DOM (Document Object Model). at page load.</li>
<li>Trigger the error that causes the content in the live region to appear or update.</li>
<li>Determine that the error message was injected into the already present error container.</li>
</ol>
</section>
<section class="results">
Expand All @@ -73,9 +105,6 @@ <h2>Resources</h2>
<li>
<a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
</li>
<li>
<a href="https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/">HTML5 Accessibility Chops: ARIA role=alert browser support</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA, Supported States and Properties, aria-describedby</a>
</li>
Expand Down
Loading
Loading