https://localghost.dev/2021/06/the-right-tag-for-the-job-why-you-should-use-semantic-html/ Skip to main content Localghost Toggle dark mode [ ] * Blog * Projects * Speaking The right tag for the job: why you should use semantic HTML 6 Jun 2021 Tags: * html * accessibility I've come across a lot of websites in my career (and in daily browsing) that are straight-up inaccessible. If you've ever worked on a project that is riddled with accessibility issues, you'll know that fixing these problems is a mammoth task - it needs time, it needs people, it needs prioritisation… it costs money, basically. As I mentioned in my blog post 7 myths designers and developers believe about web accessibility, retrofitting accessibility is hard. The key is to start out with the right tools for the job - or rather, the right tags for the job. In every website, underneath the layers of CSS, the bloated frameworks, the 45945 API calls, there's good old HTML, and that's the key to accessible websites. Specifically, semantic HTML. Semantic HTML conveys meaning Semantics is the study of meaning, and semantic HTML is exactly that - HTML tags that convey meaning. They tell the browser - and assistive technology such as screenreaders - about the structure of the page, and how it should behave when you interact with those elements. A button should let you click on it. An ordered list should have numbers. Sighted people rely on visual information to tell them about the structure of a page. Based on our prior knowledge of UI conventions, we can identify where a header is, which parts of the page are buttons or form elements, and what the title of the page is, for example. But if you don't get that visual information, how can you tell what's on the page? Assistive technology such as screenreaders will take the HTML markup of the page and present it to the user either by reading it out audibly, or sending the output to something like a braille display. They'll use the different types of HTML tags in the document to present structured information to the user, allowing them to navigate by headings, or cycle through the links in the page. So it matters what HTML tags we use, to make sure the screenreaders get the complete picture. Example: a non-semantic news site Take this mocked-up news site (as you can see, graphic design is my passion). I've built it using mostly
elements, with a couple of

s as I wanted some nice big headings. My menu at the top is a series of
s containing links, and the footer at the bottom is the same. See the Pen Semantic HTML blog post example: no semantics}} by Sophie Koonin (@sophiekoonin) on CodePen. If you're a sighted user like me, it looks perfectly fine. I can see a menu, a header, some titles and a footer. The byline and image caption is nicely italicised, and there are some nice buttons and fancy SVG checkboxes on the cookie banner. But let's take a look at this page from the perspective of assistive tech, which relies on the underlying HTML markup to establish the structure of the document. I'm using the screenreader software VoiceOver, which is built into MacOS, but if you're on Windows you can use NVDA which is free to download. Landmarks Screenreader software such as VoiceOver, JAWS and NVDA provides a way for users to navigate to different sections on the page based on landmarks. So, you could skip directly to the footer, or directly to the main part of the site. This relies on these landmarks being signposted through semantic tags such as
,
and