Mengapa Accessibility Penting?
Web accessibility memastikan website dapat digunakan oleh semua orang, termasuk 15% populasi dunia yang memiliki disabilitas. Selain aspek moral, accessibility juga meningkatkan SEO dan user experience secara keseluruhan.
WCAG 2.1 Principles
- Perceivable: Informasi harus dapat dipersepsikan oleh semua user
- Operable: Interface harus dapat dioperasikan oleh semua user
- Understandable: Informasi dan UI harus dapat dipahami
- Robust: Content harus robust untuk berbagai assistive technologies
Semantic HTML
<!-- Good semantic structure -->
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
</main>
<aside aria-label="Related articles">
<h2>Related Content</h2>
</aside>ARIA Labels dan Roles
<!-- Form accessibility -->
<form>
<label for="email">Email Address</label>
<input
type="email"
id="email"
aria-describedby="email-help"
aria-required="true"
>
<div id="email-help">We'll never share your email</div>
</form>
<!-- Button with icon -->
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>
<!-- Custom dropdown -->
<div role="combobox" aria-expanded="false" aria-haspopup="listbox">
<input type="text" aria-autocomplete="list">
<ul role="listbox" aria-hidden="true">
<li role="option">Option 1</li>
</ul>
</div>Color dan Contrast
- Minimum contrast ratio 4.5:1 untuk normal text
- Minimum contrast ratio 3:1 untuk large text
- Jangan hanya mengandalkan warna untuk informasi
- Test dengan color blindness simulators
- Provide alternative indicators (icons, patterns)
Keyboard Navigation
// Focus management
const modal = document.getElementById('modal');
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
// Trap focus in modal
modal.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
if (e.shiftKey) {
if (document.activeElement === firstElement) {
lastElement.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastElement) {
firstElement.focus();
e.preventDefault();
}
}
}
});