Indikator Fokus dan Navigasi Papan Ketik
Terapkan utilitas ring untuk gaya fokus yang terlihat, gunakan focus-visible agar fokus tidak ditampilkan saat mengeklik, dan pastikan semua elemen interaktif dapat dijangkau dengan papan ketik.
Indikator Fokus dan Navigasi Papan Ketik adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Mengapa Navigasi Keyboard Penting
Tidak semua pengguna bernavigasi dengan mouse. Pengguna dengan disabilitas motorik mengandalkan keyboard, kontrol sakelar, atau navigasi suara. Pengguna mahir memilih pintasan keyboard demi efisiensi. Pengguna pembaca layar terutama bernavigasi dengan keyboard. WCAG 2.4.3 Urutan Fokus mengharuskan semua fungsi dapat dioperasikan melalui keyboard, dan WCAG 2.4.7 mengharuskan elemen yang mendapat fokus keyboard memiliki indikator fokus yang terlihat. Tailwind menyediakan utilitas untuk menerapkan kedua persyaratan tersebut.
Masalah pada Gaya Fokus Bawaan
Browser menyediakan indikator fokus bawaan (biasanya berupa garis tepi biru), tetapi banyak desainer menghapusnya secara global dengan outline: none atau outline: 0 karena indikator tersebut juga muncul saat mengeklik dengan mouse. Ini merupakan bencana bagi aksesibilitas — menghapus garis tepi berarti pengguna papan ketik tidak memiliki petunjuk visual yang menunjukkan elemen mana yang sedang mendapatkan fokus. Pendekatan modern Tailwind membedakan fokus dari mouse dan fokus dari papan ketik menggunakan pseudo-kelas focus-visible.
/* NEVER do this globally */
* {
outline: none; /* destroys keyboard accessibility */
}
/* WRONG approach in Tailwind */
<button class='focus:outline-none'>...</button>
/* Removes focus for keyboard users too */
/* BETTER: suppress only for mouse users */
<button class='focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'>
This button shows ring for keyboard users only
</button>Varian focus-visible Tailwind
Varian focus-visible: menargetkan pseudo-kelas CSS :focus-visible, yang diterapkan browser ketika fokus diperoleh melalui navigasi papan ketik (Tab, tombol panah), tetapi tidak ketika fokus diperoleh melalui klik mouse. Inilah yang diinginkan desainer — tidak ada cincin fokus saat mengeklik dengan mouse, tetapi ada cincin yang jelas saat berpindah menggunakan tombol Tab. Gunakan focus-visible:ring-2 focus-visible:ring-blue-500 sebagai gaya fokus standar untuk elemen interaktif.
<!-- Standard button with focus-visible ring -->
<button
class='
px-4 py-2 bg-blue-600 text-white rounded-lg font-medium
focus:outline-none
focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
'
>
Submit
</button>
<!-- Link with focus-visible style -->
<a
href='/docs'
class='
text-blue-700 underline
focus:outline-none
focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:rounded
'
>
Documentation
</a>Utilitas cincin untuk indikator fokus
Utilitas ring-* Tailwind membuat garis tepi berbasis CSS box-shadow yang muncul di luar garis tepi elemen tanpa memengaruhi tata letak. ring-2 menetapkan cincin 2px, ring-blue-500 menetapkan warnanya, dan ring-offset-2 menambahkan jarak 2px antara garis tepi elemen dan cincin, sehingga tercipta pemisahan jelas yang membuat indikator fokus lebih terlihat pada latar belakang berwarna.
<!-- Ring width options -->
<button class='ring-1 ...'>1px ring</button>
<button class='ring-2 ...'>2px ring (recommended)</button>
<button class='ring-4 ...'>4px ring (high visibility)</button>
<!-- Ring with offset (recommended for buttons) -->
<button class='focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'>
With offset gap
</button>
<!-- Ring offset on dark background -->
<div class='bg-gray-900 p-4'>
<button class='
bg-blue-600 text-white px-4 py-2 rounded
focus-visible:ring-2 focus-visible:ring-blue-400
focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900
'>Dark bg button</button>
</div>Urutan Tab dan tabindex
Urutan Tab pada papan ketik harus mengikuti urutan baca visual halaman (dari atas ke bawah, dari kiri ke kanan dalam tata letak LTR). Gunakan elemen HTML semantis seperti button, a, dan input yang secara bawaan dapat menerima fokus dalam urutan yang benar. Hindari penggunaan tabindex untuk memaksakan urutan fokus yang tidak alami. Gunakan tabindex='0' agar elemen noninteraktif (seperti komponen khusus) dapat menerima fokus dari papan ketik, dan tabindex='-1' untuk menghapus elemen dari urutan Tab sambil tetap membuatnya dapat menerima fokus secara terprogram.
<!-- Native elements: in tab order automatically -->
<button>First</button> <!-- tab stop 1 -->
<a href='/'>Second</a> <!-- tab stop 2 -->
<input type='text' /> <!-- tab stop 3 -->
<!-- Custom component: add to tab order with tabindex='0' -->
<div
role='button'
tabindex='0'
class='focus-visible:ring-2 focus-visible:ring-blue-500'
onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
Custom interactive element
</div>
<!-- Remove from tab order but allow programmatic focus -->
<div tabindex='-1' ref={modalPanelRef}>
Modal content (focused by JS, not Tab)
</div>Manajemen fokus dalam SPA
Dalam Single Page Application, perubahan rute dan pembaruan konten dinamis tidak memicu pemuatan ulang halaman, sehingga browser tidak mengatur ulang fokus. Setelah navigasi, pindahkan fokus secara terprogram ke judul utama halaman baru atau target tautan lewati. Setelah modal terbuka, pindahkan fokus ke dalamnya. Setelah modal ditutup, kembalikan fokus ke elemen yang memicunya. Gunakan useRef React dan element.focus() untuk menerapkan pola-pola ini.
// Focus management after route change (React/Next.js)
import { useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';
function MainContent({ children }) {
const mainRef = useRef(null);
const pathname = usePathname();
useEffect(() => {
// Move focus to main content on route change
mainRef.current?.focus();
}, [pathname]);
return (
<main
ref={mainRef}
tabIndex={-1} // focusable but not in tab order
className='focus:outline-none'
>
{children}
</main>
);
}Tautan untuk melewati navigasi
Tautan untuk melewati navigasi adalah tautan yang disembunyikan secara visual di bagian atas halaman dan menjadi terlihat saat mendapatkan fokus, sehingga pengguna papan ketik dapat langsung berpindah ke area konten utama tanpa melewati semua tautan navigasi dengan tombol Tab. Hal ini diwajibkan oleh WCAG 2.4.1 (Melewati Blok). Utilitas sr-only dan focus:not-sr-only (atau focus:ring) dari Tailwind menerapkannya dengan elegan.
<!-- Skip nav: hidden until focused by keyboard -->
<a
href='#main-content'
class='
sr-only
focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50
focus:bg-white focus:text-blue-700 focus:font-semibold
focus:px-4 focus:py-2 focus:rounded-lg focus:shadow-lg
focus:ring-2 focus:ring-blue-500
'
>
Skip to main content
</a>
<nav><!-- navigation --></nav>
<main id='main-content' tabIndex={-1} className='focus:outline-none'>
<!-- page content -->
</main>Pola navigasi dengan tombol panah
Beberapa komponen interaktif harus merespons tombol panah selain tombol Tab. Bilah alat dan bilah menu menggunakan tombol panah kiri/kanan untuk berpindah antaritem. Menu pilihan dan kotak daftar menggunakan tombol panah atas/bawah. Panel tab menggunakan tombol panah untuk berpindah tab. Penerapan navigasi dengan tombol panah dalam komponen khusus memerlukan penangan kejadian tombol JavaScript yang memindahkan fokus di antara elemen interaktif terkait.
// Arrow key navigation for a custom tab list
function TabList({ tabs }) {
const tabRefs = useRef([]);
const handleKeyDown = (e, index) => {
let newIndex;
if (e.key === 'ArrowRight') newIndex = (index + 1) % tabs.length;
if (e.key === 'ArrowLeft') newIndex = (index - 1 + tabs.length) % tabs.length;
if (e.key === 'Home') newIndex = 0;
if (e.key === 'End') newIndex = tabs.length - 1;
if (newIndex !== undefined) {
e.preventDefault();
tabRefs.current[newIndex]?.focus();
}
};
return (
<div role='tablist'>
{tabs.map((tab, i) => (
<button
key={tab.id}
ref={el => tabRefs.current[i] = el}
role='tab'
onKeyDown={e => handleKeyDown(e, i)}
className='focus-visible:ring-2 focus-visible:ring-blue-500'
>
{tab.label}
</button>
))}
</div>
);
}Gaya fokus dengan visibilitas tinggi untuk aksesibilitas
WCAG 2.4.11 (Tampilan Fokus, WCAG 2.2) mengharuskan indikator fokus memenuhi persyaratan ukuran dan kontras minimum. Cincin fokus harus memiliki ketebalan minimal 2px dan rasio kontras minimal 3:1 terhadap elemen yang mendapatkan fokus maupun latar belakang di sekitarnya. ring-2 Tailwind dengan warna yang memiliki kontras memadai memenuhi persyaratan ini. Untuk mendukung mode kontras tinggi, pertimbangkan penggunaan outline, bukan box-shadow, karena Windows High Contrast Mode menghormati outline.
/* High contrast mode compatible focus style */
@media (forced-colors: active) {
button:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 3px solid ButtonText;
outline-offset: 2px;
}
}
/* Tailwind equivalent for standard mode */
<button
class='
focus:outline-none
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600
/* Fallback for High Contrast Mode uses CSS above */
'
>
Accessible button
</button>Menguji navigasi dengan papan ketik
Uji navigasi dengan papan ketik secara manual: singkirkan mouse sepenuhnya dan navigasikan seluruh aplikasi hanya menggunakan Tab, Shift+Tab, Enter, Spasi, dan tombol panah. Setiap elemen interaktif harus dapat dijangkau, setiap tindakan harus dapat dilakukan, dan setiap elemen yang mendapatkan fokus harus memiliki indikator yang terlihat. Alat seperti axe DevTools dapat mendeteksi indikator fokus yang hilang secara otomatis, tetapi pengujian manual mengungkap masalah alur logis yang tidak terdeteksi oleh alat otomatis.
/*
Keyboard navigation test checklist:
Tab through entire page:
[ ] Every interactive element is reachable
[ ] Every focused element shows a visible indicator
[ ] Tab order follows visual reading order
[ ] No focus traps outside intentional ones (modals)
Activate elements:
[ ] Enter activates buttons and links
[ ] Space activates checkboxes and toggles
[ ] Arrow keys navigate menus, tabs, selects
Modal behavior:
[ ] Focus enters modal on open
[ ] Tab stays inside modal while open
[ ] Escape closes modal
[ ] Focus returns to trigger on close
Automated:
axe-core, Lighthouse accessibility audit
*/Membuat dasar gaya fokus global
Tentukan gaya fokus yang konsisten sebagai dasar global dalam CSS, bukan mengulanginya pada setiap elemen. Gunakan addBase dalam plugin Tailwind atau tambahkan di blok @layer base pada CSS global. Dengan demikian, semua elemen yang secara bawaan dapat menerima fokus akan mendapatkan indikator fokus yang konsisten dan aksesibel secara default, sementara komponen khusus hanya perlu ikut menggunakan pola yang sama.
/* globals.css — consistent focus baseline */
@layer base {
:focus-visible {
outline: 2px solid #3b82f6; /* blue-500 */
outline-offset: 2px;
border-radius: 0.25rem;
}
/* Remove outline only for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
}
/* Components that need ring instead of outline: */
/* Still override per-element with focus-visible:ring-2 etc. */
<button class='focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'>Pemeriksaan Singkat
Uji pemahaman Anda tentang konsep Tailwind CSS Mastery dari pelajaran ini.
Rangkuman Pelajaran
Dalam pelajaran ini Anda mempelajari: focus-visible: hanya menampilkan cincin fokus untuk pengguna papan ketik, ring-2 dengan ring-offset-2 membuat indikator fokus yang aksesibel dan terlihat jelas, serta tautan untuk melewati navigasi dengan sr-only memungkinkan pengguna papan ketik melewati navigasi berulang. Selanjutnya kita akan membahas atribut ARIA dan cara menggunakan utilitas sr-only Tailwind untuk mendukung pembaca layar.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Indikator Fokus dan Navigasi Papan Ketik” gratis?
Ya — teks lengkap “Indikator Fokus dan Navigasi Papan Ketik” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Indikator Fokus dan Navigasi Papan Ketik”?
Terapkan utilitas ring untuk gaya fokus yang terlihat, gunakan focus-visible agar fokus tidak ditampilkan saat mengeklik, dan pastikan semua elemen interaktif dapat dijangkau dengan papan ketik. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Indikator Fokus dan Navigasi Papan Ketik” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Kontras Warna dan Teks yang Mudah Dibaca
- Indikator Fokus dan Navigasi Papan Ketik
- Atribut ARIA dan Pembaca Layar
- Komponen Formulir yang Aksesibel