HTML ARIA Accessibility

1<!-- aria-label: Adds a label for screen readers when text isn't visible -->
2<button aria-label="Close menu">X</button>
3<button aria-label="Search">
4      <!-- Screen reader says "Search button" instead of "magnifying glass" -->
5</button>
6
7<!-- aria-hidden: Hides decorative elements from screen readers -->
8<div aria-hidden="true">
9    <img src="decoration.png" alt="">  <!-- Screen reader ignores this -->
10</div>
11
12<!-- aria-expanded: Tells if a collapsible section is open/closed -->
13<button aria-expanded="false" onclick="toggleMenu()">Menu</button>
14
15<!-- aria-describedby: Links to an element that describes this one -->
16<input type="password" aria-describedby="password-help">
17<span id="password-help">Password must be 8+ characters with a number</span>
18
19<!-- role: Tells screen reader what an element does -->
20<nav role="navigation">Main menu</nav>
21<main role="main">Main content</main>
22<button role="button">Click me</button>
23<div role="alert">Important message!</div>
24<div role="status">Page loaded successfully</div>
25
26<!-- aria-live: Announces dynamic content changes -->
27<div aria-live="polite">New message received</div>  <!-- Waits for user to finish -->
28<div aria-live="assertive">Urgent: Your session will expire soon</div>  <!-- Interrupts immediately -->
29
30<!-- aria-required: Tells screen reader field is required -->
31<input type="text" aria-required="true" required>
32
33<!-- aria-invalid: Tells screen reader field has error -->
34<input type="email" aria-invalid="true">

1<form>
2    <label for="name">Full Name:</label>
3    <input type="text" id="name" required aria-required="true">
4    
5    <label for="email">Email Address:</label>
6    <input type="email" id="email" required aria-describedby="email-help">
7    <span id="email-help">Enter your valid email address (example: name@domain.com)</span>
8    
9    <button aria-label="Submit the registration form">Submit</button>
10</form>