37. Accessibility Basics (ARIA and Semantic Tags)
Web accessibility (A11y) means designing websites that people with disabilities can use. HTML is the first step toward building accessible sites.
37.1 The Role of Semantic HTML
Screen readers rely on semantic tags to interpret the page structure.
- If you use a
<nav>tag, a screen reader user can jump straight to the navigation. - If you only use
<div>elements, the screen reader sees generic boxes, making navigation difficult.
37.2 ARIA Attributes (Accessibility Rich Internet Applications)
ARIA attributes provide extra semantic meaning to non-semantic or dynamic elements.
ARIA Roles
If you must use a <div> for a button, you can give it a role to tell assistive technology what it is.
html
Click Me
ARIA States and Properties
aria-label is used to provide a descriptive label for elements that lack visible text, such as icon-only buttons.
html
Golden Rule of ARIA: If a native HTML element (like <button>) does the job, use it instead of trying to add ARIA to a <div>.