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.
Ö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 kontroletabindex="0"
verin. 0'dan büyüktabindex
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
veyaaria-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çinrole="checkbox"
vearia-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.
- İçeriğin ekran okuyucudan gizlenmesi gerekiyorsa (örneğin,
içeriği
Ekran okuyucularla ilgili bilgi edinme
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 birhover
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. ARIArole
ö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.