X marks the spot: Landmark elements
February 5, 2024
Imagine you had to describe the way through a building to someone without being able to point out certain things that the person could use for orientation:
“First you go through the thing to get into the thing. Take the thing upstairs because the other thing is broken. After you have gone past a row of things, there is a thing that you have to climb up. Once at the top, press the thing so that you can find the thing with the things more easily.”
You’ll have a rough idea of what to do, but you’ll have to work your way up most of the way by trial and error. But what if you had a concrete description of the landmarks?
“First, go through the door to get to the entrance hall. Take the stairs up because the elevator is broken. After you pass a row of windows, there is a ladder that you have to climb up. Once at the top, press the light switch to make it easier to find the box of photo albums.”
It should now be very clear where you need to go and what you need to do to achieve your goal. This example can easily be transferred to websites, as many websites swim in a soup.
ARIA, Accessible Rich Internet Applications, “is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.” [MDN]. In this detailed article Steve Frenzel looks in depth at landmarks in HTML and ARIA and the benefits they can bring, among others, to folks using screen readers.
