İçeriği yardımcı teknolojilerden gizleme
arya-gizli
Yardımcı deneyimin iyileştirilmesine yardımcı olmak için teknoloji kullanıcılarını, sayfanın yalnızca alakalı bölümlerinin yardımcı teknolojilerle karşılaşmaktır. Bir bölümün belirli bir erişilebilirlik API'lerinden yararlanmıyor.
Öncelikle, DOM'de açıkça gizlenen hiçbir şey dahil edilmez.
erişilebilirlik ağacı var. Dolayısıyla visibility:
hidden
veya display: none
CSS stiline sahip veya HTML5 hidden
özelliğini kullanan her şey de
gizlenmiş olabilir.
Bununla birlikte, görsel olarak oluşturulmayan ancak açıkça gizlenemeyen bir öğe erişilebilirlik ağacında bulunduğunu unutmayın. Yaygın tekniklerden biri "yalnızca ekran okuyucu metin" ekranın dışına mutlak konumlandırılmış bir öğede.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Ayrıca, gördüğümüz gibi, bir ekran okuyucusu için yalnızca metin
Bir referans yapan aria-label
, aria-labelledby
veya aria-describedby
özelliği
öğesidir.
Gizleme teknikleri hakkındaki bu WebAIM makalesini metin "yalnızca ekran okuyucu" oluşturma hakkında daha fazla bilgi metin.
Son olarak, ARIA, yardımcı kaynaklardan hariç tutmak için bir mekanizma sunar.
aria-hidden
özelliğini kullanarak, görsel olarak gizli olmayan bir teknolojiden yararlanabilirsiniz.
Bir öğeye bu özelliğin uygulanması, onu ve tüm özelliklerinin
alt öğeleri bulunur. Tek istisna,
aria-labelledby
veya aria-describedby
özelliği ile ifade edilir.
<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, bazı kalıcı kullanıcı arayüzü oluşturuyorsanız aria-hidden
kullanabilirsiniz.
ana sayfaya erişimi engeller. Bu durumda, gören bir kullanıcı,
Bu yarı şeffaf yer paylaşımı, sayfanın büyük kısmının şu anda
kullanıcı tarafından kullanılan, ancak ekran okuyucunun
dokunun. Bu örnekte, klavye tuzağının oluşturulması hakkında
daha önce
sayfanın o anda kapsam dışında olan kısımlarının
anlaşılmasına yardımcı olmak için
aria-hidden
.
Artık ARIA'nın temel özelliklerini öğrendiğinize göre yerel HTML ile nasıl çalıştığını öğrenin. semantiğini ve son derece büyük bir operasyon göstermek için ve tek bir öğenin semantiğini değiştirmektense, ve zamana duyarlı bilgileri iletmek için nasıl kullanabileceğimize bakalım.
arya-canlı
aria-live
, geliştiricilerin sayfanın bir bölümünü "yayında" olarak işaretlemesine olanak tanır proje yönetiminin
güncellemeler, sayfadan bağımsız olarak kullanıcılara hemen iletilmelidir
sayfanın belirli bir bölümüne göz atmak yerine daha iyi bir konum elde edebilir. Zaman
bir öğenin aria-live
özelliği vardır. Bu özelliği içeren sayfanın bölümü ve
alt öğelerine canlı bölge adı verilir.
Örneğin canlı bir bölge,
kullanıcı işlemidir. İleti, gören bir kullanıcının dikkatini çekecek kadar önemliyse
yardımcı olan bir teknoloji kullanıcısının
işlevlerini yönlendirmek,
aria-live
özelliğini ayarlayarak buna dikkat çekmesini sağlayabilirsiniz. Bu sade div
ile karşılaştır
<div class="status">Your message has been sent.</div>
"canlı" ile gerekir.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
için izin verilen üç değer var: polite
, assertive
ve off
.
aria-live="polite"
, yardımcı teknolojiye kullanıcıyı bu konuda uyarmasını söyler ve şu anda yaptığı her şeyi tamamladığında değişeceğini unutmayın. Kendi hikayelerinizi bir şey önemli ancak acil olmayanlar ile çalışıyorsa vearia-live
kullanımı.aria-live="assertive"
, yardımcı teknolojiye herhangi bir sorunu kesintiye uğratmasını söyler ve kullanıcıyı bu değişiklik konusunda hemen uyarın. Bu yalnızca önemli ve acil güncellemeler. Örneğin " sunucu hatası oluştu ve değişiklikleriniz kaydedilmedi; lütfen sayfayı yenileyin" veya bir kullanıcı işleminin doğrudan sonucu olarak giriş alanında yapılan güncellemeler (örneğin, düğmelerin yerini değiştirebilirsiniz.aria-live="off"
, yardımcı teknolojiye uygulamanın geçici olarak askıya alınmasını söyleraria-live
kesinti.
Canlı bölgelerinizin doğru çalışmasını sağlayacak bazı püf noktaları vardır.
Öncelikle, aria-live
bölgeniz muhtemelen ilk sayfa yüklemesinde ayarlanmış olmalıdır.
Bu değişmez bir kural değildir; ancak bir
aria-live
bölgesinde sorun olabilir.
İkincisi, farklı ekran okuyucular, farklı türlerdeki reklamlara,
anlamına gelir. Örneğin, bazı ekran okuyucularda uyarının tetiklenmesi mümkündür
alt öğenin hidden
stilini doğru değerinden yanlış değerine ayarlayarak değiştirin.
aria-live
ile çalışan diğer özellikler, projenizin
canlı bölge değiştiğinde kullanıcıya bildirilir.
aria-atomic
, tüm bölgenin
bir bütün olarak ele alacağız. Örneğin,
gün, ay ve yılda aria-live=true
ve aria-atomic=true
var ve kullanıcı
ayın değerini, içeriğin tamamını değiştirmek için bir adımlı kontrol
tekrar okunur. aria-atomic
özelliğinin değeri true
olabilir
veya false
(varsayılan).
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, yani canlı bölgeye eklenen herhangi bir öğe
çok önemlidir. Örneğin, mevcut bir durum günlüğüne yayılma
bir mesaj, aralığın kullanıcıya duyurulacağı anlamına gelir (ör.
aria-atomic
false
oldu). - text (metin) olduğu anlamına gelir. Bu, herhangi bir alt düğüme eklenen metin içeriğinin
emin olun. Örneğin, bir özel metin alanının
textContent
özelliğini değiştirmek metni kullanıcıya okur. - kaldırma, yani herhangi bir metnin veya alt düğümlerin kaldırılması kullanıcıya aktarılmalıdır.
- all (tümü) yani tüm değişiklikler alakalıdır. Ancak,
aria-relevant
,additions text
değeridir. Belirtmezsenizaria-relevant
ise öğeye yapılan eklemeler için kullanıcıyı günceller. Bu, en çok istediğiniz özellik olacaktır.
Son olarak aria-busy
, yardımcı teknolojiye,
öğelerdeki değişiklikleri (ör. öğeler yüklenirken) geçici olarak yoksayar. Bir kez
her şey yolundaysa, normalleştirmek için aria-busy
yanlış değerine ayarlanmalıdır
okuyucunun işlemi.