Semantic HTML and ARIA (Accessible Rich Internet Applications) are both crucial tools for making web content accessible to all users, including those who rely on assistive technologies such as screen readers. 

Disclaimer: Please note that the content provided here is only a suggestion and does not constitute legal advice. Any liability in connection with the use of the information provided is excluded. No guarantee is given for the accuracy, completeness and up-to-dateness of the information. We advise you to seek legal advice if you have any uncertainties or questions.

Semantic HTML

Semantic HTML clearly states what kind of content an element displays. 

Let’s have a look at a navigation (menu) element: 

You could say the following which would work but it wouldn’t be semantic, because <div> tells nothing about its content: 

  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

For semantic HTML you would use: 

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

This explicitly says that the following content is set up to be a navigation. 

Another example would be a button element: 

When <div> is used, there is no inherent meaning or behavior. And although it also looks and works like a button, it lacks accessibility, keyboard support, and semantic meaning unless enhanced manually with ARIA roles and keyboard handlers.

<div class=”button”>
Click Me
</div>

For a clean, semantic HTML and accessible button you would use: 

<button> Click Me </button>

Important Note: If you need to navigate to another page (e.g., a "Contact us" page), you should use an <a> (anchor) element with an href attribute instead of a <button>.

A <button> is meant for actions like submitting a form or triggering JavaScript functionality, and it does not support the href attribute (which tells the browser where the link goes). For example:

<a class="button" href="/contact">Contact us</a>

Creating websites based on semantic HTML 

1. Improves Screen Reader Support: Semantic elements provide context to assistive technologies. For example, a screen reader can announce a <nav> element as a navigation region.
2. Provides better Keyboard Navigation: Browsers and assistive tools can enable better navigation because the structure of the website is clear and native HTML elements come with built-in accessibility features. For instance, a <button> is automatically focusable and clickable and has an implicit role of "button" for assistive tech.
3. Helps with SEO as it makes it easier for search engines to understand your website.

ARIA 

ARIA (Accessible Rich Internet Applications) is a set of roles and attributes that define ways to make web content and web applications more accessible, especially for dynamic content and custom components that do not use native HTML semantics. 

ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object. ARIA roles can be used to describe elements that don't natively exist in HTML or exist but don't yet have full browser support.

For example, you can give a container the role “Dialog” when you set it to be an overlay to ensure that assertive technologies understand that this module opens on top of the page content. 

ARIA attributes enable modifying an element's states and properties in regards to how assistive technology presents the content to website visitors. ARIA doesn't change anything about an element's function or behavior. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior, focus, and ARIA states.

A very common example would be ARIA labels. You can use ARIA labels to provide further information and describe the function or purpose of an element, e.g. for a Submit button in a form, you could use

<button aria-label="Submit the form">Submit</button> 

Another example, when you have an accordion the aria-expanded attribute indicates if a trigger is expanded or collapsed, and whether or not the controlled contents are displayed or hidden. But as mentioned above, this is only a description of the current status, but it does not provide the functionality of collapsing or expanding. 

In short: ARIA complements semantic HTML and is used where semantic HTML is not available or sufficient to ensure that the content and state of elements are easily understood by assertive technology to improve the accessibility of the website. So if you use the correct semantic HTML, you should not add any additional ARIA roles or attributes, e.g. for <button>, do not add role="button", as this is unnecessary and can even cause confusion.

We have already added ARIA roles and attributes to some of our templates and sections and are activley working on ensuring that they are pre-defined everywhere. 

We have also added Accessibility options to the container settings that allow you to set ARIA roles and labels which will be translated into the correct semantic HTML or ARIA roles and attributes.

Please note that it is crucial to use and implement ARIA correctly. Here are some guidelines that help you with the implementation:

• https://www.w3.org/WAI/ARIA/apg/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA