pengantar
Jika Anda ingin meningkatkan aksesibilitas situs Anda, tetapi berpikir bahwa untuk ini Anda perlu memasang sesuatu atau berurusan dengan beberapa layanan, maka berikut adalah pilihan 5 alat yang tersedia di browser Chrome, dan yang dengannya Anda dapat dengan cepat menentukan apakah ada masalah dengan ketersediaan.
Sebuah penafian kecil, saya tahu bahwa banyak dari Anda secara aktif menggunakan DevTools, namun, saya mengingatkan Anda bahwa akan lebih mudah menggunakan pintasan Cmd + Shift + C / Ctrl + Shift + C untuk membuka DevTools.
Pemeriksa aksesibilitas
Selain DOM, browser membangun Accessibility Tree (AOM, Accessibility Object Model) atau Accessibility Tree (sedikit lebih lanjut di sini ). Karenanya, Pemeriksa aksesibilitas memungkinkan Anda melihat informasi di pohon ini, mirip dengan cara Anda melihat struktur DOM pemverifikasi di tab Elemen.
Sebagian besar, AOM berisi informasi dari ARIA dan atribut peran, yang merupakan cara pembaca layar mencoba menentukan tujuan elemen DOM.
Anda dapat menemukan ini dan alatnya di tab Elemen, di tab tambahan Aksesibilitas.
Emulator penglihatan buruk
DevTools , .
DevTools, . More tools, Rendering. , , “Emulate vision deficiencies”.
DevTools :
( ?)
- , .
- –, – .
-
, , , , - , . .
Lighthouse , . , Accessibility.
Lighthouse :
ARIA -
ROLE -
Lang HTML
Tabindex
alt
, , , alt. , - “”, “ ”, “”,
. , .
, DevTools , .
- DevTools, , CSS color
, :
()
()
Inspect element tooltip
, . , DevTools , . DevTools.
Inspect element tooltip , .
, ,
, , .– FronteersConf
Terima kasih telah membaca. Saya harap alat ini akan membantu membuat proyek Anda lebih mudah diakses.