Chrome Geliştirici Araçları'nda Erişilebilirlik
Yayınlanan: 2022-03-10DevTools'ta çok zaman harcıyorum ve bunu yaparken DevTools'taki daha 'gizli' özelliklerden bazılarını öğrenmeye geldim ve bu makalede özellikle erişilebilirlik konusunda bazılarını sizinle paylaşmayı çok isterim.
Bu makale, kullandığım ve kendimi rahat hissettiğim bir tarayıcı olduğu için Google Chrome'u kullanıyor. Bununla birlikte, Firefox, Safari ve Edge, geliştirici araçlarında büyük adımlar attı ve kesinlikle erişilebilirlikle ilgili kendilerine ait harika özelliklere sahipler.
DevTools'a zaten aşina olabilirsiniz, ancak burada bir web sayfasındaki bir öğenin nasıl inceleneceğine dair kısa bir hatırlatma:
- İncelemekle ilgilendiğiniz bir web sayfasını Google Chrome'da açın
- Cmd + Shift + C kısayolunu kullanın (Windows'ta Ctrl + Shift + C )
- İşaretçiniz Öğeyi Denetle modunda, devam edin ve web sayfasındaki bir öğeye tıklayın
Aynen böyle, DevTools'u açtınız ve öğeleri incelemeye başladınız. Farklı paneller, örneğin JavaScript hata ayıklama, performans vb. gibi farklı özelliklere karşılık gelir.
Her yere dağılmış erişilebilirlikle ilgili özellikler var, bu yüzden ne yaptıklarını, nerede yaşadıklarını ve nasıl kullanılacağını keşfedelim.
Kontrast Oranı
Bu, incelenen metnin arka plan rengiyle tatmin edici bir renk kontrastına sahip olup olmadığını kontrol etmek için kullanılan bir özelliktir.
Tipik olarak, metin rengi ile alttaki arka plan rengi arasındaki yüksek düzeyde karşıtlık, farklı yeteneklere sahip kullanıcılar için daha okunaklı metin anlamına gelir. Ayrıca, çeşitli çevresel koşullarda metninizi okuyan kullanıcıların desteklenmesine yardımcı olur, bir kullanıcının metnin okunabilirliğini nasıl algıladığını etkileyebilecek şu örnekleri göz önünde bulundurun:
- Dışarıda bol güneş ışığı varken ekrana bakmak
- Bir mobil cihaz, pil ömrünü korumak için ekran parlaklığını tamamen azalttı
"Amaç, orta derecede az gören kişiler tarafından okunabilmesi için metin ve arka planı arasında yeterli kontrastı sağlamaktır."
— Başarı Kriterini Anlama 1.4.3: Kontrast (Minimum)
Kontrast oranı aracını kullanmak bize şu soruya anında evet/hayır yanıtı verebilir: bu metin minimum kontrast standardını karşılıyor mu? Bu aracı kullanmak, web sitenizin tasarımını ve renk düzenini etkilemeye yardımcı olabilir ve bu da az gören kullanıcılar için daha okunabilir içeriğe yol açabilir.
Renk seçici aracında bulunan kontrast oranı özelliği, minimum kontrast gereksiniminin karşılanıp karşılanmadığı konusunda sizi bilgilendirebilir. Bu özelliğe erişmek için:
- DevTools ile bir metin öğesini inceleyin
- Stiller bölmesinde color özelliğini bulun ve renk seçici aracını getirmek için küçük renkli kareye tıklayın
- Bu konuda daha fazla bilgi sunan 'Kontrast oranı' yazan metne tıklayın
Üç oran şunları temsil eder:
- Mevcut kontrast oranınız
- Minimum kontrast oranı (AA)
- Gelişmiş kontrast oranı (AAA)
Kendiniz için bir alıştırma olarak: dairesel renk seçme aracını renk tayfı boyunca sürükleyin ve minimum kontrast ve gelişmiş kontrast oranlarının karşılandığı noktaları gözlemleyin.
Bu özellik, bu makalenin Deniz Feneri bölümünde ele alınan bir Deniz Feneri Raporu aracılığıyla da size bildirilebilir.
Erişilebilirlik Denetçisi
Bu, DOM düğümleri için çeşitli erişilebilirlik özelliklerini ve ARIA bilgilerini görüntülemenizi sağlayan bir DevTools bölmesine atıfta bulunur.
ARIA, genellikle HTML'de kullanılan ve karşılığında web sitenizi farklı yeteneklere sahip bireyler için daha erişilebilir hale getiren bir özellikler koleksiyonunu ifade eder. Kesinlikle kendi web sitelerinizde kullanmaya değer, ancak kullanıcılarınıza yardımcı olacak bir şekilde kullandığınızdan emin olmak için web erişilebilirliğinin temellerini anlamanızı gerektirir.
Örneğin, aşağıdaki HTML parçasını düşünün:
<p class="alert" role="alert"> That transaction was successful </p> Ekran okuyucu gibi yardımcı bir cihaz, bu tür bilgileri kullanıcıya duyurmak için role="alert" özelliğini kullanabilir. DevTools içindeki Erişilebilirlik bölmesi, böyle bir özelliği ( role ) özenle seçip size sunabilir, böylece bir öğenin erişilebilirlikle ilgili hangi özelliklere sahip olduğu açıktır.
Bu bölmede gördüğünüz bilgileri doğrulamak, şu soruyu yanıtlamanıza yardımcı olabilir: "Erişilebilirliği yanlış mı kodluyorum", sözdizimsel veya yapısal olarak, erişilebilirlik tekniklerini doğru sözdizimi ile uygulamak ve erişilebilir bir web sitesine sahip olmak iki farklı şeydir. şeyler!
Bunu kullanmaya başlamak için, denetlenen bir öğeyle Erişilebilirlik bölmesini açabilirsiniz:
- Sayfadaki herhangi bir öğeyi inceleyin, örneğin bir köprü veya arama kutusu
- Öğeler Panelinde bulunan Erişilebilirlik bölmesini açın
Bonus ipucu : Bölmeyi bulmak yerine (varsayılan olarak açık değildir), Komut Menüsünde 'Erişilebilirliği Göster'i arıyorum ( Cmd + Shift + P ).
Burada aşağıdakiler gibi bir sürü bilgi bulacaksınız:
- Erişilebilirlik ağacı (DOM ağacının bir alt kümesi)
- ARIA özellikleri
- Hesaplanmış erişilebilirlik özellikleri (örn. odaklanılabilir bir şey mi, düzenlenebilir mi, form doğrulamasından geçiyor mu)
Denetlenen öğeye bağlı olarak, bu bilgilerin bazıları geçerli olmayabilir, örneğin bir öğenin meşru olarak ARIA özelliklerine ihtiyacı olmayabilir.
DevTools'daki çoğu özellikte olduğu gibi, bu bölmede gördüğünüz şey 'canlı'dır - Elements Panel DOM Ağacında yaptığınız değişiklikler hemen bu bölmeye geri yansıtılır, bu da örneğin yanlış yazılmış bir ARIA özniteliğini düzeltmeye yardımcı olur.
Muhtemelen balta gibi alternatif bir otomatik test aracı kullandığınız için Erişilebilirlik kullanımınızdan eminseniz, bu bölmeyi çok sık kullanmayabilirsiniz ve sorun değil.
Gerçek dünyadaki web sitelerine bakarken daha fazla bilgi edinmek istiyorsanız, Chrome DevTools ile Erişilebilirlik hata ayıklaması hakkında 14 dakikalık bir video hazırladım.
deniz feneri
Lighthouse, en iyi uygulamalar, erişilebilirlik, güvenlik ve daha fazlasını tarayabilen otomatik bir web sitesi denetleyicisidir.
Erişilebilirlik teorisi hakkında biraz okuduysanız ve bunu kendi web sitenize nasıl etkili bir şekilde uygulayacağınızı öğrenmek istiyorsanız, bu, tam anlamıyla bir tıkla ve tıkla arayüzü olduğu için kullanmak için harika bir araçtır - kurulum gerektirmez. Ayrıca, tüm denetimleri çok öğreticidir ve neyin başarısız olduğunu ve bir şeyin neden başarısız olduğunu size bildirir.
Bu araçtan gelen önerileri takip etmek, sitenizin erişilebilirliğini iyileştirmeye neredeyse kesinlikle yardımcı olacaktır.
Güvenliği, genel web en iyi uygulamalarını kontrol ederken performans yardımcı olur. Lighthouse'da bir erişilebilirlik denetiminin nasıl çalıştırılacağına odaklanalım:
- DevTools'ta Deniz Feneri paneline gidin
- Tüm kategorilerin işaretini kaldırın, ancak 'Erişilebilirlik'i işaretli tutun
- 'Rapor Oluştur'u tıklayın
- Sonuç raporunda, onlar hakkında daha fazla bilgi edinmek için farklı önerileri tıklayın.
Erişilebilirlik hakkında daha fazla bilgi edinmek istiyorsanız (kesinlikle biliyorum!), başarısız, ancak geçmiş denetimlere tıklamak bile öğrenmek için harika bir yoldur, çünkü neredeyse her denetim, denetimin kendisiyle ve bunun neden önemli olduğuyla ilgili özel web geliştirici belgelerine bağlanır.
Çoğunlukla, denetim belgeleri sayfaları son derece özlüdür ve onları şiddetle tavsiye ederim. Bir <title> öğesinin mevcut olduğundan emin olmak için denetim belgelerine bir göz atalım. Şunları belirtir:
- Lighthouse unvan denetimi nasıl başarısız olur?
- Başlık nasıl eklenir
- Harika başlıklar oluşturmak için ipuçları
- Kullanılmaya değer bir başlık ile birlikte kullanılmayacak bir başlık örneği
Ve belge başlığı belgeleri söz konusu olduğunda, yukarıdaki 4 noktayı açıklamak sadece 300 kelime aldı.
Unutulmaması gereken ilginç bir nokta, Erişilebilirlik bölmesinin aksine, Deniz Feneri Denetimleri varsayılan olarak çok öğreticidir ve Deniz Feneri panelini yeni başladığınızda ziyaret etmek için harika bir yer haline getirir.
Erişilebilir sayfalar oluşturma konusunda daha gelişmiş hale geldikçe, önceden tanımlanmış denetimlerden uzaklaşabilir ve erişilebilirlik bölmesinde daha fazla zaman geçirebilirsiniz.
“
Görme Yetersizliklerini Taklit Edin
Bu, bulanık görme gibi görme eksikliklerini geçerli sayfaya uygulamak için bir DevTools özelliğidir.
"Küresel olarak, yaklaşık 12 erkekten 1'inde (%8) ve 200 kadından 1'inde renk görme eksiklikleri var."
— Az Gören Kişiler için Erişilebilirlik Gereksinimleri
Web sitenizin kullanıcılarınızın ihtiyaçlarını karşıladığından emin olmak için bu özelliği kullanmak isteyeceksiniz. Web siteniz önemli bir resim gösteriyorsa, bu resmin tritanopi (mavi ve sarı görme bozukluğu) olan biri için anlaşılmasının zor olduğunu veya hatta bulanık gören biri için anlaşılmasının zor olduğunu keşfedebilirsiniz.
"Bazı düşük görme keskinliği gözlük, kontakt lens veya ameliyatla düzeltilebilir - ve bazıları yapılamaz. Bu nedenle, bazı kişilerde ne olursa olsun bulanık görme (düşük görme keskinliği) olacaktır.”
— Az Gören Kişiler için Erişilebilirlik Gereksinimleri
Örneğin, bir görüntü söz konusu olduğunda, bulanık görüşe sahip bir kullanıcının kullanabileceği ve dolayısıyla görüntünün ne gösterdiğini anlaması yerine, DevTools aracılığıyla bulanık görmeyi taklit ederken indirilebilecek daha yüksek çözünürlüklü bir görüntü olduğunu görebilirsiniz. Bu, muhtemelen sizden/iş arkadaşlarınızdan gelen bazı tasarım/UX tabanlı problem çözme becerileri gerektirecektir, ancak bu, kullanıcılarınızın ihtiyaçlarını karşılamakla onların ihtiyaçlarını karşılamamak arasındaki fark olabilir.
️ Lütfen dikkat : Aşağıdaki görüntü, DevTools'un 'Bulanık görüş' öykünme özelliğini göstermek için kısmen bulanıktır.
Bu özelliği aşağıdaki adımlarla deneyebilirsiniz:
- Komut Menüsünü açın (Windows'ta Cmd + Shift + P veya Ctrl + Shift + P )
- 'Görüntülemeyi göster' öğesini arayın ve seçin
- İşleme Bölmesi'ndeki Görme kusurlarını taklit et bölümünden 'Bulanık görüş' gibi bir görme eksikliği seçin.
DevTools aracılığıyla uygulayabileceğiniz görme kusurlarına birkaç örnek:
- Bulanık görme
Görüşün daha az hassas olduğu yerler - protanopi
Kırmızı ışığa karşı duyarsızlıktan kaynaklanan renk körlüğü - tritanopi
Bozulmuş mavi ve sarı görme
Bunun gibi öykünme özellikleri, geniş bir yelpazedeki görme eksikliklerini bir yana bırakın, bu tür eksikliklerin bireylerde kendini nasıl gösterdiği konusundaki ince farklılıkları tam olarak açıklamayacaktır. Bununla birlikte, bu özellik, web geliştiricileri olarak sayfalarımızın erişilebilirliğini anlama ve iyileştirme konusunda bize hala yardımcı olabilir.
Öğe İpucunu İncele
Bu özellik, 'Öğeyi Denetle' özelliğini kullandığınızda artık erişilebilirlikle ilgili bilgileri ortaya çıkaran gelişmiş bir araç ipucuna atıfta bulunur. Bu, hızlı bir bakışta öğelerin ne kadar erişilebilir olduğu konusunda sizi bilgilendirebildiğinden, ince, ancak yine de çok önemli bir özelliktir.
Bunun önemli olduğunu söylüyorum çünkü bu makalede bahsedilen diğer dört özellik söz konusu olduğunda, bizim tarafımızdan kasıtlı bir işlem yapılması gerekiyor (rapor oluştur düğmesini tıklayın, Erişilebilirlik bölmesine gidin, renk seçici aracını açın vb.). Ancak bu özellik için, bir öğeyi incelerken DevTools'un en yaygın eylemlerinden birinde ortaya çıkar.
Kendiniz için kısa bir meydan okuma olarak, aşağıdaki iki ekran görüntüsüne bir göz atın. Artık orada bir erişilebilirlik bölümü olan gelişmiş DevTools Inspect Element araç ipucunu gösteriyorlar. Bu bölümdeki özelliklerin neyi temsil ettiğini belirleyebilir misiniz?
Bunların, Kontrast Oranı bölümünün ve Erişilebilirlik Denetçisinin bir parçası olarak daha önce gördüğümüz bilgilerin aynısı olduğunu fark edebilirsiniz. Bunlar aynı özellikler ancak (umarım) daha basit bir şekilde ortaya çıktılar.
Not: Bu araç ipucunda (en son öğe) "Klavye odaklı" bir özellik de vardır. Bu, öğenin klavyeyle erişilebilir olup olmadığını gösterir. Doğruysa, bu genellikle söz konusu öğeye dokunarak odaklanılabileceğini gösterir.
Gördüğüm gibi: Öğeyi İncele, tarayıcı DevTools içinde son derece yaygın bir kullanım örneğidir, bu nedenle Öğeyi İncele araç ipucu için erişilebilirlikle ilgili kullanışlı özellikler yararlı bir hatırlatma işlevi görebilir ve web geliştiricileri olarak bizi daha fazla araştırma yapmaya ve emin olmaya yönlendirebilir. inşa ettiğimiz şey erişilebilir.
Çözüm
Erişilebilirliği iyileştirmeye yönelik web geliştirici araçları yıllar içinde hızla gelişti, ancak bazen bu araçlar gizleniyor veya basitçe belgelenmiyor. Bu makalede, oluşturduğumuz web sitelerine erişilebilirlikle ilgili en iyi uygulamaları uygularken bize yardımcı olabilecek bazı özellikleri inceledik.
İşte anlattıklarımızın bir hatırlatıcısı:
- Kontrast Oranı
İncelenen metin öğesinin tatmin edici bir kontrast oranına sahip olup olmadığını kontrol edin. - Erişilebilirlik Denetçisi
Çeşitli erişilebilirlik özelliklerini ve ARIA bilgilerini görüntüleyin. - deniz feneri
En iyi uygulamaları, erişilebilirliği ve daha fazlasını kapsayan bir web sitesi denetleyicisi. - Görme eksikliklerini taklit edin
Sayfaya görme eksikliklerini (bulanık görme gibi) uygulamak için bir araç. - Öğe İpucunu İncele
Erişilebilirlikle ilgili bilgileri ortaya çıkaran geliştirilmiş bir araç ipucu.
200'den fazla web geliştirme ipucundan haberdar olmak istiyorsanız, Dev Tips posta listesini yapıyorum! Ayrıca Twitter'ımda bir sürü bonus web geliştirme kaynağı yayınlıyorum.
Şimdilik bu kadar! Okuduğunuz için teşekkürler.