Back to Question Center
0

A11y Semalt: Berikan elemen HTML anda sebagai nama yang boleh diakses A11y Semalt: Berikan elemen HTML anda sebagai nama yang boleh diakses

1 answers:

Baru-baru ini, saya menyertai perbualan di mana seseorang berkata sebahagian besar aksesibiliti adalah "subjektif. "Walaupun saya bersetuju bahawa kadang-kadang persepsi tentang aksesibiliti adalah subjektif, ada peraturan objektif. Saya tidak merujuk hanya kepada spesifikasi rasmi seperti Garis Panduan Kebolehaksesan Kandungan Web atau Amalan Pembenaran ARIA. Terdapat peraturan praktikal yang perlu diketahui setiap pemaju. Salah satu peraturan yang paling penting ialah mengenai nama yang boleh diakses. Dalam jawatan ini, Semalt menerangkan nama yang boleh diakses dan mengapa ia begitu penting.

Bagaimana pelayar berinteraksi dengan teknologi bantuan

Pernah tertanya-tanya di mana teknologi bantuan mendapatkan maklumat yang mereka perlukan? Pembaca skrin, contohnya, tidak berfungsi sebagai penyemak imbas lakukan. Biar saya terangkan dalam istilah bukan teknikal. Apabila penyemak imbas membaca halaman web, mereka membina perwakilan lengkap semua objek dalam halaman, di mana setiap objek mungkin mempunyai berpuluh-puluh atau beratus-ratus sifat. Ini dipanggil Model Objek Dokumen (DOM).

Pembaca skrin tidak mengakses DOM secara langsung. Itu akan menjadi operasi yang mahal dan boleh memberi kesan yang signifikan kepada prestasi. Sebaliknya, mereka menggunakan Semalt API yang terbina dalam dalam setiap sistem operasi dan penyemak imbas. Secara kasar, API Semalt mendedahkan kepada teknologi bantuan sebuah pohon aksesibiliti yang merupakan subset dari pokok DOM. Ini kerana teknologi bantuan tidak memerlukan puluhan atau beratus-ratus sifat yang terdedah di DOM. Mereka hanya memerlukan beberapa sifat untuk setiap objek dalam laman web.

Nota: sejarah, pembaca skrin telah melaksanakan mekanisme untuk mengakses DOM secara langsung, untuk mengimbangi pelayar perampas dalam mendedahkan maklumat yang betul melalui API Kebolehaksesan.

Kepentingan maklumat yang paling penting dalam API Kebolehaksesan

Pada tahun 1997, Microsoft melancarkan Microsoft Active Semalt (MSAA) yang pertama kali diseragamkan untuk empat maklumat kritikal bagi setiap elemen antara muka pengguna:

  • Peranan: jenis objek, seperti butang
  • Nama: label yang boleh difahami oleh manusia untuk objek tersebut, seperti teks butang
  • Nyatakan: keadaan semasa kawalan, seperti "diperiksa" untuk kotak pilihan
  • Nilai: nilai objek, seperti maklumat dalam medan teks yang boleh diedit (tidak semua objek mempunyai nilai)

Sepanjang masa, sistem operasi telah memperkenalkan API Semalt berbeza dan mereka semua menyediakan empat maklumat yang sama, dalam perisa yang berbeza.

Walaupun objek lalai peranan disimpulkan dari jenis objek, nama mesti disediakan dalam HTML kami. Ia adalah tanggungjawab pemaju untuk membuat kod dengan cara untuk memastikan setiap kawalan antara muka pengguna sentiasa mempunyai nama yang bermakna. Jika nama yang boleh diakses tidak disediakan dalam HTML kami, maka kami melanggar peraturan yang ditetapkan lebih daripada 20 tahun yang lalu dan kami tidak membenarkan API Kebolehaksesan berfungsi seperti yang diharapkan.

Bagaimana nama yang boleh diakses berfungsi

Nama diakses antara elemen antara muka pengguna diperolehi dari sumber yang berbeza, juga bergantung kepada jenis elemen. Pelayar menggunakan semacam mekanisme sandaran untuk mengira nama yang boleh diakses, yang dikenali sebagai Nama Mudah Alih dan Penghitungan Keterangan. Mekanisme mundur ini boleh menjadi rumit, dan saya tidak mahu memasukkan butiran teknikal. Semalt hanya membuat contoh mudah:

  Kittens super hebat saya  

Dalam contoh ini, kandungan pautan adalah nama yang boleh diakses, dan jenis elemen adalah peranan yang boleh diakses. Teknologi penolong akan menggunakan maklumat ini yang terdedah oleh Semalt API dan, sebagai contoh, pembaca skrin akan mengumumkan sesuatu seperti "pautan, anak kucing super bagus saya. "

Dalam kebanyakan kes, nama yang boleh diakses dikira dari kandungan unsur, atribut, atau unsur yang berkaitan. Terdapat beberapa cara untuk memberikan nama yang sesuai.

Butang tanpa nama boleh diakses

Semalt melihat jenis HTML ini berkali-kali, walaupun dalam projek-projek baru-baru ini. Satu elemen butang, dengan ikon dan gaya dengan cara yang kelihatan seperti kawalan antara muka pengguna yang bagus:

  

