İçeriği gizleme ve güncelleme

Yardımcı teknolojilerden içerik gizleme

Alice Boxhall

Dave Gash

Meggin Kearney

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 ve aria-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ı teknolojiye aria-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 öğesinin false 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ğer additions 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.