Cara Membuat Navigasi Keyboard-Friendly

Membuat website yang keyboard-friendly berarti memastikan semua fungsionalitas dan interaksi di situs Anda dapat diakses dan digunakan sepenuhnya hanya dengan menggunakan keyboard, tanpa memerlukan mouse. Ini adalah aspek fundamental dari aksesibilitas web dan merupakan persyaratan kunci dalam pedoman WCAG (Web Content Accessibility Guidelines).

Navigasi keyboard-friendly sangat penting bagi:

Pengguna dengan Disabilitas Motorik: Mereka mungkin tidak dapat menggunakan mouse atau perangkat penunjuk lainnya.
Pengguna Screen Reader: Screen reader (misalnya NVDA, JAWS) sangat mengandalkan navigasi keyboard untuk membaca dan berinteraksi dengan konten.
Pengguna yang Mengalami Cedera Sementara: Misalnya, pergelangan tangan terkilir.
Pengguna yang Lebih Suka Efisiensi: Banyak pengguna power user atau developer lebih suka menavigasi web menggunakan keyboard karena lebih cepat.

Berikut adalah panduan langkah demi langkah untuk memastikan website Anda mudah dinavigasi dengan keyboard.

1. Gunakan Elemen HTML Semantik yang Tepat

Dasar dari navigasi keyboard-friendly adalah penggunaan elemen HTML yang semantik dan relevan. Browser dan assistive technology sudah memiliki pemahaman bawaan tentang elemen-elemen ini.

Gunakan <button> untuk Tombol: Jangan gunakan <div> atau <span> yang distilasi seperti tombol. Elemen <button> secara otomatis dapat difokuskan, dapat diklik dengan Enter atau Spacebar, dan memiliki peran aksesibilitas yang benar.
- Baik: <button type="submit">Kirim</button>
- Buruk: <div onclick="submitForm()">Kirim</div>
Gunakan <a> untuk Tautan: Untuk link navigasi atau link yang mengarahkan ke halaman lain atau bagian lain di halaman yang sama, gunakan <a>.
- Baik: <a href="/produk">Lihat Produk</a>
- Buruk: <span onclick="goToProductPage()">Lihat Produk</span>
Gunakan <input>, <textarea>, <select> untuk Formulir: Elemen formulir ini secara alami dapat difokuskan dan diisi dengan keyboard. Pastikan setiap field memiliki <label> yang terkait.

Baca Juga : Pentingnya Privasi Pengguna & GDPR dalam Tracking Website

2. Pastikan Urutan Tab Logis

Urutan navigasi keyboard ditentukan oleh urutan elemen dalam DOM (Document Object Model). Saat pengguna menekan tombol Tab, fokus harus bergerak secara logis melalui elemen interaktif di halaman.

Urutan DOM = Urutan Tab: Pastikan elemen dalam kode HTML Anda disusun sesuai dengan urutan visual dan logis yang diharapkan.
Hindari tabindex Negatif atau Positif Non-Zero:
- tabindex="0": Membuat elemen non-interaktif bisa difokuskan secara berurutan. Gunakan ini dengan hati-hati.
- tabindex="-1": Membuat elemen bisa difokuskan secara terprogram (misalnya, dengan JavaScript) tetapi tidak dalam urutan tab alami. Berguna untuk manajemen fokus.
- tabindex="1", tabindex="2", dst.: Hampir selalu dihindari! Ini mengubah urutan tab alami dan membuat situs sulit diprediksi. Ini bisa menjadi mimpi buruk aksesibilitas.

Baca Juga : Tantangan dalam Membangun Website Global

3. Tampilkan Indikator Fokus Visual yang Jelas (`:focus`)

Ketika pengguna menekan Tab, harus ada indikator visual yang jelas yang menunjukkan elemen mana yang sedang fokus. Ini sangat penting bagi pengguna yang melihat.

Jangan Hapus outline: Secara default, browser akan menampilkan outline biru atau hitam di sekitar elemen yang difokuskan. Jangan pernah menghapus outline ini dengan outline: none; di CSS kecuali Anda menyediakan indikator fokus alternatif yang lebih baik.

Kustomisasi Indikator Fokus: Anda bisa mengkustomisasi outline agar sesuai dengan desain Anda, asalkan tetap jelas dan kontras.

