Bu sayfa, Cloud Translation API ile çevrilmiştir.

Erişilebilirlik açısından inceleme

Rob Dodson

Web sitenizin veya uygulamanızın erişilebilir olup olmadığını belirlemek, bir görevdir. Erişilebilirliğe ilk kez yaklaşıyorsanız düşünüldüğünde nereden başlayacağınızı düşünmemiş olursunuz. Sonuçta, farklı yeteneklerin yeteneklerini ortaya çıkarmak için çalışırken ilgili sorunlara değineceğiz.

Bu gönderide bu sorunlar, risk sermayesi için mantıksal ve adım adım mevcut bir siteyi erişilebilirlik açısından incelemek.

Klavyeyi kullanın

Fare yapamayan veya kullanmamayı seçen kullanıcılar ise klavye ile ekrandaki her şeye ulaşmanın temel yoludur. Bu kitlede Tekrarlayan stres yaralanması (RSI) veya ve ekran okuyucu kullanıcıları.

İyi bir klavye deneyimi için, sekme sırasında mantıksal bir sıralamaya fark edilebilir odak stilleridir.

Sitenizde sekme tuşuna basarak başlayın. Öğelerin odaklanılma sırası DOM sıralamasına uygun olmalıdır. Hangi öğelerin gönderilmesi gerektiğinden emin değilseniz Odaklanmayla ilgili Erişilebilirlik Eğitimi kursundaki modüle bakın. En iyi kullanıcının etkileşime girebileceği herhangi bir kontrol veya bilgi sağlamak için odaklanılabilir olmalı ve bir odak göstergesi (odak halkası gibi) görüntülemelidir.

Dikkat: Odak stillerini devre dışı bırakmak için CSS'nizde outline: none kullanmaktan kaçının. Bu yaygın bir uygulamadır; ancak eğer alternatif bir yöntem sağlamazsanız, klavye kullanıcıları hangi öğenin odaklandığını ve sayfanızla etkileşime geçemediğini hiçbir şekilde belirleyemez. Stil için fare ve klavye odağını ayırt etmek istiyorsanız what-input gibi bir kitaplıktı.
Özel etkileşimli kontrollere odaklanılabilir olmalıdır. Anahtar kelimeleri çevirmek için JavaScript kullanıyorsanız <div> varsa, buraya otomatik olarak eklenmez. sekme sıralaması. Bir özel kontrole odaklanılabilir hale getirmek için kontrole tabindex="0" verin. 0'dan büyük tabindex değerleri sekme sırasını değiştirir ve ekran okuyucu kullanıcıları.
Yalnızca etkileşimli içeriklere odaklanılabilir hale getirin. tabindex, şu olmayanlara ekleniyor: başlıklar gibi etkileşimli öğeler, videoyu görebilen klavye kullanıcılarını yavaşlatır. yardımcı olmaz, çünkü ekran okuyucunun bilginiz olması gerekir.
Bir sayfaya yeni içerik eklerseniz kullanıcının odağını o içeriğe yönlendirin harekete geçebilmeleri için ilk olarak. Görüntüleyin Odak Düzeyini Sayfa Düzeyinde Yönetme inceleyebilirsiniz.
Sitenizi, kullanıcının her zaman sonraki öğeye odaklanabileceği şekilde tasarlayın gerekir. Otomatik tamamlama widget'larına ve sizi yakalayabilecek diğer bağlamlara dikkat edin klavye odağı. Kullanıcının belirli bir zamanda odaklanmasını sayfanın geri kalanıyla değil, kalıcı bir Kalıcı bir çıkış yöntemi olarak klavye erişilebilir bir yol sağlar. Görüntüleyin Modüller ve Klavye Tuzakları inceleyebilirsiniz.

Odaklanma kontrolünü kullanılabilir hale getirin

Özel bir denetim oluşturduysanız kullanıcılarınızın bu denetimin tüm özelliklerine erişmesine izin verin bir şekilde kullanabilirsiniz. Okunanlar Bileşenlerde Odaklanma .

Ekran dışındaki içeriği yönetme

Birçok sitenin DOM'de mevcut olan ancak görünmeyen ekran dışı içerikleri vardır duyarlı çekmece menüsündeki bağlantılar veya kalıcı pencere içindeki bir düğme gibi Bu seçeneği belirleyebilirsiniz. Bu öğelerin DOM'de bırakılması, özellikle ekran okuyucularda kafa karıştırıcı bir klavye deneyimi ekran dışındaki içeriği sayfanın bir parçası gibi duyurur.

Ekran dışı içerikleri ele alma bölümünü inceleyin. bölümünü inceleyin.

