HTML5 and ARIA (Accessible Rich Internet Applications) provide technical specifications to help developers create more accessible sites.
Using HTML5 semantic elements
HTML5 has introduced semantic elements that clearly define the structure of a web page, improving accessibility for screen readers and assistive devices.
Structure Elements such as: header, footer, nav, section and article, are used to mark the various parts of the page. This facilitates content navigation for screen reader users.
<header>
<!-- Site header -->
</header>
<nav>
<!-- Main navigation -->
</nav>
<main>
<article>
<!-- Main content -->
</article>
</main>
<footer>
<!-- Page footer -->
</footer>
Furthermore, HTML5 enriches form accessibility through specific elements and attributes, such as with the for attribute, input types (email, tel, date) and attributes like placeholder and required.
Explicit Labels: Every input field should have an associated label, improving usability for users with assistive devices.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>ARIA to enhance accessibility
ARIA introduces attributes that can be added to HTML markup to provide additional information about roles, states and properties of elements, particularly useful in dynamic components.
ARIA Roles and Properties: use ARIA roles to define the role of elements (e.g. button, dialog) and properties like aria-labelledby and aria-hidden to improve accessibility.
<div id="modalDialog" role="dialog" aria-labelledby="dialogTitle" aria-modal="true">
<h2 id="dialogTitle">Dialog Title</h2>
<p>Dialog content...</p>
</div>The example defines a dialog that uses the aria-labelledby attribute to associate the title, located in an h2 element, with the dialog itself. Through the aria-modal="true" attribute, we focus attention by defining the modal and making it accessible to the end user.
Let's always remember to verify that the site is fully accessible via keyboard.
Focus Order: Control the focus order with tabindex during keyboard navigation.
The focus order determined by the tabindex attribute establishes the sequence in which elements of a web page receive focus when the user navigates via keyboard, particularly using the Tab key. The value of tabindex can directly influence the accessibility and usability of a website.
<a href="https://theartcode.dev" tabindex="1">View example</a>
<button tabindex="2">Click</button>The link has a tabindex="1", which means that when you start navigating the page using the Tab key, this link will be the first element to receive focus.
Page Language: Specify the page language with the lang attribute in the html element. This helps screen readers use the correct pronunciation, improving the experience for users.
<html lang="it">Titles and Alternative Texts: Use the title attribute to provide additional context and the alt attribute to describe images.
<img src="logo.png" alt="Logo label">
<a href="document.pdf" title="Download the PDF document">Document</a>CSS language helps us with accessibility through the :focus-within property: use :focus-within to improve the visibility of elements with focus, essential for keyboard navigation.
.artcode__form-group:focus-within {
border: 2px solid blue;
}Additionally, we encourage the use of tools like Accessibility Insights, Lighthouse in Google Chrome, or axe DevTools to test and identify accessibility issues, ensuring your site complies with WCAG guidelines.