CSS

/* Contoh kustomisasi fokus yang lebih baik */
:focus {
    outline: 2px solid var(--primary-color, #007bff); /* Warna sesuai branding */
    outline-offset: 2px; /* Jarak antara outline dan elemen */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Efek bayangan tambahan */
}

/* JANGAN LAKUKAN INI! */
:focus {
    outline: none;
}

Pastikan Kontras: Indikator fokus harus memiliki kontras yang cukup dengan latar belakangnya.

Baca Juga : Database Indexing untuk Website Cepat

4. Kelola Fokus dengan JavaScript (Untuk Komponen Kompleks)

Untuk komponen interface yang kompleks seperti modal dialog, dropdown menu, atau tabbed interface, Anda mungkin perlu menggunakan JavaScript untuk mengelola fokus secara programatik.

Modal Dialog: Ketika modal terbuka, fokus keyboard harus berpindah ke dalam modal dan terjebak di dalamnya (tidak bisa keluar ke elemen di belakang modal) sampai modal ditutup. Setelah modal ditutup, fokus harus kembali ke elemen yang memicu modal.
Dropdown Menu: Saat dropdown terbuka, fokus harus berpindah ke item pertama di dropdown. Pengguna harus bisa menavigasi item dropdown dengan arrow keys.
Hindari Jebakan Keyboard: Pastikan pengguna tidak pernah terjebak di bagian tertentu dari halaman. Mereka harus selalu bisa keluar dari komponen interaktif dan kembali ke navigasi umum menggunakan Tab.

Baca Juga : Tools untuk Mengecek Aksesibilitas Website

5. Pertimbangkan Skip Links

Untuk situs dengan banyak elemen navigasi atau konten awal yang berulang, sediakan "Skip Link" di bagian atas halaman (biasanya link tersembunyi yang hanya terlihat saat difokuskan).

Fungsi: Skip link memungkinkan pengguna keyboard untuk langsung melompat ke konten utama halaman, melewati navigasi berulang.

Implementasi:

HTML

<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <header>...</header>
    <nav>...</nav>
    <main id="main-content">
        </main>
</body>

CSS

/* Sembunyikan skip-link secara visual tapi tetap di DOM */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}
/* Tampilkan saat difokuskan */
.skip-link:focus {
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    overflow: visible;
    position: static; /* atau absolute dengan posisi yang terlihat */
    background-color: #eee;
    padding: 8px;
    border: 1px solid #333;
    z-index: 999;
}

6. Pengujian Navigasi Keyboard

Pengujian adalah kunci. Jangan hanya mengandalkan tool otomatis.

Uji Manual:
1. Cabut mouse Anda atau letakkan tangan Anda di atasnya.
2. Mulai dari bagian atas halaman, tekan Tab berulang kali.
3. Pastikan semua elemen interaktif (tautan, tombol, form field) dapat dijangkau.
4. Perhatikan urutan tab: Apakah masuk akal dan mengikuti alur visual?
5. Pastikan indikator fokus terlihat jelas setiap kali Anda menekan Tab.
6. Gunakan Enter atau Spacebar untuk mengaktifkan tombol dan tautan.
7. Gunakan arrow keys untuk menavigasi radio button, checkbox, atau slider.
8. Coba mengisi dan mengirimkan semua formulir.
9. Pastikan Anda tidak pernah "terjebak" di suatu elemen. Anda harus selalu bisa melanjutkan navigasi dengan Tab.
Uji dengan Screen Reader: Screen reader (misalnya NVDA, VoiceOver) akan membantu Anda memahami bagaimana pengguna tunanetra berinteraksi dengan situs Anda menggunakan keyboard.

Membuat navigasi keyboard-friendly bukan hanya tentang kepatuhan, tetapi tentang membuat website Anda dapat diakses dan digunakan oleh audiens yang lebih luas. Dengan berpegang pada semantik HTML, memastikan urutan tab yang logis, menyediakan indikator fokus yang jelas, dan mengelola fokus untuk komponen kompleks, Anda dapat secara signifikan meningkatkan pengalaman bagi semua pengguna. Ingatlah, pengujian manual dengan keyboard adalah cara terbaik untuk memastikan situs Anda benar-benar mudah diakses.