Yardımcı teknolojilerden içerik gizleme
arya-gizli
Yardımcı teknoloji kullanıcıları için deneyimi hassaslaştırmaya yönelik bir diğer önemli teknik, sayfanın yalnızca ilgili bölümlerinin yardımcı teknolojiye açık olmasını sağlamaktır. DOM'un bir bölümünün erişilebilirlik API'lerine maruz kalmamasını sağlamanın birkaç yolu vardır.
Öncelikle, DOM'da açıkça gizlenen öğeler erişilebilirlik ağacına dahil edilmez. Bu nedenle, CSS stili visibility:
hidden
veya display: none
olan ya da HTML5 hidden
özelliğini kullanan öğeler de yardımcı teknoloji kullanıcılarından gizlenir.
Bununla birlikte, görsel olarak oluşturulmamış ancak açıkça gizlenmemiş bir öğe, erişilebilirlik ağacına yine dahil edilir. Yaygın tekniklerden biri, ekran dışında mutlak konumlandırılmış bir öğeye "yalnızca ekran okuyucu metni" eklemektir.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Gördüğümüz gibi, başka şekilde gizlenen bir öğeye referans veren aria-label
, aria-labelledby
veya aria-describedby
özelliği aracılığıyla yalnızca ekran okuyucuya metin sağlamak da mümkündür.
"Yalnızca ekran okuyucu" metni oluşturma hakkında daha fazla bilgi için Metni gizleme teknikleri konulu bu WebAIM makalesine bakın.
Son olarak ARIA, aria-hidden
özelliğini kullanarak görsel olarak gizli olmayan yardımcı teknolojilerden içerik hariç tutmak için bir mekanizma sağlar.
Bu özelliğin bir öğeye uygulandığında, öğe ve tüm alt öğeleri erişilebilirlik ağacından etkili bir şekilde kaldırılır. Bunun tek istisnası, aria-labelledby
veya aria-describedby
özelliği tarafından atıfta bulunulan öğelerdir.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
Örneğin, ana sayfaya erişimi engelleyen bir kalıcı kullanıcı arayüzü oluşturuyorsanız aria-hidden
kullanabilirsiniz. Bu durumda, gören bir kullanıcı sayfanın büyük bir kısmının şu anda kullanılamadığını belirten bir tür yarı şeffaf yer paylaşımı görebilir, ancak bir ekran okuyucu kullanıcısı sayfanın diğer bölümlerini yine de keşfedebilir. Bu durumda, daha önce açıklanan klavye tuzağı oluşturmanın yanı sıra sayfanın şu anda kapsam dışında olan bölümlerinin de aria-hidden
olduğundan emin olmanız gerekir.
Artık ARIA'nın temellerini, yerel HTML semantiği ile nasıl çalıştığını, erişilebilirlik ağacında oldukça büyük bir operasyon gerçekleştirmek ve tek bir öğenin anlamını değiştirmek için nasıl kullanılabileceğini öğrendiniz. Şimdi ARIA'yı zamana duyarlı bilgileri aktarmak için nasıl kullanabileceğimize bakalım.
aria-live
aria-live
, güncellemelerin sayfanın bir bölümünü keşfeden kullanıcılar için değil, sayfanın konumundan bağımsız olarak kullanıcılara hemen iletilmesi gerektiği açısından, geliştiricilerin sayfanın bir bölümünü "yayında" olarak işaretlemelerine olanak tanır. Bir öğenin aria-live
özelliği olduğunda, sayfanın onu içeren ve alt öğelerinin yer aldığı bölüme canlı bölge adı verilir.
Örneğin, canlı bölge, bir kullanıcı işleminin sonucu olarak görünen bir durum mesajı olabilir. Mesaj, gören bir kullanıcının dikkatini çekecek kadar önemliyse aria-live
özelliğini ayarlayarak yardımcı teknoloji kullanıcısının dikkatini mesaja yönlendirmek kadar önemlidir. Bu sade div
ürününü karşılaştırın
<div class="status">Your message has been sent.</div>
"canlı" eşdeğeriyle.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
için izin verilen üç değer vardır: polite
, assertive
ve off
.
aria-live="polite"
, yardımcı teknolojiye, şu anda yapmakta olduğu işi bitirdiğinde kullanıcıyı bu değişiklik konusunda uyarmasını bildirir. Bir şey önemli ancak acil değilse vearia-live
kullanımının çoğunluğunu karşılıyorsa bu seçeneği kullanmak idealdir.aria-live="assertive"
, yardımcı teknolojiye yaptığı işlemi kesmesini ve kullanıcıyı bu değişiklik konusunda hemen uyarmasını bildirir. Bu, yalnızca "Sunucu hatası oluştu ve değişiklikleriniz kaydedilmedi; lütfen sayfayı yenileyin" gibi bir durum mesajı veya adım widget'ındaki düğmeler gibi kullanıcı işleminin doğrudan sonucu olarak bir giriş alanında yapılan güncellemeler gibi önemli ve acil güncellemeler için geçerlidir.aria-live="off"
, yardımcı teknolojiyearia-live
kesintisini geçici olarak askıya almasını bildirir.
Canlı bölgelerinizin doğru çalışmasını sağlayacak bazı püf noktaları vardır.
İlk olarak, aria-live
bölgeniz muhtemelen ilk sayfa yüklemede ayarlanmış olmalıdır.
Bu, uygulanması gereken bir kural değildir ancak bir aria-live
bölgesiyle ilgili sorun yaşıyorsanız sorun bundan kaynaklanıyor olabilir.
İkinci olarak, farklı ekran okuyucular farklı değişiklik türlerine farklı şekilde tepki verir. Örneğin, bir alt öğenin hidden
stilini true'dan false'a getirerek bazı ekran okuyucularda uyarı tetiklemek mümkündür.
aria-live
ile çalışan diğer özellikler, canlı bölge değiştiğinde kullanıcıya nelerin bildirileceğini hassas bir şekilde ayarlamanıza yardımcı olur.
aria-atomic
, güncellemelerle ilgili iletişim kurarken bölgenin tamamının bütün olarak kabul edilip edilmeyeceğini belirtir. Örneğin, gün, ay ve yıldan oluşan bir tarih widget'ında aria-live=true
ve aria-atomic=true
varsa ve kullanıcı yalnızca ayın değerini değiştirmek için bir adım öğesi denetimi kullanırsa tarih widget'ının tüm içeriği tekrar okunur. aria-atomic
değeri true
veya false
(varsayılan) olabilir.
aria-relevant
, kullanıcıya ne tür değişikliklerin sunulması gerektiğini belirtir.
Ayrı olarak veya jeton listesi olarak kullanılabilecek bazı seçenekler vardır.
- eklemeler anlamına gelir. Bu, canlı bölgeye eklenen herhangi bir öğenin önemli olduğu anlamına gelir. Örneğin, mevcut bir durum mesajları günlüğüne kapsam eklemek, aralığın kullanıcıya duyurulacağı anlamına gelir (
aria-atomic
öğesininfalse
olduğu varsayılır). - metin: Herhangi bir alt düğüme eklenen metin içeriğinin ilgili olduğu anlamına gelir. Örneğin, özel bir metin alanının
textContent
özelliği değiştirildiğinde, değiştirilen metin kullanıcıya okunur. - kaldırma. Diğer bir deyişle, herhangi bir metnin veya alt düğümlerin kaldırılması kullanıcıya aktarılmalıdır.
- tümü: tüm değişikliklerin alakalı olduğu anlamına gelir. Bununla birlikte,
aria-relevant
için varsayılan değeradditions text
şeklindedir. Diğer bir deyişle,aria-relevant
özelliğini belirtmezseniz kullanıcıyı öğeye yapılan tüm eklemeler için güncellersiniz. Bu, büyük olasılıkla istemenizdir.
Son olarak aria-busy
, yardımcı teknolojiye öğelerin yüklenmesi gibi bir öğede yapılan değişiklikleri geçici olarak yoksayması gerektiğini bildirmenize olanak tanır. Her şey yapıldıktan sonra, okuyucunun çalışmasını normalleştirmek için aria-busy
, false olarak ayarlanmalıdır.