What is the difference between ARIA and semantic HTML?

Semantic HTML conveys meaning directly through native elements: a <button> is a button to the screen reader, a <nav> is navigation, an <h2> is a second-level heading. These elements bring role, state and keyboard behavior with them out of the box, with no extra code.

ARIA (Accessible Rich Internet Applications) is a supplement for cases where native HTML is not enough, such as complex widgets like tabs, accordions, dropdowns or live regions. ARIA only adds semantics, it changes no behavior: a <div> marked with role="button" must still implement keyboard operation and focus itself.

The first rule of ARIA is therefore: do not use ARIA if a native element does the job (Source: W3C WAI). How we apply this in practice, we show in our accessible web development.