Mengapa Aksesibilitas Web Lebih Penting dari yang Anda Kira_

Pendahuluan

Aksesibilitas Web (biasa disingkat sebagai A11y) adalah praktik rekayasa perangkat lunak untuk membangun situs web agar dapat digunakan oleh sebanyak mungkin orang. Praktik ini ditujukan bagi penyandang disabilitas penglihatan permanen, kehilangan pendengaran, gangguan kognitif, hambatan motorik, maupun batasan sementara seperti seseorang yang tangannya sedang cedera, hingga keterbatasan situasional seperti layar ponsel yang silau di bawah terik matahari.

Sering kali pengembang memperlakukan aksesibilitas sebagai fitur sekunder atau daftar centang yang membosankan di akhir proyek. Pada kenyataannya, membangun antarmuka yang aksesibel adalah standar teknis yang mendasar. Mengabaikan A11y tidak hanya mengisolasi sebagian besar basis pengguna Anda, tetapi juga berdampak buruk pada peringkat SEO dan menghadapkan bisnis Anda pada risiko hukum.

1. Elemen Semantik vs Div Generik

Fondasi mutlak dari aksesibilitas web adalah penggunaan elemen semantik bawaan HTML. Elemen bawaan memiliki perilaku browser yang sudah terintegrasi, manajemen fokus otomatis, dan peran (role) terdefinisi yang dikomunikasikan secara langsung ke teknologi asisten (seperti pembaca layar / screen readers).

Kebiasaan buruk yang sering ditemui adalah menggunakan kontainer <div> generik yang dihias sebagai tombol dengan penanganan fungsi klik khusus JavaScript:

<!-- ❌ ANTIPATTERN TIDAK AKSESIBEL -->
<div class="custom-button" onclick={submitForm}>
	Kirim Data
</div>

Kontainer ini sama sekali tidak terdeteksi oleh pembaca layar, tidak dapat dipilih menggunakan navigasi keyboard, dan tidak memiliki fokus indikator.

Sebagai gantinya, gunakan tombol bawaan browser:

<!-- ✅ PRAKTIK TERBAIK YANG AKSESIBEL -->
<button type="button" class="btn-brutalist" onclick={submitForm}>
	Kirim Data
</button>

2. Navigasi Keyboard dan Manajemen Fokus

Banyak pengguna bernavigasi menggunakan keyboard (dengan tombol Tab dan Shift+Tab) atau perangkat sakelar khusus. Untuk mendukung kebutuhan ini:

1. Jaga Fokus Indikator Tetap Terlihat: Jangan pernah menyetel outline: none pada CSS global Anda. Sebaliknya, buatlah cincin fokus berukuran tebal dan kontras tinggi menggunakan selektor :focus-visible.
2. Urutan DOM yang Logis: Aliran penekanan tombol tab harus selaras dengan hierarki visual halaman. Jangan gunakan trik posisi CSS untuk mengacak urutan urutan tampilan komponen.
3. Sediakan Skip Links: Sediakan tautan "Lewati ke konten utama" yang tersembunyi di bagian atas tata letak untuk memudahkan pengguna keyboard melewati menu navigasi yang berulang.

/* Contoh gaya fokus brutalist yang terlihat */
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 4px;
	box-shadow: 0 0 0 6px var(--background), 0 0 0 9px var(--foreground);
}

3. Membangun Dialog Modal yang Aksesibel di Svelte 5

Membangun antarmuka interaktif seperti jendela pop-up modal adalah bagian di mana aksesibilitas sering kali gagal diimplementasikan. Modal yang aksesibel wajib mengurung fokus keyboard (focus trapping) di dalam tampilan modal aktif, menutup secara instan saat pengguna menekan tombol Escape key, mengembalikan fokus kembali ke pemicu awal sebelum modal terbuka, dan mendeklarasikan peran ARIA dengan tepat.

Berikut contoh implementasi komponen modal yang aksesibel di Svelte 5:

<script lang="ts">
	import { onMount } from 'svelte';
	let { isOpen = $bindable(false), title, children } = $props<{
		isOpen: boolean;
		title: string;
		children?: import('svelte').Snippet;
	}>();

	let previousFocus: HTMLElement | null = null;
	let dialogRef = $state<HTMLDialogElement | null>(null);

	$effect(() => {
		if (isOpen) {
			previousFocus = document.activeElement as HTMLElement;
			dialogRef?.showModal();
		} else {
			dialogRef?.close();
			previousFocus?.focus();
		}
	});

	function handleClose() {
		isOpen = false;
	}

	function handleKeyDown(e: KeyboardEvent) {
		if (e.key === 'Escape') {
			handleClose();
		}
	}
</script>

<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<dialog
	bind:this={dialogRef}
	onclose={handleClose}
	onkeydown={handleKeyDown}
	aria-labelledby="modal-title"
	class="modal-brutalist"
>
	<div class="modal-header">
		<h2 id="modal-title">{title}</h2>
		<button onclick={handleClose} aria-label="Tutup modal">✕</button>
	</div>
	<div class="modal-body">
		{@render children?.()}
	</div>
</dialog>

<style>
	.modal-brutalist {
		border: 4px solid var(--foreground);
		padding: 24px;
		background: var(--background);
		box-shadow: 12px 12px 0 var(--foreground);
		max-width: 500px;
		width: 90%;
	}
	.modal-brutalist::backdrop {
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(4px);
	}
</style>

4. Daftar Periksa Kepatuhan Aksesibilitas

Untuk memastikan aplikasi web Anda mematuhi standar WCAG 2.2 Level AA:

Kesimpulan

Aksesibilitas web adalah indikator utama kualitas dari sebuah produk perangkat lunak. Dengan menetapkan fondasi elemen semantik yang solid, mengelola fokus indikator secara teliti, serta membungkus interaksi kustom di dalam pola ARIA yang aksesibel, Anda menyajikan pengalaman digital terbaik yang menyambut semua orang sekaligus meningkatkan nilai profesional situs Anda.