Penunjuk Fokus dan Navigasi Papan Kekunci
Gunakan utiliti ring untuk gaya fokus yang jelas, gunakan focus-visible supaya fokus tidak dipaparkan apabila diklik, dan pastikan semua elemen interaktif boleh dicapai melalui papan kekunci.
Penunjuk Fokus dan Navigasi Papan Kekunci ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Navigasi Papan Kekunci Penting
Tidak semua pengguna menavigasi menggunakan tetikus. Pengguna yang mempunyai ketidakupayaan motor bergantung pada papan kekunci, kawalan suis atau navigasi suara. Pengguna berpengalaman pula memilih pintasan papan kekunci demi kecekapan. Pengguna pembaca skrin menavigasi terutamanya menggunakan papan kekunci. WCAG 2.4.3 Susunan Fokus menghendaki semua fungsi boleh dikendalikan melalui papan kekunci, manakala WCAG 2.4.7 menghendaki elemen yang menerima fokus papan kekunci mempunyai penunjuk fokus yang boleh dilihat. Tailwind menyediakan utiliti untuk melaksanakan kedua-dua keperluan ini.
Gaya Fokus Lalai dan Masalahnya
Pelayar menyediakan penunjuk focus lalai (biasanya garis biru), tetapi ramai pereka bentuk membuangnya secara global menggunakan outline: none atau outline: 0 kerana ia turut muncul apabila tetikus diklik. Ini merupakan bencana dari segi kebolehcapaian — membuang garis tersebut bermakna pengguna papan kekunci tidak mempunyai petunjuk visual yang menunjukkan elemen yang sedang menerima focus. Pendekatan moden Tailwind membezakan focus tetikus daripada focus papan kekunci 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: menyasarkan pseudo-kelas CSS :focus-visible, yang digunakan oleh pelayar apabila focus diterima melalui navigasi papan kekunci (Tab, kekunci anak panah), tetapi NOT apabila focus diterima melalui klik tetikus. Inilah yang dikehendaki oleh pereka bentuk — tiada gelang focus apabila tetikus diklik, tetapi gelang yang jelas apabila menekan Tab. Gunakan focus-visible:ring-2 focus-visible:ring-blue-500 sebagai gaya focus standard 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>Utiliti gelang untuk penunjuk focus
Utiliti Tailwind ring-* menghasilkan garis luar berasaskan box-shadow CSS yang muncul di luar sempadan elemen tanpa menjejaskan susun atur. ring-2 menetapkan gelang 2px, ring-blue-500 menetapkan warnanya, dan ring-offset-2 menambah jurang 2px antara sempadan elemen dengan gelang. Ini menghasilkan pemisahan yang jelas dan menjadikan penunjuk focus lebih kelihatan 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>Turutan Tab dan tabindex
Turutan Tab papan kekunci hendaklah mengikut turutan bacaan visual halaman (dari atas ke bawah, dari kiri ke kanan dalam susun atur LTR). Gunakan elemen HTML semantik seperti button, a dan input yang sememangnya boleh menerima focus mengikut turutan yang betul. Elakkan penggunaan tabindex untuk memaksa turutan focus yang tidak semula jadi. Gunakan tabindex='0' untuk menjadikan elemen bukan interaktif (seperti komponen tersuai) boleh menerima focus melalui papan kekunci, dan tabindex='-1' untuk mengeluarkan elemen daripada urutan Tab sambil mengekalkan keupayaannya menerima focus secara programatik.
<!-- 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>Pengurusan focus dalam SPA
Dalam Aplikasi Satu Halaman, perubahan laluan dan kemas kini kandungan dinamik tidak mencetuskan pemuatan semula halaman, jadi pelayar tidak menetapkan semula focus. Selepas navigasi, pindahkan focus secara programatik kepada tajuk utama halaman baharu atau sasaran pautan langkau. Selepas modal dibuka, pindahkan focus ke dalamnya. Selepas modal ditutup, kembalikan focus kepada elemen yang mencetuskannya. Gunakan useRef React dan element.focus() untuk melaksanakan corak 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>
);
}Pautan navigasi langkau
Pautan navigasi langkau ialah pautan yang disembunyikan secara visual di bahagian atas halaman dan menjadi kelihatan apabila menerima focus. Pautan ini membolehkan pengguna papan kekunci terus melompat ke kawasan kandungan utama tanpa perlu menekan Tab melalui semua pautan navigasi. Ini diwajibkan oleh WCAG 2.4.1 (Memintas Blok). Utiliti Tailwind sr-only dan focus:not-sr-only (atau focus:ring) melaksanakan fungsi ini dengan kemas.
<!-- 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>Corak navigasi kekunci anak panah
Sesetengah komponen interaktif hendaklah bertindak balas terhadap kekunci anak panah selain Tab. Bar alat dan bar menu menggunakan anak panah kiri/kanan untuk bergerak antara item. Menu pilihan dan kotak senarai menggunakan anak panah atas/bawah. Panel Tab menggunakan kekunci anak panah untuk menukar Tab. Pelaksanaan navigasi kekunci anak panah dalam komponen tersuai memerlukan pengendali peristiwa kekunci JavaScript yang memindahkan focus antara elemen interaktif berkaitan.
// 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 focus yang sangat jelas untuk kebolehcapaian
WCAG 2.4.11 (Rupa Focus, WCAG 2.2) menghendaki penunjuk focus memenuhi keperluan minimum saiz dan kontras. Gelang focus hendaklah setebal sekurang-kurangnya 2px dan mempunyai nisbah kontras 3:1 sekurang-kurangnya terhadap kedua-dua elemen yang menerima focus dan latar belakang bersebelahan. ring-2 Tailwind dengan warna yang mempunyai kontras yang sesuai memenuhi keperluan ini. Untuk sokongan mod kontras tinggi, pertimbangkan penggunaan outline berbanding box-shadow, kerana Windows High Contrast Mode menyokong 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 papan kekunci
Uji navigasi papan kekunci secara manual: jangan gunakan tetikus langsung dan navigasi seluruh aplikasi anda hanya menggunakan Tab, Shift+Tab, Enter, Space dan kekunci anak panah. Setiap elemen interaktif hendaklah boleh dicapai, setiap tindakan hendaklah boleh dilakukan dan setiap elemen yang menerima focus hendaklah mempunyai penunjuk yang kelihatan. Alat seperti axe DevTools boleh mengesan penunjuk focus yang tiada secara automatik, tetapi ujian manual mendedahkan masalah aliran logik yang terlepas daripada alat automatik.
/*
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
*/Mewujudkan garis asas gaya focus global
Tentukan gaya focus yang konsisten sebagai garis asas global dalam CSS anda, bukannya mengulanginya pada setiap elemen. Gunakan addBase dalam pemalam Tailwind atau tambahkannya dalam blok @layer base CSS global anda. Ini memastikan semua elemen yang sememangnya boleh menerima focus mendapat penunjuk focus yang konsisten dan boleh dicapai secara lalai, manakala komponen tersuai hanya perlu memilih corak 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'>Semakan ringkas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Rumusan pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa focus-visible: hanya menunjukkan gelang focus kepada pengguna papan kekunci, ring-2 dengan ring-offset-2 menghasilkan penunjuk focus yang boleh dicapai dan jelas secara visual, manakala pautan navigasi langkau dengan sr-only membolehkan pengguna papan kekunci memintas navigasi berulang. Seterusnya, kita akan membincangkan atribut ARIA dan cara menggunakan utiliti sr-only Tailwind untuk sokongan pembaca skrin.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Penunjuk Fokus dan Navigasi Papan Kekunci” percuma?
Ya — teks penuh “Penunjuk Fokus dan Navigasi Papan Kekunci” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penunjuk Fokus dan Navigasi Papan Kekunci”?
Gunakan utiliti ring untuk gaya fokus yang jelas, gunakan focus-visible supaya fokus tidak dipaparkan apabila diklik, dan pastikan semua elemen interaktif boleh dicapai melalui papan kekunci. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Penunjuk Fokus dan Navigasi Papan Kekunci” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Kontras Warna dan Teks yang Mudah Dibaca
- Penunjuk Fokus dan Navigasi Papan Kekunci
- Atribut ARIA dan Pembaca Skrin
- Komponen Borang yang Boleh Diakses