Aria-label nedir ve nasıl kullanmalıyım?

321

Birkaç saat önce aria-label özelliğini okudum :

Geçerli öğeyi etiketleyen bir dize değeri tanımlar.

Ama bence bu titleözelliğin yapması gerekiyordu. Bazı örnekler ve açıklamalar almak için Mozilla Geliştirici Ağı'na daha fazla baktım , ancak bulduğum tek şey

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

Hangi bana herhangi bir etiket sağlamaz (bu yüzden fikri yanlış anladığımı varsayıyorum). Ben burada jsfiddle denedim .

Benim sorum şu: neden ihtiyacım var aria-labelve nasıl kullanmalıyım?

html assistive-technology

— Salvador Dali
kaynak

3

Bağladığınız kaynağa bakıldığında, aria-labelbaşlık özniteliği tarafından sağlanan araç ipucunu göstermek istemiyorsanız kullanılabilecek gibi görünüyor : Görünür bir etiketin veya görünür araç ipucunun istenmediği durumlarda, yazarlar aria-label kullanan eleman

— Fabrizio Calderan

13

fyi ARIA = Erişilebilir Zengin İnternet Uygulamaları

— Eric D'Souza

<h1> öğesinin içindeki gerçek görünür metin çok kısa olduğunda ve tam metnin görünür olması istenmediğinde, daha açıklayıcı bir <h1> metni için aria etiketi kullanmanın uygun olup olmadığını bilen var mı? Bu konudaki örneklerde bir etiket kullanılabilir. Ancak etiketler başlıklar için geçerli değil, bu yüzden soruyorum

— HelloWorld

İstediğiniz tek uygun benzer şey, daha fazla bilgi gerektiren "longdesc" özelliğidir (sadece görüntüler için) - her zaman açıklayıcı olması gerektiği gibi metin için bir tane olacağını hayal edemiyorum. - @HelloWorld

— Jamie Paterson

427

Yardımcı teknolojinin (örn. Ekran okuyucular) başka türlü anonim bir HTML öğesine etiket eklemesine yardımcı olmak için tasarlanmış bir özelliktir .

Yani <label>element var:

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

<label>Açıkça içine kendi adını yazın girmesini söyleyen inputnerede kutu id="fmUserName".

aria-labelaynı şeyi yapar, ancak labelekranda olması pratik veya arzu edilmeyen durumlar içindir . MDN örneğini alın :

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

Çoğu kişi bu düğmenin iletişim kutusunu kapatacağını görsel olarak çıkarabilir. Yardımcı teknolojiyi kullanan kör bir kişi "X" kelimesinin yüksek sesle okuduğunu duyabilir. aria-labeldüğmenin ne yapacağını açıkça söyler.

— Olly Hodgson
kaynak

4

Açıklama için teşekkürler, ama nasıl yakın duyacak? Bunu duymak için tarayıcımda (krom) ne yapabilirim? Ve kör bir kişi nerede olduğunu bilmiyorsa bu düğmeyi nasıl seçebilir?

— Salvador Dali

1

