TYPO3: What is important for accessibility

As a digital agency from Hanover, we are focused on the current topic of accessibility. Here are the most important facts about the subject.

Developers often talk about ARIA roles and attributes as if they were the magic solution for web accessibility. Some believe that everything can be solved with them. Others are convinced: nothing works without ARIA. Neither is true.

What is ARIA anyway?

ARIA stands for "Accessible Rich Internet Applications." The specification originates from the Web Accessibility Initiative (WAI) and aims to make web pages easier to access for people with disabilities, especially blind and visually impaired users. More specifically, ARIA attributes help screen readers better understand the content and operation of the site. Since 2014, ARIA has been an official web standard of the W3C.

In short: ARIA transforms a static website into an interactive application. Whenever users interact with content—such as toggling visibility of sections, browsing through a slider, or filling out forms—ARIA precisely describes what happens and what the current state is.

ARIA consists of two building blocks: roles and attributes. Roles broadly categorize an element, while attributes refine this classification. Anyone serious about accessibility must be familiar with both.

The Four ARIA Roles

1. Landmark Roles

Landmark roles denote key areas of a page, such as navigation, main content, or search. They help blind users quickly jump between important sections without having to navigate through all the content. Examples: <header>, <footer>, <main> – previously only with ARIA roles, now often as standalone HTML elements.

2. Widget Roles

Widget roles describe interactive elements such as sliders, accordions, or progress indicators. Important: Anyone assigning a widget role to a component must also ensure keyboard accessibility – often with additional JavaScript.

3. Document Structure Roles

These roles structure the content: paragraphs, headings, or images. Many are now provided directly through correct HTML markup: <p>, <h1>, <img>. The role makes clear what function an element serves.

4. Live Regions

Live regions mark areas whose content changes dynamically – for example, hints in forms or running timers. Screen readers can prioritize these changes and inform users immediately.

ARIA-Attribute: Properties and States

ARIA attributes provide additional information about individual elements. There are two types:

States: They can change, for example aria-checked on a checkbox.
Properties: They usually remain the same, for example aria-labelledby for assigning a text alternative.
Both variants are used with the same syntax on the element.

Five Rules for the Purposeful Use of ARIA

• Only insert where HTML is not sufficient!
  If there is a suitable HTML element or attribute, no additional ARIA is needed.
• Don't change semantics unnecessarily!
  Leave elements as they are meant to be.
• Interactive ARIA elements must be operable by keyboard!
  Otherwise, they do not help anyone.
• Do not hide focusable elements!
  What can be achieved must also remain visible.
• Every focusable element needs an accessible name!
  Only then does the user understand the purpose and function.

Practical Tips
Sometimes an element needs to be invisible to screen readers but remain visible in the layout. Then aria-hidden="true" helps.
Complex components like sliders or accordions usually require widget roles and solid implementation of usability. The W3C provides good examples and guidelines.