p

Microsoft Edge DevTools'da kontrastı iyileştirme: Bir hata düzeltme vaka çalışması

Erişilebilir ürünler oluşturmak, her şeyden önce tasarımlarınızın ve kodlarınızın neden olabileceği kullanılabilirlik sorunlarının farkında olmanız anlamına gelir. Microsoft, yeni ürünler oluştururken, yeni bir özellik deneysel aşamadan çıkmadan önce tasarımların erişilebilirlik incelemeleri, kod incelemeleri ve zorunlu denetimlerden oluşan katı bir iş akışı izler.
Microsoft Edge bir istisna değildir. Kullanıcılar zamanlarının çoğunu web içeriğiyle (tarayıcının gerçekten hiçbir şey yapamadığı) etkileşimde bulunarak geçirseler bile, Microsoft Edge'in parçası olan menüler, seçenekler, ayar sayfaları ve daha fazlasıyla etkileşime girerler. İster fare ister klavye kullanın, ister bilgisayarınızla etkileşim kurmak için bir ekran okuyucuya güvenin, tarayıcının bu bölümlerine erişiminizin olması gerekir.
Geliştirici Araçları, tarayıcının bir parçasıdır ve bu nedenle aynı erişilebilirlik yönergelerine uyması gerekir. Bu, yeni özelliklerin yanı sıra Chromium kod tabanında yıllardır var olan eski özellikleri de içerir.
Sorunları düzeltmek için zaman ayırmak için, iki hafta boyunca yeni işlevler eklemek yerine bozuk sorunları düzeltmeye odaklandığımız sözde hata sprint'lerimiz var. Erişilebilirlik sorunlarına odaklanan bir hata sprintini yeni bitirdik ve bugün uzun süredir var olan bir sorunu nasıl düzelttiğimizi paylaşmak istiyoruz.
DevTools oldukça karmaşık bir kullanıcı arayüzüne sahiptir ve içerikteki farklılıkları daha belirgin hale getirmek için birçok farklı renk kullanır. Bunun bir örneği komut menüsüdür :
DevTools Komut Menüsü
Bu menü, kullanıcının giriş alanına yazdıklarıyla eşleşen komutları listeler. Her komutun, yanında görüntülenen renkli bir rozetle temsil edilen ilişkili bir kategorisi vardır. Bu rozet aynı zamanda kategori adını da içerir, bu nedenle yalnızca az gören veya renk görme yetersizliği olan kişiler için erişilebilirlik engeli olabilecek renge güvenmiyoruz.
Renkli kategori rozetini vurgulayan Komut Menüsü sonuçlarının büyütülmüş ekran görüntüsü
Bununla birlikte, henüz ormandan çıkmadık. Burada açıklamak istediğimiz hata ve düzeltmesi, bazı rozetlerin arka plan ve metin renkleri arasında yeterli kontrasta sahip olmamasıyla ilgilidir.
Komut çubuğundaki sarı üzerine beyaz olan "kaynaklar" rozeti
Aşağıdaki ekran görüntüsü, "Kaynaklar" rozetinin çok düşük bir renk kontrast oranına (1.511:1) sahip olduğunu göstermektedir. WCAG2.1 kurallar en azından kontrast oranı 4.5 olması gerekir, demek: 1 Az gören kullanıcılar metnini okumak edebilmek için.
Az Görme Olan Kişiler için W3C Erişilebilirlik Gereksinimlerine göre, dünya genelinde az gören tahmini 246 milyon kişi bulunmaktadır . Bunların arasında, bu hatayı düzeltmemiş olsaydık, bu rozetleri kaçırmış olabilecek birçok potansiyel DevTools kullanıcısı olabilir. Buna ek olarak, bunları daha okunaklı hale getirmek herkesin faydalanabileceği şeydir.

kurulum

