HTML5Tingkat: Menengah6 min

Standar Aksesibilitas Web (A11y) & Atribut ARIA

Rancang halaman web inklusif yang dapat dinavigasi oleh pembaca tuna netra dengan Semantic HTML, tabindex navigasi keyboard, dan atribut WAI-ARIA.

Prinsip Dasar Aksesibilitas Web (A11y)

Pratinjau Terbuka

Aksesibilitas memastikan website dapat digunakan oleh semua orang, termasuk mereka yang memiliki keterbatasan visual atau motorik yang menggunakan navigasi keyboard dan screen reader.

Poin Penting:

Aturan Pertama ARIA: Gunakan tag semantik HTML native terlebih dahulu (misal:

Atribut role: Menjelaskan peran elemen (dialog, alert, navigation, status).

Atribut aria-label & aria-labelledby: Memberikan label kontekstual yang dibacakan oleh mesin peramban suara.

Atribut aria-live="polite": Memberitahukan perubahan dinamis pada area halaman ke screen reader.

Contoh Kode Sintaks

<!-- Tombol Aksesibel dengan Keyboard dan Screen Reader -->
<button 
  type="button" 
  aria-label="Tutup Menu Navigasi"
  aria-expanded="true"
  class="btn-close"
>
  <span aria-hidden="true">&times;</span>
</button>

Live Compiler Runner

Akses Kursus Wajib Login

Buka Akses Penuh Silabus & Praktikum

Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.

145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi

Modul Sebelumnya

Web Components: Custom Elements & Shadow DOM

Modul 10 dari 14

Modul Selanjutnya

Keamanan HTML: Content Security Policy & Sandboxing