What is the difference between ARIA and semantic HTML?
In short and in plain language
Good HTML says by itself what a part is. A button is then a button. A heading is a heading. A screen reader knows this on its own.
ARIA is an add-on for hard parts, such as tabs or menus. ARIA only adds meaning. You must build the controls yourself.
The rule is: no ARIA if a normal element does the job.
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.