Metin Erişilebilir Bir Şekilde Nasıl Bölünür

Faydalı Alternatif Metin Yazma

Geçenlerde bir makale yayınladım değişken yazı tiplerini canlandırma Javascript kütüphanesi yardımıyla Splitting.js. Birkaç kişi bunun erişilebilirlikle ilgili sonuçlarını sordu, bu nedenle bu makalede, erişilebilirlik açısından bir metin dizisini bölmenin neden sorunlu olabileceğine ve bölünmüş metnin olduğundan emin olmak için neler yapabileceğimize bir göz atacağız. herkes tarafından erişilebilir.

Splitting.js özeti

Diyelim ki bir kelimeniz, bir başlığınız, bir paragrafınız veya bir cümleniz var ve stilini harf bazında değiştirmek istiyorsunuz. bu şekilde Splitting.js çalışır, her karakteri (boşluk karakterleri dahil) bir <span> etiketlemek ve her birini daha kolay hedeflemenize ve manipüle etmenize izin veren çeşitli nitelikler eklemek. Ayrıca her kelimeyi kendi aralığı içinde sarar, böylece onları ayrı ayrı da hedefleyebilirsiniz. Birçok yaratıcı olasılık var!

Aşağıdaki Codepen demosu bir örnek içerir: Splitting.js eylemde, her harf için bir renk değeri hesaplamak üzere CSS’deki özel özellikleri kullanarak. Bu yazıda, onu erişilebilir kılmak için kullandığım teknikleri anlatacağım.

Kalemi Gör ARIA öznitelikleri ile JS erişilebilir metni bölme Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Metni bölmek neden bir erişilebilirlik sorunudur?

Kör, kısmen görebilen veya farklı nedenlerle web’de okumayı zor ya da sorunlu bulan bazı kişiler, bir web sitesinde gezinmelerine ve keşfetmelerine yardımcı olması için ekran okuyucu yazılımı kullanabilir. Ekran okuyucular, web sayfasının içeriğini bir kullanıcıya işitsel olarak duyurur. Ekran okuyucu kullanan bir kişinin deneyimini daha iyi anlamak için izlemenizi tavsiye ederim Bir Ekran Okuyucu Kullanıcısı Web’e Nasıl Erişir?Smashing Magazine’den bir erişilebilirlik web semineri.

Semantik HTML’nin özellikle önemli olmasının bir nedeni de budur: herkes web sayfalarımıza görsel olarak erişemez, bu nedenle doğru HTML öğelerini doğru amaç için kullanmak, sayfada gezinmeyi ve ilgili içeriği bulmayı çok daha kolay hale getirir.

Sunum amacıyla bir metin dizisini bölmek isteyebiliriz, ancak (örneğin) bir başlık içindeki işaretlemeyi değiştirmek, ekran okuyucuların metni nasıl yorumladığını ve kullanıcıya nasıl geri okuduğunu etkileyebilir. Aşağıdaki işaretlemeyi göz önünde bulundurun – basit <h1> başlık etiketi:

<h1>Oh hello there</h1>

Şimdi aynı başlığa bölünmüş olarak bakalım spans:

<h1>
<span>O</span>
<span>h</span>
<span> </span>
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span></span>
<span>T</span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</h1>

Her karakter ayrı bir etikete sarıldığında, bazı ekran okuyucular her kelimeyi yorumlamaz, bunun yerine her harfi ayrı ayrı duyurur. Bu, bir ekran okuyucu kullanarak sayfada gezinen biri için pek yararlı bir deneyim olmaz!

Bu davranış, ekran okuyucular arasında tutarlı değil. Bunu başlangıçta, metni istendiği gibi okumakta sorun yaşamayan VoiceOver on Safari ile test ettim. Ancak diğerleri, kelime sonlarını atlar ve içeriği tek bir uzun kelime olarak okur.

WAI-ARIA ile erişilebilir kılmak

Neyse ki, bu erişilebilirlik endişeleri yapma Splitting.js gibi harika kitaplıkları kullanamayacağımız anlamına gelir. Metnimizin herkes tarafından erişilebilir olmasını sağlamak için biraz daha çaba göstermemiz gerekiyor.

