Apa itu label aria dan bagaimana saya harus menggunakannya?

322

Beberapa jam yang lalu saya membaca tentang atribut aria-label , yang:

Menentukan nilai string yang memberi label elemen saat ini.

Tetapi menurut saya inilah yang titleseharusnya dilakukan atribut. Saya mencari lebih jauh di Jaringan Pengembang Mozilla untuk mendapatkan beberapa contoh dan penjelasan, tetapi satu-satunya yang saya temukan adalah

<button aria-label="Close" onclick="myDialog.close()">X</button>

Yang tidak memberi saya label apa pun (jadi saya menganggap saya salah paham dengan gagasan itu). Saya mencobanya di sini di jsfiddle .

Jadi pertanyaan saya adalah: mengapa saya perlu aria-labeldan bagaimana saya harus menggunakannya?

html assistive-technology Salvador Dali
sumber
3
Melihat sumber daya yang Anda tautkan tampaknya aria-labeldapat digunakan jika Anda tidak ingin menunjukkan tooltip yang disediakan oleh atribut title: Dalam kasus-kasus di mana label yang terlihat atau tooltip yang terlihat tidak diinginkan, penulis MUNGKIN mengatur nama yang dapat diakses dari elemen menggunakan aria-label
Fabrizio Calderan
13
fyi ARIA = Aplikasi Internet yang Mudah Diakses
Eric D'Souza
Adakah yang tahu apakah pantas menggunakan label aria untuk teks <h1> yang lebih deskriptif ketika teks nyata yang terlihat di dalam elemen <h1> terlalu singkat, dan tidak ingin teks lengkapnya terlihat? Pada contoh di utas ini, label dapat digunakan. Tapi label tidak berlaku untuk pos yang mengapa saya bertanya
HelloWorld
Satu-satunya hal serupa yang sesuai yang Anda minta adalah properti "longdesc" (hanya untuk gambar) yang membutuhkan lebih banyak info - tidak dapat membayangkan akan ada satu untuk teks seperti itu harus selalu deskriptif tetap saja aku takut. - @HelloWorld
Jamie Paterson

Jawaban:

427

Ini adalah atribut yang dirancang untuk membantu teknologi bantu (misalnya pembaca layar) melampirkan label ke elemen HTML yang anonim.

Jadi ada <label>unsurnya:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

Secara <label>eksplisit memberitahu pengguna untuk mengetikkan nama mereka ke dalam inputkotak di mana id="fmUserName".

aria-labelmelakukan hal yang sama, tetapi untuk kasus-kasus di mana tidak praktis atau diinginkan untuk tampil labeldi layar. Ambil contoh MDN :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Kebanyakan orang akan dapat menyimpulkan secara visual bahwa tombol ini akan menutup dialog. Orang tunanetra yang menggunakan teknologi bantu mungkin hanya mendengar "X" membacakan, yang tidak berarti banyak tanpa petunjuk visual. aria-labelsecara eksplisit memberi tahu mereka apa yang akan dilakukan tombol.