Ekran okuyucuyla test etme

Genel klavye desteğini iyileştirmek, bir sonraki adım için bir zemin hazırlar. Bu, etiketlemenin ve anlamların doğru olup olmadığını ve sayfanın ekran okuyucu gezinme.

Anlamsal işaretlemenin yardımcılar tarafından nasıl yorumlandığı konusunda teknolojisi hakkında daha fazla bilgi için İçerik yapısı bölümünü okuyun.

Tüm resimlerde doğru alt metinleri olup olmadığını kontrol edin. Bu uygulamanın istisnası, görseller genel olarak sunum amaçlıdır ve içerik. Ekran okuyucuların bir resmi atlaması gerektiğini belirtmek için değerini boş bir dizeye dönüştürür: alt="".
Bir etiket için tüm kontrolleri işaretleyin. Özel kontroller için bu, aria-label veya aria-labelledby kullanımı. Görüntüleyin ARIA Etiketleri ve İlişkileri inceleyebilirsiniz.
Uygun role ve gerekli ARIA için tüm özel kontrolleri kontrol edin özelliklerini ifade eder. Örneğin, bir özel onay kutusu için düzgün şekilde iletmek için role="checkbox" ve aria-checked="true|false" durumu. Genel bilgiler için ARIA'ya giriş bölümüne bakın. ARIA'nın özel kontroller için eksik anlamları nasıl sağlayabileceğine dair genel bakış.
Sayfanızdaki bilgi akışını anlamlı hale getirin. Ekran sayfada DOM sırasına göre gezindiğinde, eklediğiniz her anlamsız bir sırada, CSS kullanılarak görsel olarak yeniden konumlandırıldı. İhtiyacınız varsa bir öğeyi fiziksel olarak DOM'nin önceki bölümlerinde taşımanızı öneririz.
Sayfadaki tüm içerikler için ekran okuyucuda gezinmeyi desteklemeyi hedefleyin. Emin olun sitenin hiçbir bölümü kalıcı olarak gizlenmemeli veya ekranda engellenmemelidir okuyucu erişimi.
- İçeriğin ekran okuyucudan gizlenmesi gerekiyorsa (örneğin, içeriği aria-hidden="true" olarak ayarlayın. Daha ayrıntılı açıklama için İçeriği gizleme.

Ekran okuyucu kullanmayı öğrenmek zor görünse de aslında ekran okuyucuyu kullanıcı dostu olma. Genel olarak çoğu geliştirici, birkaç basit güncellemeyle tuş komutları.

Mac kullanıyorsanız, bilgisayarınızda nasıl bir ekran VoiceOver . PC kullanıyorsanız şuna göz atın: NVDA ile ilgili bir video Windows için bağışla desteklenen açık kaynak bir ekran okuyucu.

`aria-hidden`, klavye odağını engellemiyor

ARIA'nın bir reklamın yalnızca anlamını etkileyebileceğini unutmayın. element; Öğenin davranışı üzerinde herhangi bir etkisi yoktur. Bu sayede bir öğe, aria-hidden="true" içeren ekran okuyuculara gizlenmiş ancak böyle bir öğe söz konusu öğenin odaklama davranışını değiştirebilir. Ekran dışındaki etkileşimli içeriklerde Ekran dışındaki etkileşimli içerikler için inert özelliğini kullanın. klavye akışından tamamen kaldırıldığından emin olun. Daha eski tarayıcılarda aria-hidden="true" ile tabindex="-1" birleştir.

Etkileşimli öğeler amaçlarını ve durumlarını belirtmelidir

Bir kontrolün ne yapacağına dair görsel ipuçları veya fırsatlar sağlamak yardımcı olur Çok çeşitli cihazlar kullanan çok çeşitli kişiler, reklamlarınızı girin.

Bağlantılar ve düğmeler gibi etkileşimli öğeler, etkileşimli olmayan öğelerdir. Kullanıcıların bir sitede veya uygulamada gezinmesi bir öğenin tıklanabilir olup olmadığını söyleyemez. RACI matrisinde etkileşimli öğeleri gösterir. Yaygın uygulamalardan biri, çevredeki metinlerden ayırt etmesini sağlar.
Odaklanma gereksinimine benzer şekilde, bağlantı ve düğme gibi etkileşimli öğeler fare kullanıcılarına işaretçileri bir şeyin üzerindeyken bunu bildirmek için hover durumu gerekir tıklanabilir. Ancak bu öğeleri diğer giriş yöntemlerinin erişimine açmak için bir hover durumu olmadan ayırt edilebilmeleri gerekir.

Başlıklardan ve önemli noktalardan yararlanın

Başlıklar ve önemli nokta öğeleri, sayfanızın anlamsal yapısını sağlar ve yardımcı teknoloji kullanıcılarının gezinme verimliliğini önemli ölçüde artırır. Birçok Ekran okuyucu kullanıcıları, tanımadıkları bir sayfaya geldiklerinde genellikle genellikle başarılı oldukları başlıklarla gezinme.

Benzer şekilde, ekran okuyucular da önemli önemli noktalara atlama olanağı sunar. <main> ve <nav> gibi. Bu nedenlerle, bir elektronik tabloda Sayfanızın yapısı, kullanıcı deneyimine yön vermek için kullanılabilir.

h1-h6 hiyerarşisini kullanın. Başlıkları, her bir görev için bir taslak oluşturmaya yönelik araçlar . Başlıkların yerleşik stiline güvenmeyin. Bunun yerine sanki aynı boyuttaymış ve anlam açısından uygun içeriklerinizle ilgili yönergelerdir. Ardından, CSS'yi kullanarak tasarımınızla eşleştiğinden emin olun.
Kullanıcıların tekrar eden içeriği atlayabilmesi için önemli nokta öğeleri ve roller kullanın. Birçok yardımcı teknolojiler sayfanın belirli bölümlerine atlamak için örneğin <main> veya <nav> öğeleriyle tanımlananlar gibi. Bu öğeler açık bir şekilde tanımlamalısınız. ARIA role özelliğini şu işlemler için de kullanabilirsiniz: sayfadaki bölgeleri <div role="search"> gibi açıkça tanımlayın. Görüntüleyin Daha fazlası için anlamsal bilgi ve gezinme örnekler.
Deneyiminiz yoksa role="application" kullanmaktan kaçının. application önemli nokta rolü, yardımcı teknolojiye kısayolları da ekler ve tüm tuşlara basarak sayfaya yönlendirir. Bu, anahtarların kullanıcıların genellikle sayfada gezinmek için kullandıkları ekran okuyucunun artık çalışmaması, ve tüm klavye işlemlerini kendiniz uygulamanız gerekir.

Başlıkları ve önemli noktaları ekran okuyucuyla inceleme

VoiceOver ve NVDA gibi ekran okuyucular, şuraya atlamak için bir içerik menüsü sağlar: önemli bölgeleri görebilirsiniz. Erişilebilirliği test ederken bu menüleri kullanarak sayfayı genel hatlarıyla inceleyebilir ve başlığınızın uygun olduğunu ve hangi önemli noktaların kullanımda olduğunu belirtmeniz gerekir.

Daha fazla bilgi edinmek için VoiceOver ve NVDA

Süreci otomatikleştirin

Bir siteyi erişilebilirlik açısından manuel olarak test etmek yorucu ve hataya açık olabilir. Testi otomatik hale getirmek, mümkün olduğunca çok şey katın. Tarayıcı uzantılarını ve komut satırı erişilebilirliğini kullanabilirsiniz test paketlerini kullanabilirsiniz.

Sayfa, aXe veya WAVE uzantıları var mı? Kullanabileceğiniz başka seçenekler de vardır, ancak bu uzantılar herhangi bir manuel test sürecine yararlı bir katkı olabilir, Kontrast oranlarında düşüş ve ARIA'nın eksik olması gibi hassas sorunları fark edebilirsiniz özellikleri hakkında daha fazla bilgi edinin.
- Komut satırında çalışmayı tercih ederseniz axe-cli, aynı özellikleri sunar. aynı zamanda aXe tarayıcı uzantısıdır, ancak terminalinizden de çalıştırılabilir.
Özellikle sürekli entegrasyon ortamında regresyonlardan kaçınmak için axe-core gibi bir kitaplık eklemek otomatik test paketinize entegre edebilirsiniz. balta çekirdeği, güce güç getiren aXe Chrome uzantısına sahip olabilir.
Bir çerçeve veya kitaplık kullanıyorsanız kendi erişilebilirliklerini sağlıyor mu? araçlar mı var? Örneğin, protractor-accessibility-plugin Angular için geçerli. Mümkün olduğunda mevcut araçlardan yararlanın.

PWA'ları test etmek için Lighthouse'u kullanın

Lighthouse, projenizin progresif web uygulamanızın (PWA) performansını ölçer. Ayrıca erişilebilirlik testlerini desteklemek için balta çekirdeği kitaplığını kullanıyor.

Lighthouse'u zaten kullanıyorsanız başarısız erişilebilirliğin olup olmadığına bakın testlerde yer alır. Genel kullanıcı deneyimini iyileştirmek için hataları düzeltin: sitenizi ziyaret edin.