Accessible Navigation

Setelah lesson ini, kamu dapat membuat navigasi dengan teks jelas, skip link, dan struktur heading yang dapat diikuti.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Coba bayangkan harus melewati menu yang sama berkali-kali sebelum bisa membaca isi. Tautan kecil “Lewati ke konten” dapat menghemat banyak langkah.

Membuat navigasi dengan teks jelas, skip link, dan struktur heading yang dapat diikuti.

PAHAMI KONSEPNYA

Mulai dari elemen native

A dengan href sudah dapat menerima fokus keyboard dan diaktifkan dengan Enter. Gunakan tautan untuk berpindah tempat dan button untuk menjalankan tindakan. Span yang diberi teks “Beranda” tidak otomatis menjadi tautan yang dapat digunakan.

Jalur pintas ke konten

Skip link adalah tautan awal yang menuju id pada main, misalnya href="#konten". Tabindex="-1" pada target memungkinkan fokus diarahkan ke sana tanpa menambah target itu ke urutan Tab normal. Fokus yang terlihat membantu pengguna mengetahui posisi mereka.

Baca halaman tanpa mouse

Tab maju melalui tautan dan kontrol; Shift+Tab mundur; Enter mengaktifkan tautan. Urutan fokus sebaiknya mengikuti urutan dokumen. Jangan memakai tabindex positif untuk memaksa urutan atau menghilangkan outline fokus tanpa pengganti yang jelas.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<a href="#konten">Lewati ke konten</a>
<header>
  <nav aria-label="Utama"><a href="#kegiatan">Kegiatan komunitas</a></nav>
</header>
<main id="konten" tabindex="-1">
  <h1>Taman Baca</h1>
  <h2 id="kegiatan">Kegiatan</h2>
  <p>Membaca dan berdiskusi bersama.</p>
</main>

HASIL DI BROWSER

Skip link menuju main. Label navigasi dan teks tautan menyebut tujuan. H1 dan h2 mengikuti hubungan isi.

KESALAHAN YANG SERING TERJADI

<span onclick="...">Klik di sini</span>

Span bukan tautan native dan tidak otomatis mendapat perilaku keyboard. Gunakan a dengan href serta teks tujuan yang jelas.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Tombol keyboard apa yang biasanya memindahkan fokus ke tautan berikutnya?

TabEscapePanah kanan untuk semua halaman

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Sediakan jalan pintas

Tambahkan tautan awal “Lewati ke konten” menuju #konten. Beri main id konten dan tabindex -1. Ubah menu menjadi nav berlabel “Utama”, ganti teks “Klik” menjadi “Kegiatan kebun”, dan perbaiki h4 menjadi tingkat yang sesuai.

<header><div><a href="#kegiatan">Klik</a></div></header>
<main>
  <h1>Kebun Bersama</h1>
  <h4 id="kegiatan">Kegiatan Kebun</h4>
  <p>Mengenal tanaman sekitar.</p>
</main>

index.htmlHTMLLn 1, Col 16 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Gunakan elemen native sesuai tindakan.
Skip link memberi jalan langsung ke konten utama.
Fokus yang terlihat dan urutan dokumen yang logis membantu semua pengguna.

AksesibilitasStruktur semantik

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Accessibility °Landmark °Heading °Tautan °

Library: Tiga bahasa di balik satu halaman ↗

Hadapi Chapter Trial →