HTML'de aria-label: Doğru kullanım şekli

aria-label: Az kod, büyük etki

Bir çevrimiçi mağazayı ziyaret ettiğinizi ve yalnızca alışveriş sepeti simgesini gördüğünüzü hayal edin. Görme engeli olmayan kullanıcılar sipariş verme işlevini hemen anlar. Ancak ekran okuyucu kullanan kullanıcılar için bu düğme belirsiz kalır. Sadece "Sepete ekle" gibi bir aria etiketiyle açıklanabilir ve erişilebilir hale gelir.

Dijital erişilebilirlik kodda başlar. Semantik HTML temel oluştururken, aria-label yalnızca standart öğelerin yetersiz kaldığı durumlarda tamamlayıcı rol oynar. Bu, yalnızca kurumlara değil, işletmelere de fayda sağlar; özellikle de net düğmeler ve form alanları sorunsuz bir sipariş sürecini sağlayan çevrimiçi mağazalara.

Aria etiketi nedir?

`aria-label` özniteliği, W3C (Dünya Çapında Web Konsorsiyumu) tarafından geliştirilen ARIA (Erişilebilir Zengin İnternet Uygulamaları) spesifikasyonunun bir parçasıdır. W3C, açık web standartları geliştiren uluslararası bir kuruluştur ve bu standartlar arasında şunlar yer alır: Web İçeriği Erişilebilirlik Yönergeleri (WCAG) .

`aria-label`, HTML öğelerine görünmez etiketler ekler; bu etiketler, ekran okuyucular tarafından görünür etiketler eksik veya belirsiz olduğunda bildirilir. Bu, tasarım ve teknik erişilebilirlik arasındaki boşluğu kapatarak arayüzleri herkes için anlaşılabilir hale getirir.

ARIA niteliklerinin önemi

ARIA öznitelikleri, HTML'nin sınırlarının zorlandığı yerlerde erişilebilirliği sağlamak için geliştirilmiştir. JavaScript öğeleri, özel widget'lar veya karmaşık görsel tasarımlar gibi dinamik içeriğe sahip modern web siteleri kendi zorluklarını beraberinde getirir. Burada, aria-label gibi bir ARIA özniteliği, bu arayüzlerin bile ekran okuyucular tarafından doğru şekilde yorumlanmasını sağlar.

Kullanıcı arayüzündeki görünür etiketlerden farkı

Aria-label ve visible labels arasındaki temel farklardan biri hedef kitlelerinde yatmaktadır: visible labels tüm kullanıcılara açıkken, aria-label yalnızca yardımcı teknolojiler içindir.

Görünür etiketler, arayüzde gösterilen standart metin açıklamalarıdır; örneğin, bir giriş alanının üstünde veya yanında yer alan "E-posta adresi" metni:

<label for="email">E-posta adresi</label>

<input type="email" id="email" name="email">

Tüm kullanıcılar alana ne girmeleri gerektiğini hemen anlar ve ekran okuyucular da metni sesli olarak okur. Böyle görünür bir etiket yoksa, bunun yerine aria etiketi kullanılabilir. Bu etiket, yalnızca ekran okuyucuların algılayabileceği görünmez bir açıklama ekler:

<input type="email" id="email" name="email" aria-label="Email address">

Bu sayede, görünür bir etiket olmasa bile alan anlaşılabilir ve erişilebilir kalır.

HTML'de aria-label nasıl çalışır?

Ekran okuyucular, bir öğenin erişilebilir adını sabit bir sırayla belirler:

• aria-etiketli – kodda görünen metne yapılan referanslar

• aria-etiketi – görünmez etiket

• görünür <label> – form alanları için

• metin içeriği – örneğin, düğme metni

• başlık niteliği – son yedek plan

Arama simgesi düğmesi, ek bir açıklama olmadan tanınmaz. aria-label="Ara" Ekran okuyucu "Ara" kelimesini sesli olarak, net ve kullanışlı bir şekilde okuyor.

Örnek:
Arama için büyüteç simgesi bulunan bir düğmenin görünür metni yoktur. Ek bilgi olmadan, ekran okuyucular için anlamsız olur. Ancak, eklerseniz... aria-label="Ara" Ekran okuyucu "Ara" diye duyurur ve diğer tüm olası kaynakları göz ardı eder.

Butonlar ve bağlantılar için aria-label örnekleri

