Apa yang Baru di WCAG 2.1: Label dalam Nama

WCAG 2.1, yang dikeluarkan pada tahun 2018, memperkenalkan beberapa kriteria kejayaan baru, meningkatkan kebolehcapaian web. Artikel ini memberi tumpuan kepada "Label dalam Nama" (2.5.3), aspek penting dalam pelabelan komponen antara muka pengguna. Kami akan meneroka perangkap, penyelesaian, dan amalan terbaik.

Memahami kriteria kejayaan

Kriteria kejayaan adalah pernyataan yang boleh diuji, teknologi-agnostik yang menentukan pematuhan aksesibiliti. "Label dalam Nama" menilai sama ada label visual komponen sepadan dengan nama programatiknya. Ia adalah sebahagian daripada kategori "beroperasi" WCAG 2.1, khususnya menangani modaliti input. Yang penting, WCAG 2.1 bersesuaian dengan WCAG 2.0.

Label dalam Nama: Visual vs Programmatic

WCAG 2.5.3 (Tahap A) menyatakan: "Bagi komponen antara muka pengguna dengan label yang merangkumi teks atau imej teks, namanya mengandungi teks yang dibentangkan secara visual."

Ini memastikan konsistensi antara label yang dibentangkan secara visual dan nama programatik komponen (nama yang boleh diakses). Konsistensi ini sangat penting untuk pengguna teknologi bantuan seperti pembaca skrin dan perisian pengenalan ucapan. Nama -nama visual dan programatik tidak perlu sama, tetapi mereka mesti berkongsi istilah yang sama (misalnya, "hantar" dan "menyerahkan borang"). Perbezaan membuat kekeliruan dan menghalang aksesibiliti.

Implikasi teknologi bantuan

Pertimbangkan borang hubungan HTML. Pengguna yang menggunakan pengiktirafan pertuturan mungkin menemui butang dengan teks visual "Hantar" tetapi nama program "Hantar." Kesilapan ini adalah kegagalan. Pengguna, bergantung pada label visual, tidak dapat mengaktifkan butang menggunakan arahan ucapan. Memadankan nama visual dan programatik ("Hantar" dalam kedua -dua kes) menyelesaikan masalah ini. Jika aria-label tidak menambah nilai, mengeluarkannya lebih baik.

Pengguna pembaca skrin juga mendapat manfaat daripada pelabelan yang konsisten. Teks pendengaran yang serupa dengan apa yang mereka lihat meningkatkan kebolehgunaan. Sebaliknya, label yang tidak sesuai boleh menyebabkan pengaktifan kawalan secara tidak sengaja melalui input ucapan atau kekeliruan untuk pengguna menavigasi melalui pembaca skrin. Kriteria ini tidak digunakan untuk komponen yang tidak mempunyai label visual.

Contoh kod: kegagalan menyatakan dan pembetulan

Artikel ini membentangkan tiga senario kegagalan:

1. Putuskan antara label yang dituturkan dan visual.
2. Tidak sepadan dengan label kerana rentang "tersembunyi" yang diakses menambah teks tambahan ke label yang dituturkan.
3. Input dengan atribut aria-labelledby gagal mewujudkan korelasi antara label yang dituturkan dan visual.

Contoh -contoh ini menyerlahkan kesilapan biasa. Artikel itu kemudian menyediakan coretan kod yang diperbetulkan untuk setiap senario.

Kajian Webaim 2020 mendedahkan bahawa 55% daripada 4.2 juta borang input dilabel secara tidak wajar.

Berpasangan input label yang betul menggunakan<label></label> Unsur-unsur adalah penting, tetapi nama programatik (nama yang boleh diakses) melalui aria-label sama pentingnya. Ketidakkonsistenan antara<label></label> Teks dan aria-label membuat beban kognitif untuk pengguna dengan kecacatan kognitif dan pengguna input pertuturan.

Penempatan label dan kekhususan teks

Artikel ini menjelaskan bahawa teks tidak dianggap sebagai label visual jika digunakan secara simbolik dan bukannya secara harfiah. Editor teks yang kaya, sering menggunakan imej sebagai teks, contohnya.

Untuk konsistensi, label proksim visual harus dianggap sebagai teks label. Garis panduan penempatan yang optimum termasuk:

• Kiri input teks dan dropdowns.
• Hak kotak semak dan butang radio.
• Butang dalam atau tab, atau di bawah butang ikon.

Variasi kecil dalam tanda baca dan permodalan boleh diterima jika tidak simbolik.

Komponen tanpa label visual dikecualikan daripada kriteria kejayaan ini.

Faedah pelabelan yang betul

Pelabelan yang konsisten membolehkan pengguna input pertuturan untuk mengaktifkan kawalan dengan lancar, menghapuskan meneka. Reka bentuk inklusif memberi manfaat kepada semua pengguna, mewujudkan pengalaman yang lebih menyeronokkan dan boleh diakses.

Kesimpulan dan ujian

Artikel ini meringkaskan WCAG 2.5.3, menekankan kepentingannya walaupun kelihatan kesederhanaan. Ia menyoroti keperluan pematuhan A-level: memastikan nama programatik mengandungi teks yang dibentangkan secara visual.

Ujian boleh dilakukan menggunakan alat pemaju penyemak imbas (Chrome Devtools, Alat Pemaju Firefox), atau alat pengauditan akses seperti gelombang dan kapak. Mematuhi kriteria ini, walaupun seolah -olah kecil, dengan ketara meningkatkan kebolehcapaian untuk semua pengguna.

Atas ialah kandungan terperinci Apa yang Baru di WCAG 2.1: Label dalam Nama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!