{"id":993427,"date":"2026-05-29T11:45:20","date_gmt":"2026-05-29T11:45:20","guid":{"rendered":"https:\/\/ifdb.io\/semantic-html-as-the-foundation-of-accessibility\/"},"modified":"2026-11-10T13:19:49","modified_gmt":"2026-11-10T13:19:49","slug":"semantic-html-as-the-foundation-of-accessibility","status":"publish","type":"post","link":"https:\/\/ifdb.io\/en\/semantic-html-as-the-foundation-of-accessibility\/","title":{"rendered":"Semantic HTML as the foundation of accessibility"},"content":{"rendered":"\n

When developers ask me about accessibility, they usually ask about ARIA attributes. They rarely ask about the correct HTML element. That\u2019s the wrong order \u2013 and one of the most common reasons why custom components fail audits. Semantic HTML<\/strong> isn\u2019t just some old-fashioned detail from before the framework era; it\u2019s the foundation of every accessible website. If you choose the right element, you get keyboard navigation, focus behaviour, screen reader support and form integration as standard. Those who ignore it div<\/code>and work with building blocks plus ARIA end up laboriously recreating the same functionality \u2013 usually incompletely. In this guide, I\u2019ll show you, using specific code comparisons, why semantic HTML renders around 90 per cent of all ARIA attributes superfluous.<\/p>\n\n

What defines semantic HTML<\/h2>\n\n

Semantic HTML means choosing elements not based on their appearance, but on their meaning. A button is a `<button><\/code>button`, a list is a `<ul><\/code>list` or `<ol><\/code>ul`, a main heading is a `<h1><\/code>h1` and not a styled `<div><\/code>p`. This meaning is invisible to sighted users, but is crucial for assistive technologies: a screen reader distinguishes between a button and a paragraph, navigates via headings and landmarks, and announces lists as such. Generic containers such as <div><\/code> or <span><\/code>say nothing about the function of their content \u2013 they are mere containers with no semantic value.<\/p>\n\n

Why semantic HTML makes 90 per cent of ARIA attributes redundant<\/h2>\n\n

This observation is not my own, but is stated in a similar vein in the W3C\u2019s ARIA Authoring Practices: if a native HTML element provides the necessary semantics and behaviour, use that element instead of ARIA. Seven specific comparisons illustrate what this means in practice.<\/p>\n\n

Button<\/h2>\n\n
<!-- Mit ARIA -->\n<div role=\"button\" tabindex=\"0\"\n     onclick=\"speichern()\"\n     onkeydown=\"if(event.key==='Enter')speichern()\">\n  Speichern\n<\/div>\n\n<!-- Semantisch -->\n<button onclick=\"speichern()\">Speichern<\/button><\/code><\/pre>\n\n
The native <button><\/code> element provides the following by default: focusability, keyboard navigation using the Enter and Spacebar keys, default focus style, correct role for screen readers, and form integration. With the div<\/code>-construct, you have to implement all of this yourself \u2013 and usually end up overlooking at least one aspect.<\/p>\n\n
Navigation<\/h2>\n\n
<!-- Mit ARIA -->\n<div role=\"navigation\" aria-label=\"Hauptnavigation\">\n  <div><a href=\"\/\">Start<\/a><\/div>\n  <div><a href=\"\/produkte\">Produkte<\/a><\/div>\n<\/div>\n\n<!-- Semantisch -->\n<nav aria-label=\"Hauptnavigation\">\n  <ul>\n    <li><a href=\"\/\">Start<\/a><\/li>\n    <li><a href=\"\/produkte\">Produkte<\/a><\/li>\n  <\/ul>\n<\/nav><\/code><\/pre>\n\n
The `landmark<nav><\/code>` element is a landmark that screen reader users can navigate to using a single keyboard shortcut. The `count<ul><\/code>` attribute announces the number of items. The `divdiv<\/code>`-based approach cannot easily achieve this with ARIA \u2013 and even then, the list announcements are missing.<\/p>\n\n
Accordion<\/h2>\n\n
<!-- Mit ARIA (vereinfacht) -->\n<div role=\"button\" aria-expanded=\"false\"\n     aria-controls=\"panel-1\" tabindex=\"0\">\n  Details\n<\/div>\n<div id=\"panel-1\" role=\"region\" hidden>\n  Inhalt\n<\/div>\n\n<!-- Semantisch -->\n<details>\n  <summary>Details<\/summary>\n  Inhalt\n<\/details><\/code><\/pre>\n\n
The pair of elements<details><\/code> and<summary><\/code> is a fully functional native accordion \u2013 complete with keyboard controls, toggle behaviour and state notifications. Anyone who isn\u2019t aware of this ends up recreating the component in JavaScript, often forgetting to include the aria-expanded<\/code>-update.<\/p>\n\n
Practical tip:<\/strong> You can find out how your own website is performing in just a few minutes with Access Score\u2019s free BFSG Check<\/a> \u2013 no registration required, and with an honest assessment based on WCAG 2.2.<\/p>\n\n
Lists<\/h2>\n\n
<!-- Falsch -->\n<div class=\"item\">Erstes Element<\/div>\n<div class=\"item\">Zweites Element<\/div>\n<div class=\"item\">Drittes Element<\/div>\n\n<!-- Semantisch -->\n<ul>\n  <li>Erstes Element<\/li>\n  <li>Zweites Element<\/li>\n  <li>Drittes Element<\/li>\n<\/ul><\/code><\/pre>\n\n
A screen reader announces the <ul><\/code>list as \u2018a list with three items\u2019 and allows the user to navigate between the list items. The div<\/code>alternative version sounds like three unrelated sentences.<\/p>\n\n
Heading structure<\/h2>\n\n
<!-- Falsch (rein optisch) -->\n<div class=\"title-large\">Unsere Produkte<\/div>\n<div class=\"title-medium\">Kategorie A<\/div>\n\n<!-- Semantisch -->\n<h1>Unsere Produkte<\/h1>\n<h2>Kategorie A<\/h2><\/code><\/pre>\n\n
The heading hierarchy is to screen reader users what skimming is to sighted people \u2013 the only way to quickly get their bearings. They can use keyboard shortcuts to navigate between headings. Without proper H elements, this navigation is completely lost.<\/p>\n\n
Form Labels<\/h2>\n\n
<!-- Falsch -->\n<span>E-Mail-Adresse<\/span>\n<input type=\"email\">\n\n<!-- Semantisch -->\n<label for=\"email\">E-Mail-Adresse<\/label>\n<input type=\"email\" id=\"email\"><\/code><\/pre>\n\n
The linked<label><\/code> element ensures that clicking on the label text focuses on the field \u2013 important for users with motor impairments. A screen reader automatically reads out the label when the field is focused. The span<\/code>-construction lacks both of these properties.<\/p>\n\n
Images<\/h2>\n\n
<!-- Falsch -->\n<div style=\"background-image: url(produkt.jpg)\"\n     aria-label=\"Produktfoto\"><\/div>\n\n<!-- Semantisch -->\n<img src=\"produkt.jpg\" alt=\"Produktfoto\"><\/code><\/pre>\n\n
An <img><\/code>element with a valid alt<\/code>attribute is correctly announced as an image by screen readers, loads as expected, and can be viewed or downloaded using browser tools. A photograph loaded as a background image is simply invisible for many of these purposes.<\/p>\n\n
An overview of the most important semantic elements<\/h2>\n\n
A concise overview, grouped by function:<\/p>\n\n
Category<\/th>Elements<\/th>Function<\/th><\/tr><\/thead>
Structure (Landmarks)<\/td>header, nav, main, aside, footer<\/td>Main sections of the page, navigable via screen reader shortcuts<\/td><\/tr>
Content sections<\/td>article, section<\/td>Subdivision of content<\/td><\/tr>
Headings<\/td>h1 to h6<\/td>Hierarchical structure<\/td><\/tr>
Lists<\/td>ul, ol, li, dl, dt, dd<\/td>Related lists<\/td><\/tr>
Interactive elements<\/td>button, a, input, select, textarea, label, details, summary, dialog<\/td>Native interaction with built-in accessibility<\/td><\/tr>
Tables<\/td>table, thead, tbody, tr, th, td, caption<\/td>Tabular data with cell mapping<\/td><\/tr>
Media<\/td>img, figure, figcaption, video, audio<\/td>Embedded content with alternatives<\/td><\/tr><\/tbody><\/table><\/figure>\n\n
Landmarks: How screen reader users navigate<\/h2>\n\n
<header><\/code><nav><\/code><main><\/code><aside><\/code><footer><\/code> <div><\/code>-As it is contained within a container, it forces the user to listen through the content sequentially. Important: it<main><\/code> must only appear once per page and identifies the actual main content \u2013 the content to which a skip link at the top of the page should lead. I have described how keyboard navigation and focus management work in general in the article \u2018Implementing Keyboard Navigation and Focus Management in accordance with WCAG<\/a>\u2019.<\/p>\n\n
When you really still need ARIA<\/h2>\n\n
The remaining ten per cent. If your HTML is semantically sound, ARIA is reserved for a small but important set of cases:<\/p>\n\n