What is the difference between semantics and…

Semantics helps machines (browsers, parsers, search engine robots) understand the structure and meaning of content. Accessibility (a11y) aims to make content understandable and usable for people with various physical or cognitive limitations who use assistive technologies.

Semantic tags

Using semantic HTML tags such as <article>, <nav>, <aside>, <footer>, <h1>-<h6> gives meaningful significance to page elements. For example:

<article>
  <h2>Article Title</h2>
  <p>Article text...</p>
</article>

This helps browsers correctly interpret the document structure.

Accessibility (a11y)

Accessibility includes many aspects:

Semantics: Proper use of semantic tags is already part of accessibility, as it helps assistive technologies (screen readers) understand the structure and purpose of elements.
ARIA attributes: Additional attributes such as aria-label, aria-describedby, aria-hidden, role provide extra information for assistive technologies when HTML semantics are insufficient.
```
<button aria-label="Close dialog">
  <img src="close.svg" alt="">
</button>
```
Contrast: Sufficient contrast between text and background for people with visual impairments.
Keyboard navigation: Ability to navigate the page and interact with elements using only the keyboard.
Alternative text for images (alt): Description of the image content for users who cannot see it.
```
<img src="cat.jpg" alt="Black cat sleeping on the windowsill.">
```
Heading structure: Logical hierarchy of headings (<h1> - <h6>) for easy navigation with screen readers.

Relationship

Semantics is an important foundation for accessibility. A well-structured page using semantic elements is much easier to make accessible. However, semantics alone are not enough for full accessibility – additional measures such as ARIA attributes, focus management, and ensuring sufficient contrast are often required.

Aspect	Semantics	Accessibility (a11y)
Goal	Assigning meaningful value to elements	Ensuring understanding and usability of content by all
Tools	HTML tags (`<nav>`, `<article>`, `<h1>`, etc.)	Semantics, ARIA, contrast, focus, `alt` text, etc.
User	Browsers, parsers, search engines	People with various needs, assistive technologies

What is the difference between semantics and accessibility (a11y)?