Maybe Don’t Name That Landmark

TL;DR: You probably don’t need to name that landmark.

Illustrated map of Ngong Ping tourist village showing the cable car and some attractions, along with a tactile map and braille labels.
The Ngong Ping Village tourist trap on Hong Kong’s Lantau Island. All the pricey tourist spots have visible named landmarks on the map, but the ones people generally care about (bathrooms, food, that lovely tea house) are not. The accompanying tactile map was much more useful as a result.


The following landmarks should appear only once per page (otherwise they may not work quite as you expect):

You shouldn’t give them accessible names. The context and uniquity (uniqueness?) are sufficient.

For the remainder of landmarks, probably don’t give them an accessible name unless users have said it’s valuable to them.

If you give those regions an accessible name anyway, understand that using aria-label introduces localization risk.

Some elements aren’t landmarks until you give them an accessible name (same with their roles). In that case, you should consider if it warrants being a landmark or is instead adding noise. My experience says that once you get past 5 or 6 landmarks, they are adding noise. This is for generic users on generic sites, so trained users on familiar pages may rely on many landmarks for a page (which would be confirmed by those users).


A <nav> / navigation on its own needs no accessible name. Stuffed in a <header>, it still needs none. Add a second <nav>, but in the <footer>, no name needed. The context is clear.

Once put two instances of a landmark in the same “scope” (within the same landmark or absence of landmark), then you might want to name at least one of them. If you have a <nav> in the <header> and also another <nav> in the same <header>, probably give at least one of them a brief name.

Real Example

Over on hell-site, Ashlee Boyer let Vercel know its navigation had a curious accessible name (don’t judge Ashlee, Vercel chooses to stay there so that was her avenue to let them know):

 aria-label="Navigation header with 5 links and 1 dropdown menu with links">

There are three menus and two links, so this was a lie. It was verbose. It used lingo (“dropdown“). It was also completely unnecessary since there is only one other navigation region on the page — in the <footer>:

 aria-label="Vercel Directory"

The redundant and unnecessary navigation role is a nice touch.

Anyway, I used past tense for some of the example because Vercel promptly deployed an update to its primary navigation:


I would not have let that out the door, but as Léonie has said for at least a decade, It doesn’t have to be perfect, it just has to be a little bit better than yesterday.

I have no idea if that first cut was from Vercel’s production-ready v0 LLM, but for the sake of some human who might otherwise be embarrassed, I hope so.

This shows how verbose the aria-label is along with its inaccuracy. All I did was Tab to the first navigation item. The first two seconds of this video is a Captain Picard facepalm because the logo is a link with aria-expanded (which eats right-clicks in order to work).

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>