Accessibility

Designing HTML with accessibility in mind is essential. Accessible HTML ensures that people with disabilities can use and benefit from the web. This includes users who are blind or visually impaired, those with hearing loss, and individuals with a wide range of other disabilities.

Unfortunately, accessibility often doesn’t get the attention it deserves—it’s not seen as “cool” compared to other topics. But consider this: what if someone can’t see your page yet still wants to consume its content? They rely on assistive technologies like screen readers, which allow navigation without a mouse. You can even try one yourself—Google offers the free ChromeVox extension for Chrome. Accessibility also means making it easy for tools to select elements and navigate pages efficiently.

Many websites and web apps are not built with accessibility as a primary goal. Sometimes version 1 is released without accessibility features, but improvements can always be made later. The earlier you implement accessibility, the better—but it’s never too late. In fact, in many countries, government and public organization websites are legally required to be accessible.

So, what does it mean to make HTML accessible? Let’s explore the key practices:

1. Use Semantic HTML

Semantic HTML provides meaning to your content, which is critical for assistive technologies.

  • Headings: Use proper heading structure. Start with <h1> for the main title, then nest <h2>, <h3>, and so on to reflect hierarchy—like a tree structure.
  • Text emphasis: Use <strong> and <em> instead of <b> and <i>. While they look similar visually, <strong> and <em> carry semantic meaning.
  • Lists: Screen readers recognize lists and allow users to navigate them easily.
  • Tables: Always include a <caption> to describe the table’s content.

Code Block Loading...

2. Use alt Attributes for Images

Every image must have an alt attribute describing its content. This is required by the HTML standard and ensures your code validates.

Code Block Loading...

Bonus: Alt text also improves SEO, giving search engines more context.

3. Use the role Attribute

The role attribute assigns specific roles to elements, helping assistive technologies interpret them correctly. Examples include navigation, button, dialog, form, and many more.

However, you don’t need to add roles to semantic elements like <nav>, <button>, or <form>—screen readers already understand them. Roles are most useful when using non-semantic elements.

Code Block Loading...

4. Use the tabindex Attribute

tabindex controls the order in which elements are selected when navigating with the Tab key.

  • By default, only links and form elements are tabbable.
  • tabindex="0" makes an element tabbable.
  • tabindex="-1" removes an element from tab navigation.

Code Block Loading...

5. Use ARIA Attributes

ARIA (Accessible Rich Internet Applications) adds semantics to elements, making them more accessible.

5.1 aria-label

Provides a descriptive label for an element.

Code Block Loading...

5.2 aria-labelledby

Associates an element with another element that labels it.

Code Block Loading...

5.3 aria-describedby

Associates an element with another element that provides additional description.

Code Block Loading...

5.4 aria-hidden

Hides elements from screen readers. Useful for purely decorative items like logos or theme selectors.

Code Block Loading...

Key takeaway: Accessibility isn’t optional—it’s fundamental. By using semantic HTML, proper attributes, and ARIA roles, you make your content usable for everyone, regardless of ability.