Uzmanlık · UI/UX Tasarımı
Renk tokenleriyle, hesaplanmış kontrast oranıyla, öğe öğe doğrulanmış klavye kalıplarıyla ve sistem tercihinde duran animasyonlarla çalışıyoruz. Gerçek sayfalarda araçla doğruluyoruz ve başarısız olanı da yayımlıyoruz.
Zaten kurduklarımızSistemul rulează pe site-ul acesta și se poate inspecta. Tokenul `--muted: #666b65` obține între 4,72:1 și 5,45:1 pe cele șapte fundaluri ale sitului — recalculat de noi cu formula de luminanță din WCAG, nu preluat dintr-un instrument. Opt culori scrise direct în foaia de stil produceau 2,88–4,49:1; le-am găsit cu axe-core 4.10.2 rulat pe zece pagini live și le-am înlocuit cu tokenul, iar corectura e deja în foaia servită de producție. A doua implementare verificabilă: mecanismul de oprire a animațiilor — 38 de elemente animate la infinit pe pagina de start, toate acoperite de un buton de pauză, plus regula globală care anulează animațiile la `prefers-reduced-motion: reduce`.
Çoğu “tasarım sistemi” bir renk paleti ve bir bileşen listesidir. Bizimki daha sıkıcı ve daha faydalı bir şeyle başlar: her metin rengi, gerçekten göründüğü her arka plana karşı hesaplanmış bir kontrast oranına sahiptir. “Güzel görünüyor” değil, bir sayı. Bu sitedeki ikincil metin tokeni, `--muted: #666b65`, kullanılan yedi arka planda 4,72:1 ile 5,45:1 arasında sonuç verir. Küçük metin için istenen eşik 4,5:1'dir.
O sayı sağduyudan doğmadı. Kendi sitesindeki on sayfada axe-core 4.10.2 çalıştırdık ve sistematik olarak ihlal edilen tek WCAG kuralı kontrasttı: sayfa başına 31 ila 43 düğüm; bunların 31’i üst bilgi ve alt bilgiden geliyordu, dolayısıyla 147 adresin tamamında çarpılıyordu. Stil sayfasına doğrudan yazılmış sekiz renk 2,88:1 ile 4,49:1 üretiyordu. En kötü olanı, 10 px ve 3,72:1 ile, tam da hukuki bağlantıların bulunduğu satırdı — birinin hakkını kullanmak istediğinde ulaştığı yol.
Sistemin ikinci kısmı, dekor olarak değil işlev olarak ele alınan harekettir. Başlangıç sayfasında sonsuza kadar animasyonlu 38 öğe var. Hepsi bir duraklatma düğmesiyle kapatılmıştır: basıldığında kapalı duruma geçerler, etiket değişir ve durum ekran okuyuculara duyurulur. Ayrı olarak, sistem azaltılmış hareket istediğinde herhangi bir animasyonu ve geçişi iptal eden, düzgün kaydırmayı durduran ve işe yaramaz hâle geldiği için duraklatma düğmesini bile gizleyen küresel bir kural vardır. Klasik tuzağı da kontrol ettik — opaklığı neredeyse sıfırdan başlayan ve iptal edildiğinde içeriği görünmez bırakan bir animasyon: burada böyle bir şey yok.
Geri kalanı disiplin: görünür odak göstergesi, 2 px, yalnızca klavye ile gezinmede uygulanır; önerilen modele göre sekme gruplarında oklarla dolaşma; hataları uyarı olarak ve onayları durum olarak duyuran formlar. Ve sıkı tuttuğumuz bir kural: doğrulayamadığımız şeyler doğrulanmamış olarak yazılır. Kendi denetimin bir araç sınırlamaları bölümü vardır ve orada bulunan iki hata hâlâ açıktır — aşağıda, adlarıyla birlikte yer alıyorlar.
Neleri kapsıyor
Palet 14 değişkenlik bir blokta durur ve ikincil metin tek bir token kullanır: `--muted: #666b65`. Sitin yedi arka planında WCAG’nin göreli parlaklık formülüyle yeniden hesaplanan oranlar: beyazda 5,45:1, 5,15, 5,11, 5,03, 5,02, 4,79 ve 4,72. Ana metin, `--ink: #181a19`, beyazda 17,49:1 elde eder; yeşil vurgu `#355c46`, 7,58:1. Bir renk eşiğe ulaşmadığında token değiştirilir, toplantıda gerekçelendirilmez.
Başlangıç sayfasındaki sekme grubu hareketli sekme indeksini kullanır: yalnızca etkin sekme Tab ile erişilebilir, diğerleri sıra dışıdır ve sol/sağ oklar, Home ve End odağı taşır; tuşun varsayılan davranışı iptal edilir. Bu, erişilebilir bileşenler için önerilen uygulama modelidir; alıntı değil, uygulanmıştır. Sitenin temel bileşenlerinde 21 erişilebilir etiket, 7 basılı/basılmamış durumu, başlık ile bölge arasında 3 bağlantı, 2 seçim durumu, değişiklikleri duyuran 2 bölge ve komut ile denetlediği panel arasında 2 bağlantı vardır.
Başlangıç sayfasında otomatik başlayan, sonsuza kadar animasyonlu, beş saniyeden uzun süren 38 öğe vardır — tam da “Duraklat, Durdur, Gizle” kriterinin düzenlediği durum. Bu 38 öğenin tamamı duraklatma düğmeleriyle kaplıdır: basıldığında animasyonlar duraklatılmış duruma geçer ve düğmenin durumu değişir. Ayrı olarak, `prefers-reduced-motion: reduce` altında küresel bir kural herhangi bir animasyonu ve geçişi iptal eder, düzgün kaydırmayı durdurur, fareyle üzerine gelinceki yer değiştirmeyi kaldırır ve duraklatma düğmesini gizler. Ana stil sayfasında böyle yedi blok, ayrıca temel stil sayfasında bir tane vardır.
5 px boşluklu, vurgu yeşilinde 2 px düz çerçeve, `:focus-visible` ile uygulanır — yani klavye ile gezinmede görünür, fare tıklamasında değil. Tarayıcıda, öğe öğe doğrulandı; üst bilgi ve içerikteki ilk komutlarda: dört farklı öğe, aynı çerçeve. Stil sayfasının hiçbir yerinde yerine konulmadan kaldırılmış bir çerçeve yok.
Sitenin iletişim formunda etiketler alanlara gömülüdür, hata uyarı olarak, onay ise durum olarak işaretlenir — böylece ekran okuyucular bunları kullanıcının aramasına gerek kalmadan duyurur. Bot tuzağı doğru şekilde gizlenmiştir: üst öğe görüntüleme dışıdır, yardımcı teknolojiler için gizli olarak işaretlenmiştir ve sekme sırasından çıkarılmıştır. Kendi denetim, etiketleme, seçiciler için ad ve otomatik tamamlama kurallarının hepsinin geçtiğini doğrular.
axe-core 4.10.2’yi test ortamında değil, canlı sayfada; başlangıç sayfası, katalog, bir ürün sayfası, hizmetler dizini, bir hizmet sayfası, çözüm matrisi, matristeki bir kombinasyon, iletişim, tarifeler, bir makale ve bir hukuk belgesini kapsayan on sayfalık bir örneklem üzerinde çalıştırıyoruz. Ham sonuç sayfaya yazılır; özetlenmiş “uygun” olarak değil, düğüm sayısıyla birlikte.
Aynı denetimden: 320 px genişlikte, üst bilgideki komut ve menü düğmesi ekranı 22 px aşar ve sayfa yatay kaydırılır — aritmetik 280 px’lik bir kapsayıcıda 362 px içeriktir. Hukuk belgelerinde metin içindeki bağlantılar, çevrelerindeki metinden yalnızca renk ile ayrılır ve vurgu ile gövde metni arasındaki oran 1,01:1’dir; bu yüzden altı çizili olması zorunludur. Her ikisi de açıktır, düzeltme yazılmıştır. Bunları yayımlıyoruz çünkü erişilebilirlik isteyen bir alıcı, gerçek bir hata listesinin nasıl göründüğünü görmeyi hak eder.
Site’nin koyu teması yoktur. Token bloğu, aynı değerleri alan üç seçici için tanımlanmıştır ve kodda sistemin şema tercihi için hiçbir kural yoktur. Tarayıcıda koyu şema emüle edilerek kontrol edildi: sayfa beyaz kalır. Yararlı sonuç: ölçülen tüm karşıtlık oranları her iki şemada da geçerlidir. İstenmeyen sonuç: tema anahtarı, renk açısından ölü koddur. Gerçek bir koyu tema, değerleri kopyalamak değil, karşıtlığın tamamının yeniden ölçülmesi demektir.
Başlıklar ve metin için tek bir aile, harf aralığı seviye bazında ayarlanmış — büyük başlıklarda daha sıkı, birinci ve ikinci seviyede `-0,055em`, üçüncü seviyede `-0,035em` — ve başlıklarda 500 ağırlık. Paragraflar satırların dengelenmesini kullanır, böylece son satırda tek bir kelime kalmaz. Konteyner 1240 px maksimum genişliğe ve 48 px kenar boşluklarına sahiptir, düğmelerin satır yüksekliği her yerde aynıdır. Bunlar stil sayfasında yazılı kurallardır, dolayısıyla biz ayrıldıktan sonra da uygulanır.
Nasıl görünüyor
İlk teslimat, insanların yapmaya geldiği şeylerin listesidir; sıklık sırasına göre ve bugün nerede durduklarıyla birlikte. Bu olmadan her yeni ekran estetik bir tercihtir. Bununla birlikte, sonraki her kararın bir kriteri olur.
Renkler, gerçekte üzerinde göründükleri arka planlar ve her çiftin hesaplanan karşıtlık oranı belirlenir. Oranlarıyla birlikte çiftler tablosunu teslim ediyoruz. Seçilen paletenin küçük metin için kullanılamayacağını sonunda keşfetmekten çok daha ucuzdur.
Her etkileşimli bileşen, aynı commit içinde hem görünümünü hem de davranışını alır: Tab’da, ok tuşlarında, Escape’te ne olduğu, neyin duyurulduğu ve nasıl duyurulduğu. Sonradan eklenen klavye düzeni bir yeniden yazımdır, bir ekleme değil.
Aracı, farklı düzenleri kapsayan bir örneklem üzerinde çalıştırır ve ham çıktıyı, özet değil, teslim ederiz. Her bulguya koddaki yeri, ihlal edilen kriter, önerilen düzeltme ve düzeltme sonrası doğrulama kriteri verilir — örneğin: yalnızca üstbilgi ve altbilgiyi içeren sayfada karşıtlık düğüm sayısı sıfıra inmelidir.
Tokenleri, bileşenleri, denetim belgesini ve neyin doğrulanamadığının listesini, nedenleriyle birlikte teslim ediyoruz. Bu sitede liste, klavye ile etkinleştirme ve tarayıcıda azaltılmış hareket tercihini emüle etme işlemlerini içerir — ikisi de araç sınırlaması, ikisi de olduğu gibi yazılmıştır.
Veriler
Veri koruma sorumlusu olan herkesin soracağı sorular — o sormadan önce burada sorulmuş hâliyle.
Bir vaka
Durum
Yakın zamanda yeniden yapılmış, kendi sitesi; zaten var olan bir belirteç sistemiyle. Kimse bir şikâyet bildirmemişti. Soru „iyi mi görünüyor?” değil, „görüşü olmayan bir araç ne söylüyor?” oldu.
Ne kurduk
axe-core 4.10.2’yi canlı sayfaya enjekte ettik ve farklı kalıpları temsil eden seçilmiş on sayfada çalıştırdık. Sistematik olarak ihlal edilen tek WCAG kuralı kontrasttı. Düğümleri metin–arka plan çiftiyle grupladık, her oranı standardın göreli parlaklık formülüyle yeniden hesapladık — tek bir araca bağımlı kalmamak için — ve her rengi stil sayfasında aradık. Koda doğrudan yazılmış sekiz değer, kalıcı tüm başarısızlıkları üretiyordu: alt bilgideki 25 bağlantıda 3,89:1, adım numaralarında 2,88:1, yasal bağlantıların satırında 3,72:1 ve ayrıca 3,99 ile 4,49 arasında beş değer daha. Uygun belirteç zaten vardı; sorun, sekiz kuralın onu baypas etmesiydi.
Ne çıktı
Sekiz değer belirteçle değiştirildi ve belirteç, sitenin yedi arka planının hepsinde eşiği geçecek şekilde ayarlandı. İki kez doğrulandı: depoda artık bu sekiz rengin hiçbiri görünmüyor ve bugün üretim tarafından sunulan stil sayfası yalnızca belirteci içeriyor. Bağımsız olarak yeniden hesaplandı: en kötü durumda 4,72:1 ve beyaz üzerinde 5,45:1. Denetimin geri kalanı zaten doğru olanı doğruladı — odak göstergesi, sekme gruplarındaki klavye kalıbı, etiketler ve form durumları, duraklatma düğmeleriyle animasyonların tam kapsamı.
Vakanın söylemedikleri
İki bulgu açık kaldı ve aynen böyle yazıldı: 320 px genişlikte üst bilgi ekrandan 22 px taşıyor ve hukuki belgelerde metin içindeki bağlantılar yalnızca renkle ayırt ediliyor, çevredeki metne göre 1,01:1 oranında — yalnızca renk yeterli değil, altı çizili olması gerekir. Ve yöntem sınırı: otomatik bir araç kriterlerin bir kısmını kapsar. Klavyeyle etkinleştirme mevcut araçlarla test edilemedi ve doğrulanmadı olarak işaretlendi, geçti olarak değil.
Sorular
Sayılar demektir, sıfatlar değil. Bu sitedeki ikincil metin tek bir belirteç kullanır, `#666b65`, ve göründüğü yedi arka plan üzerinde 4,72:1 ile 5,45:1 arasında sonuç verir — küçük metin için gereken eşik 4,5:1’dir. Odak, yalnızca klavyeyle gezinmede görünen 2 px’lik bir çerçevedir. Hareketin bir durdurma düğmesi vardır ve sistemdeki azaltılmış hareket tercihiyle tamamen devre dışı bırakılır. Bu ifadelerin her birinin kodda bir yeri ve doğrulama yöntemi vardır.
axe-core 4.10.2, canlı sayfada çalıştırıldı; farklı kalıpları kapsayan on sayfa üzerinde — ana sayfa, katalog, bir ürün sayfası, dizin ve bir hizmet sayfası, çözümler matrisi ve ondan bir kombinasyon, iletişim, tarifeler, bir makale, bir hukuki belge. Sayfa başına düğüm sayısıyla birlikte ham sonuç belgeye girer. Bunun üzerine, tek bir araca bağımlı kalmamak için, oranları standarttaki formülle elle yeniden hesaplıyoruz. Ve neyin doğrulanamadığını açıkça yazıyoruz.
Denetim sırasında sistematik olarak ihlal edilen tek kural kontrasttı: sayfa başına 31 ile 43 düğüm, bunların 31’i üst bilgi ve alt bilgiden, yani tüm 147 adres üzerinde çarpılarak. Stil sayfasına doğrudan yazılmış sekiz renk 2,88 ile 4,49:1 üretiyordu; en ağır olanı, 10 px ve 3,72:1 ile, hukuki bağlantıların satırıydı. Sekizinin tümü artık belirteçle değiştirildi ve düzeltme üretim tarafından sunulan stil sayfasında yer alıyor. İki şey açık kalıyor: 320 px’de üst bilgi ekrandan 22 px taşıyor ve hukuki belgelerde metin içindeki bağlantılar yalnızca renkle ayırt ediliyor, çevredeki metne göre 1,01:1 oranında. Her ikisi için de çözüm yazılmıştır.
Aksi takdirde “erişilebilir” maliyetsiz bir kelimedir. Herkes standarda uyduğunu yazabilir; çok azı uygunsuzluk listesini, düğüm sayısıyla ve stil sayfasındaki satırla birlikte gösterir. Birlikte çalışırsak, siteniz hakkında aynı tür bir listeyi alacaksınız — bize iyi gelmeyen kısımlar da dahil. Bunu bizden öğrenmek daha ucuzdur.
Hayır, ve bunu söylüyorum çünkü doğrulanabilir: belirteç bloğu, aynı değerleri alan üç seçici için tanımlanmıştır ve kodda renk şeması tercihi için hiçbir kural yoktur. Tarayıcıda koyu şemayı emüle edince sayfa beyaz kalıyor. İyi tarafı, ölçülen tüm kontrast oranları her iki şema için de geçerlidir. Çözülmesi gereken taraf, renkleri değiştirmeyen bir tema anahtarının ölü kod olduğudur. Gerçek bir koyu tema, kontrastın tamamen yeniden ölçülmesi demektir — açık temadan aktarılmaz.
Edebilir, bu yüzden iki çıkışı vardır. Birincisi: sonsuz animasyonlu her öğe bir duraklatma düğmesiyle kapsanır — ana sayfada, 38’inin tamamının kapsandığını, sıfırının kapsanmadığını kontrol ettik. İkincisi: sistemde azaltılmış hareket tercihi etkinleştirildiğinde, küresel bir kural her türlü animasyon ve geçişi iptal eder, yumuşak kaydırmayı durdurur ve hatta duraklatma düğmesini gizler. Klasik tuzağı da kontrol ettik: bir animasyon neredeyse sıfır opaklıktan başlar ve iptal edilirse, içerik görünmez kalabilir. Burada bu olmuyor, çünkü öğelerde düşük temel opaklık yok.
Tokenleri ve bileşenleri kod içinde teslim ediyoruz. Tasarım aracında kalan bir tasarım sistemi, ilk acil durumda aşınır: biri bileşene doğrudan bir renk yazar çünkü “burada böyle daha iyi görünüyor”, ve altı ay sonra doğrulamayı bozan sekiz paralel renginiz olur. Aynı şey bizde de oldu, yukarıda belgelenmiştir ve bu yüzden ikincil metin rengi için tek doğruluk kaynağı tokendir.
Denetimde olduğu gibi yazılmış birkaç somut şey. Klavyeyle etkinleştirme: kullanılan tarayıcı paneli varsayılan etkinleştirme üretmiyor — bir düğmede Enter’a basmak tıklama üretmiyor — bu yüzden Enter ve Space hakkında sonuç bildirmiyoruz. Azaltılmış hareket tercihinin emülasyonu: bunu tarayıcıda etkinleştiremedik, dolayısıyla kural kaynakta doğrulandı ve tercih açıkken manuel test önerilmeye devam ediyor. Algılanan yükleme ölçümleri de araçta उपलब्ध değildi, bu yüzden tahmin edilmemiş, ölçülmemiş olarak işaretlendi.
Hayır, ve dürüst hiç kimse bunu yalnızca otomatik bir araca dayanarak yapmamalıdır. Bir araç kriterlerin bir kısmını kapsar; geri kalanı manuel doğrulama ister ve bazıları gerçek kullanıcılar gerektirir. Garanti ettiğimiz şey yöntemdir: beyan edilmiş örneklem, beyan edilmiş araç ve sürüm, yayımlanmış ham sonuç, bağımsız olarak yeniden hesaplanan oranlar, doğrulama kriteriyle giderme ve doğrulanamayanların açık listesi. Bu liste olmadan bir sertifika hiçbir şey söylemez.
Bunlardan 14 tanesi depolarımızdaki kod ve dosyalardır. Adlarını ya da satırlarını yayımlamıyoruz: hepsi bir arada, tek bir sayfada, yalnızca bize ait olmayan sistemlerin nasıl kurulduğunu fazla net anlatırdı. İstek üzerine, depoda sizinle birlikte gözden geçiriyoruz — doğrulama hâlâ mümkün, sadece bir görüşme içinde yapılıyor.
Bize sürecinizi anlatın. Neyin kurulmaya değer olduğuna, neyi bağlayabileceğimize ve sonucu nasıl doğrulayacağımıza birlikte karar verelim.