Olly Hodgson
sumber
4
Terima kasih atas penjelasannya, tetapi bagaimana dia akan mendengar dengan dekat? Apa yang dapat saya lakukan di browser saya (chrome) untuk mendengar ini? Dan bagaimana orang buta dapat memilih tombol ini jika dia tidak tahu di mana itu?
Salvador Dali
1
Saya kira ekstensi seperti ChromeVox akan menjadi tempat yang baik untuk memulai? Saya belum pernah menggunakannya. Mereka bekerja dengan membaca layar dengan keras kepada pengguna, mengambil isyarat dari HTML (misalnya h1harus ditekankan lebih dari a p, ajelas merupakan bentuk tautan , `menunjukkan suatu tempat untuk memasukkan informasi, aria-*atribut memberikan petunjuk lebih lanjut tentang apa yang dilakukan elemen, dll) .
Olly Hodgson
2
Dalam kasus khusus ini, saya akan menambahkannya ke judul attribute. Tidak ada salahnya menampilkan tooltip untuk 'melihat' pengguna ketika mereka mengarahkan X.
GolezTrol
3
Selain ChromeVox, ada NVDA . Keduanya cukup mudah untuk menginstal dan memulai dan cukup sulit untuk dikuasai.
ivarni
1
@SalvadorDali - hanya untuk informasi. di ponsel orang buta dapat mengaktifkan alat aksesibilitas seperti untuk ponsel android itu TalkBack dan untuk ponsel iOS itu adalah VoiceOver. dengan menggunakan ini, halaman akan dibaca baris demi baris.
Rahul J. Rane
71

Pada contoh yang Anda berikan, Anda benar, Anda harus mengatur atribut judul.

Jika aria-labelini adalah salah satu alat yang digunakan oleh teknologi bantu (seperti pembaca layar), itu tidak didukung secara native di browser dan tidak berpengaruh pada mereka. Tidak akan ada gunanya bagi sebagian besar orang yang ditargetkan oleh WCAG (kecuali pengguna pembaca layar), misalnya seseorang dengan cacat intelektual.

"X" tidak cukup memadai untuk memberikan informasi tentang tindakan yang dipimpin tombol (pikirkan tentang seseorang yang tidak memiliki pengetahuan komputer). Ini mungkin berarti "tutup", "hapus", "batalkan", "kurangi", tanda silang yang aneh, coretan, tidak ada.

Terlepas dari kenyataan bahwa W3C tampaknya mempromosikan atribut aria-labeldaripada titleatribut di sini: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 dalam contoh serupa, Anda dapat melihat bahwa teknologinya dukungan tidak termasuk browser standar: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

Bahkan aria-label, dalam situasi yang tepat ini dapat digunakan untuk memberikan lebih banyak konteks pada suatu tindakan:

Misalnya, orang buta tidak menganggap popup seperti kita dengan visi yang baik, itu seperti perubahan konteks. "Kembali ke halaman" akan menjadi alternatif yang lebih nyaman bagi pembaca layar, ketika "Tutup" lebih penting bagi seseorang tanpa pembaca layar.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
Adam
sumber
35

Jika Anda ingin tahu bagaimana aria-labelmembantu Anda secara praktis .. kemudian ikuti langkah-langkahnya ... Anda akan mendapatkannya sendiri ...

Buat halaman html memiliki kode di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Sekarang, Anda memerlukan emulator pembaca layar virtual yang akan berjalan di browser untuk mengamati perbedaannya. Jadi, pengguna browser chrome dapat menginstal ekstensi chromevox dan pengguna mozilla dapat menggunakan addin pembaca layar taring

Setelah selesai dengan instalasi, letakkan headphone di telinga Anda, buka halaman html dan fokus pada kedua tombol (dengan menekan tab) satu-per-satu .. dan Anda dapat mendengar .. fokus pada first x button.. hanya akan memberi tahu Anda x button.. tetapi dalam hal second x button.. Anda back to the page buttonhanya akan mendengar ..

Saya harap Anda melakukannya dengan baik sekarang !!

Moumit
sumber
1
Poin penting adalah bahwa titleatribut diabaikan, bahkan pada tombol pertama. Info lebih lanjut: silktide.com/...
Sphinxxx
2
Apakah masih demikian? Masih lebih baik untuk menyediakan title dan aria-label ?
Kamafeather
2
Inilah yang saya inginkan. Saya hanya ingin melihat dan mendengar bagaimana itu bekerja di dunia nyata dan chromevoxkarya - karya seperti pesona dan akan melafalkan bidang aria-labelledby. Terima kasih.
Raj Rajeshwar Singh Rathore
7

Prasyarat:

Aria digunakan untuk meningkatkan pengalaman pengguna pengguna tunanetra. Pengguna tunanetra menavigasi aplikasi menggunakan perangkat lunak pembaca layar seperti JAWS, NVDA, .. Saat menavigasi melalui aplikasi, perangkat lunak pembaca layar mengumumkan konten kepada pengguna. Aria dapat digunakan untuk menambahkan konten dalam kode yang membantu pengguna pembaca layar memahami peran, status, label, dan tujuan kontrol

Aria tidak mengubah apa pun secara visual. (Aria juga takut pada desainer).

label aria

atribut aria-label digunakan untuk mengkomunikasikan label kepada pengguna pembaca layar. Biasanya bidang input pencarian tidak memiliki label visual (terima kasih kepada desainer). aria-label dapat digunakan untuk mengkomunikasikan label kontrol kepada pengguna pembaca layar

Cara Penggunaan:

<input type="edit" aria-label="search" placeholder="search">

Tidak ada perubahan visual dalam aplikasi. Tetapi pembaca layar dapat memahami tujuan kontrol

aria-labelledby

Baik aria-label dan aria-labelled by digunakan untuk mengkomunikasikan label. Tapi aria-labelledby dapat digunakan untuk referensi label apa pun yang sudah ada di halaman sedangkan aria-label digunakan untuk mengkomunikasikan label yang saya tidak ditampilkan secara visual

Pendekatan 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Pendekatan 2:

aria-labelledby juga dapat digunakan untuk menggabungkan dua label untuk pengguna pembaca layar

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">
ndioewbnc
sumber
3

The titleatribut menampilkan tooltip ketika mouse berada elemen. Walaupun ini merupakan tambahan yang bagus, ini tidak membantu orang yang tidak dapat menggunakan mouse (karena cacat mobilitas) atau orang yang tidak dapat melihat tooltip ini (misalnya: orang dengan cacat visual atau orang yang menggunakan pembaca layar).

Dengan demikian, pendekatan penuh perhatian di sini adalah untuk melayani semua pengguna. Saya akan menambahkan keduanya titledan aria-labelatribut (melayani berbagai jenis pengguna dan berbagai jenis penggunaan web).

Inilah artikel bagus yang menjelaskan aria-labelsecara mendalam

lucalanca
sumber