Kaynaklar rozeti, düşük kontrastlı tek rozet değildi ve toplamda 17 farklı rozet var. Tüm kontrast sorunlarını bulmamız ve gerekirse bunları DevTools kullanarak düzeltmemiz gerekiyordu .
Pek çok kişinin bilmediği bir şey, DevTools'u incelemek için DevTools'u kullanabileceğinizdir ! Bu, DevTools'u açabileceğiniz, onları ayırabileceğiniz ve ilkini hedefleyen ikinci bir DevTools örneğini açabileceğiniz anlamına gelir. Bu ikinci örnekten itibaren, rozetleri inceleyebilir ve bir web sayfasındaki herhangi bir rengi değiştireceğiniz gibi renk değişiklikleri yapabiliriz.
Son zamanlarda, bunu oldukça hızlı hale getirmek için geliştirme ortamımızı iyileştirdik, ancak yine de yavaş ve tekrarlayan bir iş oluyordu. Değiştirecek çok rengimiz vardı ve kaynak kodunda her değişiklik yaptığımızda DevTools'u yeniden oluşturmamız ve yeniden yüklememiz, komut menüsünü yeniden açmamız ve kontrastı test etmemiz gerekiyordu.
Tek tek test etmek yerine gerekli ayarlamaları yapabilmek için tüm rozetlere aynı anda bakmanın bir yoluna ihtiyacımız vardı.
Bunu yapmak için, her iki temada da olası tüm rozetleri içeren bir HTML belgesi oluşturduk:
Açık ve koyu temalarda tüm kategori rozetlerinin maketi

Test kontrastı

HTML sayfamızda renk kontrastını test etmek için 3 farklı teknik kullandık.

DevTools'da

DevTools, yerleşik bir kontrast özelliğine sahiptir. Eğer başlarsanız incelemek eleman modu , sayfanın öğeleri üzerine gelebilir ve DevTools sonraki yeterli kontrast ve olanlar için imleci takip ve hatta yeşil onay işareti olsun Vurgulanan elemanın renk kontrastı gösteren küçük bir açılır pencere gösterecektir sorunlu olanların yanında bir ünlem simgesi.
Rozet üzerinde kontrast uyarısı gösteren DevTools öğe denetçisi
Bu harika çalıştı, ancak aynı zamanda kontrastı kontrol etmek için her bir rozetin üzerine teker teker gitmemiz gerektiği anlamına geliyordu. Bu yüzden ikinci bir teknik denedik.

Erişilebilirlik Öngörüleri uzantısını kullanma

Kontrol etmemiz gereken 17 farklı rozetimiz olduğundan, 2 renk temasında biraz daha hızlı bir şeye ihtiyacımız vardı.
Erişilebilirlik Insights aracı bir olarak gelir tarayıcı uzantısı başka şeylerin yanı sıra, renk kontrastı sorunları kontrol edebilirsiniz, (Google Chrome ve Microsoft Kenardan ikisi için). Bu uzantıyı, otomatikleştirilmiş ve yönlendirilmiş erişilebilirlik testi akışları sağladığı için yeni ürün denetimlerimizde kullanıyoruz.
Uzantıyı kullanarak tüm sayfanın bir taramasını yapabildik ve aynı anda 15 kontrast sorunu bildirdi.
Örnek sayfada 15 renk kontrastı sorununu gösteren Erişilebilirlik Öngörülerinden elde edilen sonuçlar
Bu tarayıcı uzantısı çok faydalı olsa da, düzeltmeyi kolaylaştıracak bir şey daha eksikti. Renklerde ayarlamalar yapabilmemiz ve ortaya çıkan kontrastı gerçek zamanlı olarak görebilmemiz gerekiyordu.

Özel renk kontrastı denetleyicimiz

Kontrast hesaplama kodunun bir kısmını DevTools'tan ödünç aldık (DevTools ön uç kodu JavaScript ve TypeScript'tedir, bu da onu basitleştirmiştir) ve yerel web sayfasına ekledik.
Hesaplama kodunu, uyarıları doğrudan sayfada görüntülemek için bir aralıkta sarmak, artık DevTools'ta renkleri değiştirebildiğimiz ve sayfayı yeniden yüklemek zorunda kalmadan yeni kontrast oranlarının ne olduğunu görebileceğimiz anlamına geliyordu.
Demo sayfasında DevTools'da renk değerlerini ayarlamayı gösteren animasyon
Şunları yapabilirsiniz eylem demo sayfasını deneyin veya kaynak koduna bakmak .
Sayfadaki karşıtlığı göstermek için kullandığımız ilginç bir teknik , rozetlerdeki data özniteliğini kullanmaktı Her rozet için oranı hesapladık ve ardından her rozete şu şekilde ayarladık:
badge.dataset.contrast = ratio;

Bir CSS sözde öğesi ve attr() işlevi kullanarak, diğer DOM öğelerine ihtiyaç duymadan kontrast değerini doğrudan CSS'den görüntüleyebiliriz:
.badge .düşük kontrast ::önce {
içerik : attr ( veri kontrastı ) ;
konum : mutlak;
arka plan : kırmızı;
renk : beyaz;
/* ... */
12.08.2021

Diğer Haberler