`aria-label`'ın yaygın kullanım alanlarından biri, yalnızca bir simge içeren düğmelerdir. Görme engeli olmayan kullanıcılar için büyüteç simgesi hemen bir arama işlevi olarak anlaşılır, ancak ekran okuyucular için hiçbir anlamı yoktur. `aria-label` ile düğme, yardımcı teknolojiler için de anlaşılabilir hale gelir:

<button aria-label="Aramayı başlat">

<svg aria-hidden="true" width="24" height="24">…</svg>

</button>

Bir diğer pratik örnek ise listelerdir. Birçok çevrimiçi mağaza, semboller içeren kategori listeleri gibi simge tabanlı listeler kullanır. Ekran okuyucular yalnızca "5 öğeli liste" şeklinde duyuru yapacaktır. aria-label="Ürün kategorileri" Böylece listenin ne içerdiği netleşiyor.

Bağlantılar ise nereye yönlendirdiklerini açıkça belirtmelidir. "Daha fazla bilgi edinin" gibi belirsiz bir ifade, bağlam olmadan anlaşılmaz kaldığı için erişilebilir değildir. aria-label bu durumu iyileştirebilir:

<a href="/article/accessibility"

aria-label="Dijital erişilebilirlik hakkında makale okuyun">

Dijital erişilebilirlik hakkında makale okuyun.

</a>

Form öğeleri için aria-etiketi

Formlar, neredeyse her web sitesinin temel bir parçasıdır. Erişilebilir olmaları için her form alanının açık bir adı olmalıdır. Bu genellikle görünür bir etiketle yapılır. <label> element:

<label for="email">E-posta adresi</label>

<input type="email" id="email" name="email">

Avantajı: Tüm kullanıcılar "E-posta adresi" etiketini görür ve ekran okuyucular bunu sesli olarak okur. Ayrıca, kullanıcılar etikete tıklayarak alanı otomatik olarak odaklayabilirler.

Bazen, tasarım nedenleriyle, görünür bir etiket kullanılmaz; örneğin, alanın içinde yalnızca bir yer tutucu göründüğünde. Ekran okuyucu kullanıcıları için bu sorunludur, çünkü yer tutucular resmi etiket olarak kabul edilmez. İşte burada aria-label devreye giriyor:

<input type="email"

aria-label="E-posta adresi"

yer tutucu="example@domain.com">

Görme engeli olmayan kullanıcılar alanı her zamanki gibi görürken, ekran okuyucu kullananlar "E-posta adresi" ifadesini duyarlar. Bu, görünür bir etiket olmasa bile alanın anlaşılabilir kalmasını sağlar.

Bir diğer örnek ise giriş gerektiren alanlardır. ek talimatlar —örneğin parola alanları gibi. Burada basit bir etiket yeterli değildir. aria-describedby Bu alan, daha fazla bilgiye bağlanabilir:

<input type="password"

aria-label="Şifre"

aria-describedby="pwd-help">

<div id="pwd-help">En az 8 karakter, bir rakam dahil</div>

Bu durumda, ekran okuyucu önce "Şifre"yi, ardından "En az 8 karakter, bunlardan biri sayı olmalı" ifadesini okur.

Önemli: Formlardaki aria-label genellikle aynı kalmalıdır. istisna Görünür bir <label> Bu neredeyse her zaman daha iyi bir çözümdür; herkes için açıktır, kullanımı daha kolaydır ve daha az ek mantık gerektirir. aria-label, esas olarak etiketler tasarım veya yerleşim nedenleriyle gizlendiğinde yedek bir çözüm olarak kullanılmalıdır.

ARIA'nın rolleri ve plak şirketleriyle etkileşimi

ARIA rolleri bir öğenin işlevini tanımlarken, aria-label ise adını tanımlar. Bu kombinasyon, HTML'nin standart anlamsal yapısının ötesine geçen özel widget'lar için özellikle önemlidir:

<div role="button" aria-label="Bültene abone ol" tabindex="0">

<svg>...</svg>

Üye olmak

</div>

Menüler gibi etkileşimli bileşenler için ek özellikler önem taşır. aria-genişletilmiş Menünün genişletilmiş olup olmadığını gösterirken, aria-haspopup Bir öğenin açılır pencere veya menü tetiklediğini gösteren sinyaller:

<button aria-label="Ana menüyü aç">

aria-expanded="false"

aria-haspopup="true"

aria-controls="main-menu">

☰

</button>

<ul id="main-menu" role="menu" hidden>

<li role="menuitem"><a href="#home">Ana Sayfa</a></li>

<li role="menuitem"><a href="#about">Hakkımızda</a></li>

</ul>

