Creating pages “mobile first” is a technique that’s very familiar to front end engineers. A few extra considerations could transform this technique into “accessibility first” while still maintaining the principles of “mobile first”. Primarily, “accessibility first” is using the right semantic structure to outline your page from the outset. This will make your site understandable […]
Creating pages “mobile first” is a technique that’s very familiar to front end engineers. A few extra considerations could transform this technique into “accessibility first” while still maintaining the principles of “mobile first”. Primarily, “accessibility first” is using the right semantic structure to outline your page from the outset. This will make your site understandable for everyone, using the broadest range of devices.
The use of ARIA landmark roles supports keyboard navigation, and provides a way to understand the structure of a web page for screen reader users. Using landmarks, assistive technology users can quickly navigate around sections of a web page.
You can deliberately assign landmarks (eg
role="main") or why not get them for free by using the HTML elements
<form> tags will need the addition of an
aria-label to get a default ‘role’ assigned. Aim to have your entire page ‘chunked-up’ using landmarks to give assistive technology users the best access to your site.
(Here, I’ll be using the scenario of a ‘designed’ page being handed over to engineers). Firstly, consider the purpose of a web page:
Which part of the design contains the primary aim?
<main>tag (it will automatically acquire the default landmark role of “main”).
What is the purpose of everything else on the page?
<section>tags (with appropriate aria-labels).
<footer>tags are used.
<div>for a large area or to contain a specific context of a page: consider using the above tags instead.
<main>tag contains the page heading, subscription choices and the associated form elements.
<form>tag contains the actual choices and selection form elements (should also have an aria-label)
Image above: A page design, marked up with HTML sectioning elements
<nav>nav</nav> <main> <h1>the page heading</h1> <form aria-label="choose subscription"> the form, with valid form elements (any fancy design enhancements should happen after the basic structure is correct) </form> </main> <section aria-label="compare our memberships">comparison table</section> <footer>footer</footer>
This almost seems too simple. But start with the right semantic markup, sprinkle some appropriate aria-labels, and you’ll have a very good starting point for creating an accessible page that’s understandable and usable by everyone, regardless of different abilities.