Bits of .NET

♿ Accessibility = Web for Everyone

Web is for everyone. Accessibility ensures equal access. Screen readers, keyboard navigation, inclusive design.

📝 Essential Accessibility

<!-- Semantic HTML -->
<!-- Use correct elements -->
<header></header>
<nav></nav>
<main></main>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

<!-- ARIA Attributes -->
<button aria-label="Close dialog">×</button>

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

<nav aria-label="Main navigation"></nav>

<!-- Landmarks -->
<header role="banner"></header>
<main role="main"></main>
<footer role="contentinfo"></footer>

<!-- Focus Management -->
<div tabindex="0">Focusable element</div>
<div tabindex="-1">Programmatically focusable</div>

<!-- Skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Image alt text -->
<img src="photo.jpg" alt="Description of image">
<img src="decorative.jpg" alt="" role="presentation">

🎯 Advanced Accessibility

<!-- Keyboard Navigation -->
<div role="button" tabindex="0" 
     onkeydown="if(event.key==='Enter' || event.key===' ') handleClick()" 
     onclick="handleClick()">Custom Button</div>

<!-- Live Regions -->
<div aria-live="polite" aria-atomic="true">Update message</div>
<div aria-live="assertive">Important alert!</div>

<!-- Form Labels -->
<label for="email">Email Address</label>
<input type="email" id="email" required aria-describedby="email-help">
<div id="email-help">We'll never share your email</div>

<!-- Required fields -->
<input type="text" required aria-required="true">

<!-- Error messages -->
<input type="text" aria-invalid="true" aria-describedby="error-message">
<div id="error-message" role="alert">Please enter a valid email</div>

<!-- Color contrast -->
/* Ensure 4.5:1 contrast ratio for text */

<!-- Focus indicators -->
*:focus {
    outline: 3px solid #005a9c;
    outline-offset: 2px;
}

<!-- Screen reader only -->
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

💡 Accessibility Checklist

• Use semantic HTML
• Provide alt text for images
• Ensure keyboard navigation
• Maintain color contrast
• Label form elements
• Use ARIA roles when needed
• Test with screen readers
• Provide captions for media