Ancak ARIA'nın ilk kuralı geçerlidir: Mümkün olduğunca yerel HTML kullanın. Gerçek <button> bir unsur her zaman bir şeye tercih edilir. <div role="button"> Çünkü zaten gerekli tüm işlevleri içeriyor.

aria-label ve alt metin arasındaki fark

Sık karşılaşılan bir yanılgı, aria-label ile alt metni karıştırmaktır. Her ikisi de erişilebilirliğe hizmet eder, ancak farklı amaçlara hizmet ederler:

• Alternatif metin Bu, özellikle görseller için geçerlidir ve görsel içeriği tanımlar. Görsel yüklenemediğinde görünür ve ekran okuyucular tarafından sesli olarak okunur.
  

• aria-etiketi Öte yandan, neredeyse tüm HTML öğelerine uygulanabilir ve ekran okuyuculara bir öğenin işlevi veya anlamı hakkında ek bilgi sağlar.

<!-- Doğru: Resimler için alternatif metin -->

<img src="product.jpg"

alt="Ekranı açık dizüstü bilgisayar">

<!-- Doğru: Metin içermeyen düğme için aria-label -->

<button aria-label="Sepete ekle">

<svg aria-hidden="true">...</svg>

</button>

Görseller için Erişilebilir Ad Hesaplaması şu hiyerarşiyi izler: aria-etiketli geçersiz kılmalar aria-etiketi Bu da sırayla şunu geçersiz kılar: alternatif öznitelik. Ama kullanarak. Ama şunu kullanarak: aria-label="Alternatif metin" yerine bir alternatif Bu özellik önerilmez. alternatif Grafik tasarım söz konusu olduğunda her zaman ilk tercih olmalıdır.

SVG ikonları kullanırken özel dikkat gösterilmesi gerekir:

• Dekoratif simgeler Ekran okuyuculardan gizlenmelidir aria-hidden="true" .

• İşlevsel simgeler Anlamlı bir aria etiketi gerekiyor.
  

aria-label kullanımına ilişkin en iyi uygulamalar

`aria-label`'ın etkili kullanımı, hem erişilebilirliği hem de sürdürülebilir kodu sağlamak için açık yönergeleri takip eder. Geliştiriciler, kullanıcılar için karışıklığı önlemek amacıyla birkaç faktörü göz önünde bulundurmalıdır:

• aria-label özelliğini dikkatli kullanın: Yalnızca yerel HTML öğeleri veya görünür etiketler yeterli olmadığında uygulayın. Metin içeriği veya öznitelikler aracılığıyla zaten açıklayıcı bir isme sahip olan öğelerin ek bir aria-label'a ihtiyacı yoktur.
  

• Açık ve özlü açıklamalar yazın: Aria etiketi açıklayıcı olmalı ve öğenin amacını doğru bir şekilde tanımlamalıdır. Son kullanıcılar için anlam ifade etmeyen teknik terimlerden veya dahili adlardan kaçının.
  

• Anlamsal HTML ile birleştirin: ARIA, HTML'i tamamlar ancak onun yerini almaz. Aşağıdaki gibi anlamsal öğeler kullanın: <button> , <nav> , veya <ana> Temel olarak bunları kullanın ve gerektiğinde ARIA nitelikleriyle genişletin.

<!-- YANLIŞ: gereksiz aria-etiketi -->

<button aria-label="Giriş yap">Giriş yap</button>

<!-- SAĞ: aria-label gerekmiyor -->

<button>Giriş yap</button>

• Odak yönetimi konusunu ele alalım: Etkileşimli widget'lar için, odaklanmayı doğru şekilde yönetmek çok önemlidir. Açılır pencereler ve diyalog kutuları, ilk odaklanılabilir öğeye ilk odağı ayarlamalı ve kapatıldığında tetikleyici öğeye odağı geri döndürmelidir.

ARIA etiketlemesinde sık yapılan hatalar

En sık karşılaşılan uygulama hataları, ARIA hiyerarşisinin anlaşılmamasından ve yanlış kullanımından kaynaklanmaktadır:

• Çelişkili etiketler: Eğer aria-label görünür metinle eşleşmiyorsa, sesli giriş yazılımı kullanıcıları kafa karışıklığı yaşar. Örneğin, bir kişi etiket olarak "Vorname" görür, ancak ekran okuyucu "İlk Ad" diye seslenir. Bu durumda sesli komutlar çalışmaz.
  

• Aşırı ARIA kullanımı: Her öğeye aria-label eklemek erişilebilirliği azaltır. Ekran okuyucu kullananlar, hedeflerine daha hızlı ulaşmak yerine gereksiz bilgilerle boğulurlar.
  

