ARIA Landmarks and Semantic HTML in Plain English

Imagine a book with no table of contents, no chapter titles, no page numbers, and no index. Every page looks the same. The content might be excellent, but the only way to find anything is to start at the beginning and read until you hit it. Now imagine that the publisher had all of those navigational aids available, for free, and chose to leave them out. That is, structurally, what most websites do.

I want to explain semantic HTML and ARIA landmarks in plain English, because the jargon makes a simple idea sound complicated, and the simple idea is this: HTML has words for the parts of a page, and you should use them.

HTML gives you two kinds of containers. One kind means something. A nav element means “this is navigation.” A main element means “this is the main content — the reason the page exists.” A header is the banner at the top, a footer is the stuff at the bottom, an aside is a sidebar, a section is a titled chunk of the whole. Then there is the other kind: the div, which means nothing at all. A div is just a box. It says “here is a group of things” and refuses to say what they are. Both kinds look identical on screen, because appearance is CSS’s job. The difference is entirely in what the page says about itself.

Who reads what a page says about itself? Software. A screen reader — the tool blind users browse with — collects these meaningful regions and offers them as a menu. Its user can jump straight to the navigation, or straight to the main content, or straight to the search, the way you or I would glance at a page and instantly see where everything is. That glance is the thing to appreciate here. Sighted people get the structure of a page for free, through vision, in a fraction of a second. Semantic elements are how everyone else gets the same map. Build your page out of divs alone and the map is blank: the software knows there are boxes inside boxes, hundreds of them, and nothing more. Developers call this div soup, and the name is apt. Everything is in the pot; nothing is labeled.

So where does ARIA fit in? ARIA is a system of attributes for describing what things are when the HTML can’t say it. You can put role=“navigation” on a div and screen readers will treat it as navigation. The landmark roles — banner, navigation, main, complementary, contentinfo, search — correspond almost exactly to the semantic elements I listed above. Which raises an obvious question: if nav already means navigation, why does role=“navigation” exist? History, mostly. ARIA arrived when the web was already full of div soup and needed a way to retrofit meaning onto pages nobody was going to rewrite. It’s a patch kit for markup that can’t express what it means.

That’s why the accessibility community’s first rule of ARIA is the one that surprises everyone: don’t use ARIA. Not literally never — but if a native HTML element already expresses the meaning, use the element instead of decorating a div. The native element gives you the meaning plus correct built-in behavior, in fewer characters. Writing