İçeriği gizleme ve güncelleme

İçeriği yardımcı teknolojilerden gizleme

Alice Boxhall

Dave Gash

Meggin Kearney

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 ve aria-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öyler aria-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. Belirtmezseniz aria-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.