• Dinamik içeriğin güncellenmesi başarısız oldu: JavaScript tabanlı öğeler için, durumlar değiştiğinde aria-label değerlerinin güncellenmesi sağlanmalıdır. Bu, özellikle dinamik durumlara sahip widget'lar için önemlidir.
  

• Yanlış etiketler: Öğenin mevcut işlevini artık yansıtmayan etiketler, yanlış beklentiler yaratır ve gezinmeyi zorlaştırır.
  

Geliştiriciler ve tasarımcılar için kontrol listesi

• Gerekli olup olmadığını kontrol edin: Elementin gerçekten bir aria-label'a ihtiyacı var mı, yoksa anlamsal HTML yeterli mi?
  

• Ekran okuyucularla test edin: Doğrulama için NVDA (Windows), VoiceOver (Mac) veya diğer ekran okuyucuları kullanın.
  

• Erişilebilir ad hesaplamasının doğruluğunu kontrol edin: Hangi ismin hesaplandığını kontrol etmek için tarayıcınızın geliştirici araçlarını kullanın.
  

• Tutarlılığı sağlayın: Web sitesi genelinde benzer öğeler için tutarlı bir ifade biçimi kullanın.
  

• ARIA uygulamalarının dokümantasyonu: ARIA özniteliklerinin neden ve nasıl kullanıldığını kodda açıklayın.
  

• Tüm giriş yöntemlerini göz önünde bulundurun: Widget'ların hem klavye hem de dokunmatik ekran üzerinden çalıştırılabilir olduğundan emin olun.
  

• Listeleri ve navigasyonu inceleyin: Listeler ve gezinme bağlantıları için anlamsal HTML etiketleri kullanın ve gerektiğinde ARIA özniteliklerini ekleyin.
  

Sonuç: aria-label'ı etkili bir şekilde nasıl kullanabilirsiniz?

`aria-label` özniteliği, erişilebilir web siteleri için değerli bir araçtır, ancak dikkatli bir uygulama gerektirir. Görsel tasarım ile anlamsal erişilebilirlik arasındaki boşluğu doldurur, ancak her zaman anlamsal HTML'nin bir tamamlayıcısı olarak görülmelidir, bir yerine geçmesi olarak değil.

ARIA etiketlerinin etkinliği en çok simge düğmelerinde, özel widget'larda ve görünür etiketlerin görsel düzeni bozacağı durumlarda belirgindir. Aynı zamanda, BFSG ve WCAG 2.1 gibi yasal gereklilikler, ARIA etiketlerine sistematik bir yaklaşım gerektirmektedir.

ARIA'nın başarılı bir şekilde uygulanmasının anahtarı, web erişilebilirliğinin, bireysel yetenekleri veya sınırlamaları ne olursa olsun, tüm insanlar için dijital kapsayıcılığa doğru atılan önemli bir adım olduğunu anlamaktır.

Sıkça Sorulan Sorular

`aria-label` her zaman mı kullanılmalı, yoksa sadece gerektiğinde mi?

`aria-label` yalnızca yerel HTML öğeleri veya görünür etiketler yeterli olmadığında uygulanmalıdır. Aşırı kullanım, gereksiz bilgilere ve ekran okuyucu kullanıcıları için daha kötü bir kullanıcı deneyimine yol açar.

Aria etiketimin çalışıp çalışmadığını nasıl test edebilirim?

Gerçekçi testler için NVDA (Windows) veya VoiceOver (Mac/iOS) gibi ekran okuyucuları kullanın. Tarayıcı geliştirici araçları, Erişilebilirlik sekmesinde hesaplanan özellikleri ve gerçek erişilebilir adı görüntüler.

Hangi ekran okuyucular aria-label özelliğini destekliyor?

NVDA, JAWS, VoiceOver ve TalkBack gibi modern ekran okuyucular, aria-label için geniş destek sunmaktadır. Ancak uyumluluk, tarayıcıya ve sürüme bağlı olarak değişebilir, bu nedenle farklı kurulumlarda test edilmesi önerilir.

Bir öğenin aria etiketi yoksa ne olur?

Ekran okuyucular, Erişilebilir Ad Hesaplama hiyerarşisinde bir sonraki kullanılabilir adı kullanır: aria-labelledby, görünür metin içeriği veya başlık özniteliği. Hiçbir etiket olmadan, etkileşimli öğeler yardımcı teknolojiler için anlaşılmaz kalabilir.