Bits of .NET

♿ ARIA Roles = Better Accessibility

HTML is semantic. ARIA roles add more meaning. Screen readers understand, accessibility improves.

📝 ARIA Roles

<!-- Landmark Roles -->
<header role="banner"></header>
<nav role="navigation"></nav>
<main role="main"></main>
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>

<!-- Widget Roles -->
<div role="button" tabindex="0">Click me</div>
<div role="checkbox" aria-checked="false">Check me</div>
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
<ul role="tablist">
    <li role="tab" aria-selected="true">Tab 1</li>
    <li role="tab" aria-selected="false">Tab 2</li>
</ul>

<!-- Content Roles -->
<img role="img" alt="Description" src="">
<article role="article"></article>
<section role="region" aria-label="Section title"></section>

<!-- Live Regions -->
<div role="status" aria-live="polite">Status message</div>
<div role="alert" aria-live="assertive">Alert message</div>
<div role="log" aria-live="polite">Log messages</div>

<!-- Dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Dialog Title</h2>
</div>

🎯 ARIA Attributes

<!-- aria-label -->
<button aria-label="Close dialog">×</button>
<nav aria-label="Main navigation"></nav>

<!-- aria-labelledby -->
<div role="dialog" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Confirm Action</h2>
</div>

<!-- aria-describedby -->
<input aria-describedby="email-help">
<div id="email-help">We'll never share your email</div>

<!-- aria-hidden -->
<div aria-hidden="true">Hide from screen readers</div>

<!-- aria-expanded -->
<button aria-expanded="false">Expand</button>

<!-- aria-controls -->
<button aria-controls="dropdown-content">Toggle</button>

<!-- aria-disabled -->
<button aria-disabled="true">Disabled</button>

<!-- aria-invalid -->
<input aria-invalid="true">

<!-- aria-required -->
<input aria-required="true">

<!-- aria-hidden (decorative) -->
<img aria-hidden="true" alt="" src="">


- Use semantic HTML when possible
- Add ARIA roles for custom elements
- Test with screen readers
- Use aria-label for button icons
- Use aria-describedby for help text

💡 ARIA Tips

• Use semantic HTML when possible
• Add ARIA roles for custom elements
• Test with screen readers
• Use aria-label for button icons
• Use aria-describedby for help text