Header, menü, modal ve araç eylemlerini yalnız güzel görünmeleriyle değil; üst üste binme, dokunma, klavye ve ekran okuyucu görevleriyle kabul edin. Uygulama, olumsuz test, kabul kanıtı ve bakım adımlarıyla özgün rehber.
Okuduklarınızı güvenli bir denemeye dönüştürün
“Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi” adımlarını gerçek veriye geçmeden önce sentetik bir örnekle CSS Z-index Katman Haritası üzerinde deneyin. İşaretler yalnızca bu sekmede tutulur.
Kısa cevap ve hedef
320 px genişlikten masaüstüne ve %200 metin büyütmeye kadar bir kullanıcının ana eylemi bulabildiği, dokunabildiği, klavyeyle çalıştırabildiği ve sonucunu okuyabildiği bir kabul matrisi kurmak.
Erişilebilir arayüz tasarımı kararında sorumlu kişiyi, yanlış sonucun etkisini, kullanılacak veri sınıfını ve otomatikleştirilmeyecek son onayı başlamadan yazın. “Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi” örneklerine kişisel veya gizli veri taşımayın.
- 320 px genişlikten masaüstüne ve %200 metin büyütmeye kadar bir kullanıcının ana eylemi bulabildiği, dokunabildiği, klavyeyle çalıştırabildiği ve sonucunu okuyabildiği bir kabul matrisi kurmak.
Girdi ve kapsam sözleşmesi
“Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi” akışında başarı, yalnız aracın çıktı vermesi değil; header, menü, modal ve araç eylemlerini yalnız güzel görünmeleriyle değil; üst üste binme, dokunma, klavye ve ekran okuyucu görevleriyle kabul edin. Son kararın sahibi ve geri alma yolu baştan görünür olmalıdır.
Bu akışın her adımında girdiyi, çıktıyı, durdurma koşulunu ve geri alma yolunu görünür tutun. “mobil-arayuz-katman-dokunma-hedefi-rehberi” kapsamındaki sessiz düzeltmeleri alanı ve yapılacak eylemi söyleyen hatalara dönüştürün.
Adım adım uygulanabilir yöntem
Önce katman adlarını ve küçük bir z-index bütçesini tanımlayın; yüksek sayı yarışını tasarım tokenlarına dönüştürün. Sonra gerçek buton dikdörtgenlerini ve en yakın komşu aralığını ölçün. Her ikon eyleminde görünür metin veya erişilebilir ad, doğru odak sırası, belirgin odak göstergesi ve sonuç duyurusu bulunmalıdır.
Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi için rakamları kaynak toplamla, metni gerçek ekranla, güvenlik iddiasını tehdit modeliyle ve içerik iddiasını W3C WCAG 2.2 gibi güncel birincil kanıtla uzlaştırın.
Olumsuz ve uç durum testleri
Yatay taşan sekme, sabit header altında kalan odak, modal arkasında tıklanabilen içerik, yalnız hover ile görünen açıklama, metin uzayınca küçülen buton ve kapat düğmesine çok yakın eylem kasıtlı olarak sınanmalıdır. Türkçe ve Almanca uzun etiketler kısa İngilizce örnekten daha erken taşabilir.
Erişilebilir arayüz tasarımı görevini masaüstü yanında dar mobil görünüm, klavye, %200 metin, yavaş cihaz ve ağsız durumda tamamlayın; Yatay taşan sekme, sabit header altında kalan odak, modal arkasında tıklanabilen içerik, yalnız hover ile görünen açıklama, metin uzayınca küçülen buton ve kapat düğmesine çok yakın eylem kasıtlı olarak sınanmalıdır. Türkçe ve Almanca uzun etiketler kısa İngilizce örnekten daha erken taşabilir.
Sonucu kullanıcı göreviyle doğrulama
Erişilebilir arayüz tasarımı kapsamındaki mutlu yolu küçük ve sentetik örnekle kurun; ardından boş, bozuk, aşırı büyük, yinelenen ve sınırda girdileri aynı kabul ölçütleriyle çalıştırın.
Bu kabul kaydında sürüm, tarih, veri örneği, eşik, bilinen risk, onay sahibi ve sonraki inceleme tetikleyicisi bulunmalıdır. Asgari kanıt şudur: Rota ve breakpoint başına hedef ölçüleri, odak sırası, erişilebilir ad kaynağı, %200 metin görüntüsü, açık/koyu tema kontrastı ve bir ana görevin klavye/mobil tamamlanma sonucu kaydedilmelidir. Ekran görüntüsü, etkileşim kaydıyla birlikte anlamlıdır.
Kanıt ve bakım kaydı
Rota ve breakpoint başına hedef ölçüleri, odak sırası, erişilebilir ad kaynağı, %200 metin görüntüsü, açık/koyu tema kontrastı ve bir ana görevin klavye/mobil tamamlanma sonucu kaydedilmelidir. Ekran görüntüsü, etkileşim kaydıyla birlikte anlamlıdır.
Bakım sırasında W3C WCAG 2.2 kaynağını yeniden açın, sürüm veya tarih değişimini kaydedin ve yöntemi aynı sentetik örnekle tekrar çalıştırın. Değişiklik yoksa doğrulanan kapsamı yine yazın.
Sınırlar ve sorumlu sonraki adım
Statik CSS ve ölçüm satırları gerçek stacking context, ekran okuyucu davranışı veya motor koordinasyonunu kanıtlamaz. Son kontrol desteklenen tarayıcı, mobil cihaz ve yardımcı teknolojiyle gerçek görev üzerinden yapılmalıdır.
Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi çıktısını nihai gerçek gibi yayınlamayın. Statik CSS ve ölçüm satırları gerçek stacking context, ekran okuyucu davranışı veya motor koordinasyonunu kanıtlamaz. Son kontrol desteklenen tarayıcı, mobil cihaz ve yardımcı teknolojiyle gerçek görev üzerinden yapılmalıdır. Yüksek etkili kararı güncel kaynak ve yetkili insan incelemesine bağlayın.
- Statik CSS ve ölçüm satırları gerçek stacking context, ekran okuyucu davranışı veya motor koordinasyonunu kanıtlamaz. Son kontrol desteklenen tarayıcı, mobil cihaz ve yardımcı teknolojiyle gerçek görev üzerinden yapılmalıdır.
Kaynaklar ve doğrulama
“Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi” hazırlanırken 1 birincil veya resmî belge doğrudan kontrol edildi. Uygulamadan önce bağlantılardaki güncel sürümü ve değişiklik tarihini yeniden doğrulayın.
Rehberi tekrarlanabilir bir kontrole dönüştürün
“Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi” için aşağıdaki 4 araçlık kontrol planını kullanın. Hedef: Header, menü, modal ve araç eylemlerini yalnız güzel görünmeleriyle değil; üst üste binme, dokunma, klavye ve ekran okuyucu görevleriyle kabul edin. Uygulama, olumsuz test, kabul kanıtı ve bakım adımlarıyla özgün rehber. Gerçek veri yerine güvenli bir örnekle başlayın; her adımın beklenen sonucunu ve kabul kararını kaydedin.
CSS Z-index Katman Haritası
- Hazırlık
- Alanları doğrudan doldurun veya örnek veriyi yükleyin. CSS Z-index Katman Haritası için beklenen biçim: CSS Z-index Katman Haritası için başlangıç girdisi: desteklenen renk, CSS, SVG, görsel veya boyut değerleri. Araç bu girdiyi “CSS seçicilerini z-index değerleriyle sıralayıp çakışan ve aşırı katmanları bulun” amacıyla kullanır..
- Uygulama
- İncelemeyi cihazınızda çalıştırın ve işaretlenen satırları kontrol edin. CSS Z-index Katman Haritası, şu yöntemi uygular: CSS Z-index Katman Haritası, “CSS seçicilerini z-index değerleriyle sıralayıp çakışan ve aşırı katmanları bulun” hedefi için şu açıklanabilir yöntemi uygular: değerler tarayıcı API'leri ve görünür dönüşüm formülleriyle işlenir; kaynak korunur.
- Kabul kontrolü
- Çıktıyı kaynak verinizle uzlaştırıp yalnızca doğrulanan sonucu kullanın. CSS Z-index Katman Haritası kabul ölçütü: CSS Z-index Katman Haritası sonucunu kabul etmeden önce açık/koyu arka plan, farklı ekran boyutları, hedef uygulama ve kaynakla görsel karşılaştırma kontrolünü tamamlayın; beklenen amaç “CSS seçicilerini z-index değerleriyle sıralayıp çakışan ve aşırı katmanları bulun” olmalıdır..
- Beklenen çıktı
- CSS Z-index Katman Haritası tamamlandığında önizlenebilir görsel değer, ölçü/biçim özeti ve kopyalanabilir ya da indirilebilir sonuç sunar; bu çıktı “CSS seçicilerini z-index değerleriyle sıralayıp çakışan ve aşırı katmanları bulun” ihtiyacına göre düzenlenir.. CSS seçicilerini z-index değerleriyle sıralayıp çakışan ve aşırı katmanları bulun.
Dokunma Hedefi Boyut Denetleyici
- Hazırlık
- Alanları doğrudan doldurun veya örnek veriyi yükleyin. Dokunma Hedefi Boyut Denetleyici için beklenen biçim: Dokunma Hedefi Boyut Denetleyici için başlangıç girdisi: yalnızca inceleme yetkiniz bulunan sentetikleştirilmiş kod, yapılandırma, tanımlayıcı veya dosya içeriği. Araç bu girdiyi “Arayüz hedeflerini genişlik, yükseklik ve aralıkla inceleyip mobil kullanım risklerini sıralayın” amacıyla kullanır..
- Uygulama
- İncelemeyi cihazınızda çalıştırın ve işaretlenen satırları kontrol edin. Dokunma Hedefi Boyut Denetleyici, şu yöntemi uygular: Dokunma Hedefi Boyut Denetleyici, “Arayüz hedeflerini genişlik, yükseklik ve aralıkla inceleyip mobil kullanım risklerini sıralayın” hedefi için şu açıklanabilir yöntemi uygular: içerik çalıştırılmaz; yalnızca açıklanabilir statik desenler ve sınırlandırılmış tarayıcı işlemleri uygulanır.
- Kabul kontrolü
- Çıktıyı kaynak verinizle uzlaştırıp yalnızca doğrulanan sonucu kullanın. Dokunma Hedefi Boyut Denetleyici kabul ölçütü: Dokunma Hedefi Boyut Denetleyici sonucunu kabul etmeden önce bulgunun kaynak satırında elle incelenmesi ve uygun profesyonel güvenlik aracı ya da yetkili süreçle bağımsız doğrulama kontrolünü tamamlayın; beklenen amaç “Arayüz hedeflerini genişlik, yükseklik ve aralıkla inceleyip mobil kullanım risklerini sıralayın” olmalıdır..
- Beklenen çıktı
- Dokunma Hedefi Boyut Denetleyici tamamlandığında kanıt konumu, önem derecesi, yanlış pozitif olasılığı ve sonraki doğrulama adımı sunar; bu çıktı “Arayüz hedeflerini genişlik, yükseklik ve aralıkla inceleyip mobil kullanım risklerini sıralayın” ihtiyacına göre düzenlenir.. Arayüz hedeflerini genişlik, yükseklik ve aralıkla inceleyip mobil kullanım risklerini sıralayın.
ARIA Erişilebilir Ad Envanteri
- Hazırlık
- Örneği yükleyin veya anlaşılır alanları kendi senaryonuzla doldurun. ARIA Erişilebilir Ad Envanteri için beklenen biçim: ARIA Erişilebilir Ad Envanteri için başlangıç girdisi: düğme, bağlantı, görsel ve form kontrolleri içeren, betik çalıştırılmasına ihtiyaç duymayan HTML parçası. Araç bu girdiyi “HTML içindeki düğme, bağlantı ve form alanlarını erişilebilir adlarıyla listeleyip adsız kontrolleri bulun” amacıyla kullanır..
- Uygulama
- Denetimi cihazınızda çalıştırın; ölçümleri, uyarıları ve önerilen düzeltmeleri birlikte inceleyin. ARIA Erişilebilir Ad Envanteri, şu yöntemi uygular: ARIA Erişilebilir Ad Envanteri, “HTML içindeki düğme, bağlantı ve form alanlarını erişilebilir adlarıyla listeleyip adsız kontrolleri bulun” hedefi için şu açıklanabilir yöntemi uygular: hTML, DOMParser ile etkisiz belge olarak ayrıştırılır. Görünür metin, label ilişkisi, aria-labelledby, aria-label, alt ve title kaynakları erişilebilir ad önceliğine göre incelenir.
- Kabul kontrolü
- Sonucu gerçek hedef ortamda doğrulayın ve karar kaydına varsayımları ekleyin. ARIA Erişilebilir Ad Envanteri kabul ölçütü: ARIA Erişilebilir Ad Envanteri sonucunu kabul etmeden önce her etkileşimli öğeyi klavyeyle odaklayıp ekran okuyucuda ad, rol, durum ve hata mesajını gerçek erişilebilirlik ağacında karşılaştırma kontrolünü tamamlayın; beklenen amaç “HTML içindeki düğme, bağlantı ve form alanlarını erişilebilir adlarıyla listeleyip adsız kontrolleri bulun” olmalıdır..
- Beklenen çıktı
- ARIA Erişilebilir Ad Envanteri tamamlandığında öğe türü, seçici ipucu, hesaplanan ad kaynağı ve adsız/şüpheli kontrol durumu içeren envanter sunar; bu çıktı “HTML içindeki düğme, bağlantı ve form alanlarını erişilebilir adlarıyla listeleyip adsız kontrolleri bulun” ihtiyacına göre düzenlenir.. HTML içindeki düğme, bağlantı ve form alanlarını erişilebilir adlarıyla listeleyip adsız kontrolleri bulun.
Renk Kontrastı Denetleyici
- Hazırlık
- Ön plan ve arka plan HEX renklerini girin. Renk Kontrastı Denetleyici için beklenen biçim: Renk Kontrastı Denetleyici için başlangıç girdisi: desteklenen renk, CSS, SVG, görsel veya boyut değerleri. Araç bu girdiyi “İki rengi WCAG kontrast oranı ve metin eşikleriyle karşılaştırın” amacıyla kullanır..
- Uygulama
- Kontrast oranını ve eşikleri hesaplayın. Renk Kontrastı Denetleyici, şu yöntemi uygular: Renk Kontrastı Denetleyici, “İki rengi WCAG kontrast oranı ve metin eşikleriyle karşılaştırın” hedefi için şu açıklanabilir yöntemi uygular: değerler tarayıcı API'leri ve görünür dönüşüm formülleriyle işlenir; kaynak korunur.
- Kabul kontrolü
- Gerçek yazı boyutu, ağırlığı ve durum renkleriyle ayrıca test edin. Renk Kontrastı Denetleyici kabul ölçütü: Renk Kontrastı Denetleyici sonucunu kabul etmeden önce açık/koyu arka plan, farklı ekran boyutları, hedef uygulama ve kaynakla görsel karşılaştırma kontrolünü tamamlayın; beklenen amaç “İki rengi WCAG kontrast oranı ve metin eşikleriyle karşılaştırın” olmalıdır..
- Beklenen çıktı
- Renk Kontrastı Denetleyici tamamlandığında önizlenebilir görsel değer, ölçü/biçim özeti ve kopyalanabilir ya da indirilebilir sonuç sunar; bu çıktı “İki rengi WCAG kontrast oranı ve metin eşikleriyle karşılaştırın” ihtiyacına göre düzenlenir.. İki rengi WCAG kontrast oranı ve metin eşikleriyle karşılaştırın.
CSS Z-index Katman Haritası için şu sınır geçerlidir: CSS Z-index Katman Haritası için kullanım sınırı: Kod çalıştırılmaz; bulgu olmaması güvenlik açığı bulunmadığını kanıtlamaz. Bu koşul karşılanmıyorsa çıktıyı zincirin sonraki adımına aktarmayın.
“Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi” kaydında hassas içeriği değil; araç adını, seçilen ayarı, tarayıcı sürümünü ve “Modal ve header çakışması: CSS Z-index Katman Haritası ile yerel analiz” için kabul/red gerekçesini tutun. Böylece kontrol gerçek veriyi çoğaltmadan tekrarlanabilir.
“Mobil Arayüzde Katman, Dokunma Hedefi ve Erişilebilir Ad Kalitesi”, erişilebilir arayüz tasarımı kapsamındaki görünür ByteQuant davranışı ve listelenen 1 birincil kaynak karşılaştırılarak hazırlandı. Sınırlar ve kabul ölçütleri karar desteği sunar; hukuki ya da güvenlik danışmanlığı yerine geçmez.