İ etiketi için alt veya başlık niteliği

Harika yazı tipi kullanıyorum ve yazı tiplerini şu şekilde gösteriyorum:

<i class="icon-lock"></i>

Bu hoş bir küçük kilit sembolü gösterecektir. Kullanıcının bunun tam olarak ne anlama geldiğini bilmesi için, başlık ve alt gibi özellikler eklemeyi denedim, ancak boşuna.

<i>Resimler için alt ve bağlantılar için başlık ile aynı görevi yürüten etiket için kullanabileceğim herhangi bir nitelik var mı ?

Sen kullanabilirsiniz titlebir de özelliği iherhangi bir öğe, örneğin gibi, eleman

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

Yardımcı olup olmadığı daha zor bir konudur. Tarayıcılar genellikle titleöznitelik değerini fareyle üzerine gelindiğinde bir "araç ipucu" olarak gösterir, ancak kullanıcı neden simgenin üzerine gelsin? Ve bu tür araç ipuçları zayıf kullanılabilirliğe sahiptir; sözde CSS araç ipuçları genellikle daha iyi çalışır.

Ekran okuyucular, kullanıcıya titleözniteliklere isteğe bağlı erişim verebilir , ancak içeriği boş olan öğelerle ne yaptıklarından emin değilim.

WAI-ARIA'nın ilerlemesiyle, yazı tipi simgelerini kullanırken, erişilebilirliği iyileştirmek için muhtemelen aşağıdakilerin bir kombinasyonunu kullanmalısınız:

• Öğenin örtük yerel rol semantiğini kaldırmaya yönelik rol sunumu . Bu, özellikle simgeler sağlamak için yerel semantikli bir öğe kullanıyorsanız (ab) önemlidir, çünkü örneğinizde i öğesini kullanan durum budur (teknik özelliklere göre "alternatif bir seste bir metin aralığını temsil eder. veya ruh hali [...] " ).
• Bir arya etiketli elemanını etiketleyen bir dize değeri sağlamak üzere -veya- bir yerli HTML başlık size süpürdü zaman bir araç ipucu görüntüleyen tarayıcı ile Tamam, özelliğe.
• Bir arya-gizli gizlemek için özellik oluşturulan içeriğe yardımcı teknolojilerden (bir simge yazı tipi ailesini kullanan gibi bir oluşturulan karakter vardır: öncesi: sonra). Spesifikasyonlara göre:

Yazarlar, ancak bu içeriği gizleme eylemi, gereksiz veya gereksiz içeriği kaldırarak yardımcı teknolojilerin kullanıcılarının deneyimini iyileştirmeyi amaçladıysa , dikkatli bir şekilde, yardımcı teknolojilerden görünür şekilde oluşturulan içeriği gizlemek için aria-hidden özelliğini kullanabilir . Görünür içeriği ekran okuyuculardan gizlemek için aria-hidden özelliğini kullanan yazarlar, aynı veya eşdeğer anlam ve işlevselliğin yardımcı teknolojilere maruz kalmasını sağlamalıdır.

Kullanım durumunuzu tam olarak bilmiyorum, bu yüzden bir telefon numarası sağlamanın daha basit halini kullanma özgürlüğüne sahibim. Tercih azalan yılında ben kullanırım:

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone" 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

Lütfen aria etiketi ve başlık özelliklerinin öğenin içeriğini tanımlaması gerektiğini unutmayın . Sonraki kardeş öğe değil. Yani ben şu çözümü gibi hissediyorum değil özellikleri (telefon numarası aslında içinde sanki en erişilebilirlik araçları aslında aynı gözlemlenebilir davranışı olurdu bile uyarınca spanelemanı):

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576

Bunun <span>yerine bu satırlar boyunca veya başka bir şey kullanmalısınız. Aradığınız title=""buysa, üzerine gelindiğinde biraz metin vermek için özniteliği kullanabilirsiniz . Ekran okuyucularına erişilebilirlik veya SEO değeri sağlama konusunda aşağıdaki CSS'yi ekleyebilirsiniz:

.icon-lock{
    text-indent:-99999px;
}

Ve sonra işaretlemenizi şöyle yazın:

<span class="icon-lock">What I want the screen reader to say</span>

<i>etiketleri metni işaretlemek içindir. Bu etiketin anlamsal anlamını italik kullanarak hiçbir ilgisi olmayan bir şeye değiştiriyorsunuz (hatta italik etiket bile kötü bir fikirdir). Bunun SPANyerine a kullanmalısınız.

İtalik öğeler altöznitelikleri desteklemez , IMGöğeler destekler . Bir ALTöznitelik istiyorsanız , bir resim kullanın.

Resim gibi davranan yazı tiplerinin rolünün role = "img" olarak ayrılması gerektiğini düşünüyorum. Bu daha sonra aria-label = "alt-text" ile kullanılabilir. ARIA Erişilebilir Ad algoritması nedeniyle çalışır. Bakınız: Img Rolünü Kullanan Aria Teknikleri .