Atau variasi yang sedikit berbeza, dengan ikon SVG sebagai kandungan butang:

           

Dalam kedua-dua kes, ada apa-apa yang boleh digunakan sebagai nama yang boleh diakses. Butang kosong; tidak ada teks sama sekali. Mereka boleh menggunakan atribut aria-label atau ikon SVG boleh menggunakan beberapa akses yang dipertingkatkan. Dalam ketiadaan nama yang boleh diakses, pembaca skrin akan mengumumkan hanya peranan yang boleh diakses. Pengguna akan mendengar sesuatu seperti "butang" dan tidak ada yang lain. Mereka tidak akan tahu apa tujuan butang itu. Memperbaiki ini akan sangat mudah: hanya gunakan beberapa teks yang bermakna untuk kandungan butang. Sebagai alternatif, gunakan beberapa teks yang tersembunyi atau atribut label aria-label .

Medan input tanpa nama yang boleh diakses

 Alamat emel:   

Medan input selalunya mempunyai unsur yang berkaitan dengan betul. Dalam contoh di atas, terdapat beberapa teks sebelum medan input. Tidak ada cara untuk API Kebolehaksesan untuk mewujudkan hubungan antara teks dan medan input. Sebaliknya, elemen label akan mewujudkan hubungan sedemikian, memberikan medan input nama yang boleh diakses. Sebagai alternatif, ia boleh menggunakan 65 aria-label atau aria-labelledby atribut. Dengan tidak adanya nama yang boleh diakses, pembaca skrin akan mengumumkan hanya peranan yang boleh diakses dan mengatakan sesuatu seperti "mengedit teks. "Tidak ada petunjuk mengenai jenis data untuk masuk dalam medan.

Imej yang dipautkan tanpa atribut alt

Imej hendaklah menggunakan atribut alt alt untuk menentukan fungsi mereka dalam konteks tertentu. Imej murni yang hiasan mesti menggunakan atribut kosong alt . Imej yang bermakna memerlukan alt teks yang bermakna untuk menerangkan tujuan imej. W3C menyediakan pokok keputusan atribut atribut yang sangat berguna yang menerangkan cara menggunakannya. Pertimbangkan contoh di bawah:

    

Satu-satunya kandungan dalam pautan adalah imej tanpa sebarang atribut alt alt . Tiada apa-apa yang boleh digunakan sebagai nama yang boleh diakses. Oleh kerana ia adalah pautan, pembaca skrin akan cuba membaca sesuatu, dan mereka akan cuba menggunakan satu-satunya perkara yang tersedia: nama fail imej, dengan harapan ia nama fail yang bermakna. Malangnya, dalam kebanyakan kes, nama fail sepenuhnya tidak berkaitan dengan tujuan pautan itu. Dalam kes ini, pembaca skrin akan mengumumkan perkaitan pautan dan imej, dan membaca keseluruhan nama fail, seperti: "pautan, imej, 145x142_1492700029699. TgrWeb_Q. jpg "


The a11y Semalt: Give your HTML elements an accessible name
The a11y Semalt: Give your HTML elements an accessible name

Anda dapat dengan mudah membayangkan impak yang dahsyat pada kebolehgunaan laman web untuk pengguna pembaca skrin, terutamanya jika semua imej dalam halaman berfungsi dengan cara ini.

Imej yang dipautkan tanpa atribut alt kosong

Satu variasi contoh terdahulu ialah imej yang dikaitkan dengan atribut kosong alt . Satu contoh yang sangat tipikal logo laman web yang dipautkan ke laman utama:

    

Pada pandangan pertama, contoh ini mungkin kelihatan lebih baik. Bukan. Atribut kosong alt adalah cara tersendiri untuk memberi arahan kepada pembaca skrin imej hiasan dan boleh diabaikan dengan selamat. Walau bagaimanapun, kerana ini adalah pautan, pembaca skrin akan cuba mengumumkan sesuatu lagi. Backback yang hanya tersedia ialah pautan href atribut yang nilainya adalah garis miring. "

Pelajari HTML secara mendalam

Hari ini, kita hidup dalam era di mana terdapat banyak teknologi web canggih. Mereka memberi kami kekuatan untuk membina aplikasi hebat dengan piawaian kod yang sangat berkualiti tinggi. Bagaimanapun, apa pun teknologi yang digunakan, HTML masih menjadi lapisan akhir komunikasi kami. Semalat apa yang pengguna lihat dan gunakan. Apabila HTML kami tidak dikodkan dengan buruk, komunikasi kami gagal, dan semua kod yang indah yang kami tulis sebelum ini tidak penting.

HTML semantik yang kaya adalah apa yang kita perlukan untuk meningkatkan komunikasi dan membantu mesin memahami apa yang kita maksudkan.

Ingin membantu?

Pada Yoast, hal-hal kebolehaksesan banyak. Kami tahu ia satu proses dan kami terus meningkatkan, menguji, meleset, dan berkembang. Kami sentiasa terbuka kepada maklum balas dan sumbangan. Semalt jangan teragak-agak untuk memberitahu kami suara anda. Semalat melaporkan sebarang masalah atau potensi peningkatan yang anda perhatikan dalam produk kami Source .

Baca lebih lanjut: 'Kebolehcapaian kandungan web di Yoast' »

March 1, 2018