WAI-ARIA öğelerin yardımcı teknolojilere nasıl sunulması gerektiğini tanımlamamıza yönelik nitelikler sağlar. Web sitelerini daha erişilebilir hale getirmeye yardımcı olmak için tasarlanmış olsa da, anlamsal HTML’nin yerini tutmaz. Semantik HTML tek başına yeterli olmadığında kullanılmalıdır.

arya etiketi

Örnek başlığımız durumunda, ekran okuyucular için erişilebilir bir metin etiketi sağlayabiliriz. aria-label bağlanmak:

<h1 aria-label="Oh hello there">
<span>O</span>
<span>h</span>
<span> </span>
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span></span>
<span>T</span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</h1>

kullanma aria-label tek başına bazı ekran okuyucuların metni sesli okumasına ve hem metin etiketini okumasına neden olabilir ve içerik. Bu ideal olmaktan uzaktır – ekran okuyucu kullanıcılarının etiketi duyduktan sonra kendileri için hecelenen metni dinlemek zorunda kalmalarını istemiyoruz. bu nedenle, öğenin iç içeriğini kullanarak yapabileceğimiz ekran okuyuculardan gizlememiz gerekir. aria-hidden.

arya-gizli

aria-hidden öğeyi erişilebilirlik ağacından gizler, böylece ekran okuyucu onu yok sayar. Öğenin kendisini gizleyemeyiz, çünkü o zaman hiç okunmayacaktır – ancak alt öğelerini gizleyebiliriz. Yani burada bir seçeneğimiz var: ekleyebiliriz aria-hidden her birine <span> başlığımızda:

<h1 aria-label="Oh hello there">
<span aria-hidden="true">O</span>
<span aria-hidden="true">h</span>
<span aria-hidden="true"> </span>
<span aria-hidden="true">H</span>
<span aria-hidden="true">e</span>
<span aria-hidden="true">l</span>
...
</h1>

Veya, bu biraz sıkıcı geliyorsa, tüm çocukları başka bir aralıkta gruplandırmayı seçebilir ve ekleyebiliriz. aria-hidden bunun yerine:

<h1 aria-label="Oh hello there">
<span aria-hidden="true">
<span>O</span>
<span>h</span>
<span> </span>
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span></span>
<span>T</span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</span>
</h1>

ARIA niteliklerini eklemek için Javascript kullanma

eğer kullanıyorsak Spitting.js bu alt öğeleri oluşturmak için ekleyebiliriz aria-hidden="true" kullanarak her kelimeye forEach döngü. Daha önceden bahsettiğim gibi, bölme bir cümleyi kelimelere böler ve her birini bir <span>her karakteri sarmanın yanı sıra. Splitting() bir dizi hedef öğe döndürür, bu nedenle önce her birinin üzerinde döngü yapmamız, ardından bölünmüş öğe içindeki her Word üzerinde döngü yapmamız gerekir. Sonra elemanın bir değeri olup olmadığını kontrol edebiliriz. aria-label öznitelik ve eğer öyleyse ekleriz aria-hidden:

/* Loop through all split elements */
Splitting().forEach((s) => {
/* Loop through words */
s.words.forEach((word) => {
/* If the parent element includes `aria-label`, set `aria-hidden="true"` */
if (word.parentElement.getAttribute('aria-label')) {
word.setAttribute('aria-hidden', true)
}
})
})

Bu, şöyle bir HTML yapısıyla sonuçlanacaktır:

<h1 aria-label="Oh hello there">
<span aria-hidden="true">
<span>O</span>
<span>h</span>
</span>
<span> </span>
<span aria-hidden="true">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
</span>
<span></span>
<span aria-hidden="true">
<span>T</span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</span>
</h1>

Kullanıcı yalnızca içeriği duyar aria-label öznitelik, öğenin içindeki metin değil. Bu, erişilebilirlik endişelerimizle ilgilenir ve öğenin metin içeriğini, herkes tarafından erişilebilir olacağını bilerek güvenli bir şekilde bölebileceğimiz anlamına gelir.

eğer harika olurdu Splitting.js farklı metin türleri için dikkate alınması gereken birçok farklı husus olmasına rağmen, bunu varsayılan olarak yapabilir. Şu anda bir Github sorununu aç erişilebilirlik özellikleri eklemek için.

Sayesinde Andy Bell orijinal gönderiyi yayınladıktan sonra bu erişilebilirlik çözümünü twitter beslememde belirttiğim için!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.