Figure 1 Example of webpage that is well-defined using native HTML elements along with ARIA implementation
where required.
Usually, either HTML or ARIA or both CAN be used for defining elements on a webpage. However,
due to inbuilt functionalities or baked in accessibility, native HTML is given precedence over ARIA for simple
elements.
When dynamic or complex functionality appears, ARIA is preferred over native HTML or a mixture of both is used
since it provides flexibility for developers.
The aim should be to ensure that through markup the name. role and value SHOULD be communicated
appropriately for different assistive technologies.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
Use native HTML over ARIA for defining elements on a webpage.
Use ARIA only where native HTML DOES NOT provide the required features.
ARIA role, state and properties MUST be appropriately used for the
elements.
Use semantic HTML markup for implementing the elements on webpage.
Basic HTML structure elements MUST be used to structure the webpage. For example,
using <header>, <nav>, <main>, <aside>,
and <footer> to code the respective sections of the webpage.
As a best practice ensure that elements that help the user navigate to a different page is coded as
link; whereas an element that performs an action should be coded as a button.
AVOID overriding default focus indicator with custom focus indicator in CSS.
AVOID overriding native semantics with ARIA if not required.
Test your code with an HTML validator such as the
W3C’s validator to ensure that no
semantic errors exist on in your code.
A well-defined page without code errors benefits majorly the below users.
People with cognitive disabilities
People with visual disabilities
People using speech input
People with limited dexterity
People using keyboard only
<h2>MyLab</h2>
<p>
Engaging students and getting them excited about the material, especially
from a distance, is challenging and could impact learning and results. Meet
them where they are by creating unique opportunities for them to
participate, engage, and practice. With MyLab®, use your experiences to
combine interactive content with data-driven guidance to capture your
students’ attention through every lecture and assignment. And make
their lives even easier by moving your course into your institution’s
<a href="#">day-one access</a> model. With this simple change, you can
ensure all your students have the same opportunity to succeed right from the
start at a price they can afford.
</p>
<h2>Login</h2>
<form id="contact-us" onsubmit="return validateForm()" method="post">
<p>
<strong>Fields marked with asterisk (<span class="span">*</span>) are
mandatory.</strong>
</p>
<div class="form-control">
<label for="firstname">Full Name:<span class="span">*</span></label>
<input type="text" name="firstname" id="firstname" autocomplete="name" aria-required="true">
</div>
<div class="form-control">
<label for="password">Password:<span class="span">*</span></label>
<input type="password" id="password" autocomplete="current-password" name="password" aria-required="true">
</div>
<input name="submit" id="submit" type="submit" value="Submit">
</form>
function validateForm() {
const firstname = document.getElementById('firstname').value;
const email = document.getElementById('password').value;
let errorMessage = '';
let focusField = null;
if (!firstname) {
errorMessage += 'Please fill out the Full Name field.\n';
if (!focusField) {
focusField = document.getElementById('firstname');
}
}
if (!email) {
errorMessage += 'Please fill out the Password field.\n';
if (!focusField) {
focusField = document.getElementById('password');
}
}
if (errorMessage) {
alert(errorMessage);
if (focusField) {
focusField.focus();
}
return false;
}
alert('Login successfully!');
window.location.href = 'https://accessibility.pearson.com/'; // Change the URL as needed
return false;
}
MyLab
Engaging students and getting them excited about the material, especially from a distance, is challenging and could
impact learning and results. Meet them where they are by creating unique opportunities for them to participate,
engage, and practice. With MyLab®, use your experiences to combine interactive content with data-driven guidance to
capture your students’ attention through every lecture and assignment. And make their lives even easier by
moving your course into your institution’s day-one access model. With this simple change, you
can ensure all your students have the same opportunity to succeed right from the start at a price they can afford.