ChromeVox gibi bir uzantıyı başlatmak için iyi bir yer olurdu sanırım ? Yine de hiç kullanmadım. Onlar (örneğin bir HTML aldıkları ipuçları, kullanıcıya yüksek sesle ekrana okuyarak çalışmak h1daha fazlasını vurgulanmalıdır p, abir bağlantı açıkça , , form` bilgilerini girmek için bir yere işaret aria-*, nitelikleri elemanları ne kadar ileri ipuçları verebilir vs) .

— Olly Hodgson

2

Bu özel durumda, bir başlığa eklerdim attribute. Kullanıcıları X'in üzerine getirdiklerinde 'görmek' için bir ipucu göstermenin zararı yok

— GolezTrol

3

ChromeVox'a ek olarak, NVDA da var . Her ikisinin de kurulumu ve başlatılması oldukça kolaydır ve ustalaşması oldukça zordur.

— ivarni

1

@SalvadorDali - sadece bilgi için. mobil kör kişi android mobil cihazlar için erişilebilirlik aracını etkinleştirebilir TalkBack ve iOS cep telefonları için VoiceOver. bunu kullanarak sayfa satır satır okunur.

— Rahul J. Rane

71

Verdiğiniz örnekte, kesinlikle haklısınız, title özelliğini ayarlamanız gerekiyor.

Eğer aria-labelyardımcı teknolojiler (ekran okuyucuları gibi) tarafından kullanılan bir araçtır, doğal tarayıcılarda desteklenir ve üzerlerinde hiçbir etkisi yoktur edilmez. WCAG tarafından hedeflenen kişilerin çoğuna (ekran okuyucu kullanıcıları hariç), örneğin akıllı engelli bir kişiye yardımcı olmaz.

"X", düğmeyle yürütülen eyleme bilgi vermek için yeterli değildir (bilgisayar bilgisi olmayan birini düşünün). "Kapat", "sil", "iptal", "azalt", garip bir çarpı, bir doodle, hiçbir şey anlamına gelebilir.

W3C'nin aria-labelburadaki titleözellik yerine daha çok tanıtım yapmasına rağmen : http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 benzer bir örnekte destek standart tarayıcıları içermez: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

Aslında aria-label, bu tam durumda bir eyleme daha fazla bağlam vermek için kullanılabilir:

Örneğin, kör insanlar, iyi görüşe sahip olanlarımız gibi pop-up'ları algılamazlar, bu bir bağlam değişikliği gibi. "Kapat" ekran okuyucusu olmayan biri için daha önemli olduğunda, "sayfaya geri dön" ekran okuyucu için daha uygun bir alternatif olacaktır.

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

— Adem
kaynak

35

Pratik olarakaria-label size nasıl yardımcı olduğunu bilmek istiyorsanız .. o zaman adımları takip edin ... kendiniz alacaksınız ..

Aşağıdaki kodu içeren bir html sayfası oluşturun

<!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>

Şimdi, farkı gözlemlemek için tarayıcıda çalışacak bir sanal ekran okuyucu emülatörüne ihtiyacınız var. Yani, krom tarayıcı kullanıcıları yükleyebilir ChromeVox uzantısı ve mozilla kullanıcıları ile gidebilirsiniz dişlerini ekran okuyucu eklentisi

Kurulum tamamlandıktan sonra, kulaklarınızı kulaklarınıza koyun, html sayfasını açın ve her iki düğmeye de odaklayın (sekmeye basarak) tek tek .. ve işitebilirsiniz .. odaklanarak first x button.. sadece söyleyecektir x button.. ama durumunda second x button.. back to the page buttonsadece duyacaksınız ..

Umarım şimdi iyi anladın !!

— Moumit
kaynak

1

Önemli bir nokta, titleözelliğin ilk düğmede bile göz ardı edilmesidir. Daha fazla bilgi: silktide.com/…

— Sphinxxx

2

Hala böyle mi? Ya da sağlamak için daha iyi title ve aria-label ?

— Kamafeather

2

Bu tam olarak istediğim şeydi. Sadece gerçek dünyada nasıl çalıştığını ve chromevoxbir cazibe gibi çalıştığını görmek ve duymak istedim ve aria-labelledby alanlarını okuyacaktım. Teşekkürler.

— Raj Rajeshwar Singh Rathore

7

Önkoşul:

Aria, görme engelli kullanıcıların kullanıcı deneyimini geliştirmek için kullanılır. Görme engelli kullanıcılar JAWS, NVDA, gibi ekran okuyucu yazılımlarını kullanarak uygulamada gezinir. Uygulamada gezinirken, ekran okuyucu yazılımı içeriği kullanıcılara duyurur. Aria, ekran okuyucu kullanıcılarının kontrolün rolünü, durumunu, etiketini ve amacını anlamasına yardımcı olan koda içerik eklemek için kullanılabilir

Aria görsel olarak hiçbir şeyi değiştirmez. (Aria da tasarımcılardan korkuyor).

arya etiketli

aria-label özelliği, etiketi ekran okuyucu kullanıcılarına iletmek için kullanılır. Genellikle arama giriş alanının görsel etiketi yoktur (tasarımcılar sayesinde). aria-label kontrol etiketini ekran okuyucu kullanıcılarına iletmek için kullanılabilir

Nasıl kullanılır:

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

Uygulamada görsel bir değişiklik yok. Ancak ekran okuyucular kontrolün amacını anlayabilir

arya-labelledby

Etiketi iletmek için hem aria-label hem de aria-labelledby kullanılır. Ancak aria-labelledby, sayfada zaten mevcut olan herhangi bir etikete referans vermek için kullanılabilirken, aria-label görsel olarak göstermediğim etiketi iletmek için kullanılır

Yaklaşım 1:

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

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

Yaklaşım 2:

aria-labelledby, ekran okuyucu kullanıcıları için iki etiketi birleştirmek için de kullanılabilir

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

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

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

— ndioewbnc
kaynak

3

titleFare elemanı gezinip zaman nitelik bir araç ipucu görüntüler. Bu harika bir ek olsa da, fareyi kullanamayan (mobilite engelleri nedeniyle) veya bu araç ipucunu göremeyen kişilere (örneğin: görme engelli veya ekran okuyucu kullanan kişilere) yardımcı olmaz.

Bu nedenle, buradaki dikkatli yaklaşım tüm kullanıcılara hizmet etmek olacaktır. Hem eklersiniz titleve aria-label(kullanıcılar ve web kullanımı farklı türde farklı sunma) bağlıyor.

İşte derinlemesine açıklayan iyi bir makalearia-label

— lucalanca
kaynak