cemyaşlı.
TR
Cem Yaşlı / Menü
← Stüdyo notları
UI ve UX2 dk okuma

Seçili kartı renk olmadan nasıl ayırt ederiz?

Seçim kartını gri tonlarda sınayın: işaret, kenarlık ve klavye odağı aynı ekranda üç ayrı işi nasıl anlatır?

Cem Yaşlı
Ekranda yan yana duran, iki farklı gri tonda Aa yazı tipi kartı.

Bir yazı tipi seçicide iki kart düşünün. İkisinde de “Aa” örneği var. Seçtiğiniz kart mora dönüyor; sonra Tab tuşuna basınca öteki kartın çevresinde de mor bir çizgi beliriyor. Şimdi hangi yazı tipi uygulanacak? Sorun morun tonu değil. Aynı görsel işaret iki farklı şeyi anlatıyor.

İki kart, üç ayrı durum

Birinci taslakta kartların altına “Serif” ve “Sans serif” yazın. Seçimi yalnızca dolgu rengiyle belirtin. İkinci taslakta seçili kartın başlığına bir onay işareti ve “Seçili” etiketini ekleyin. Klavye odağı için kartın dışında, içerideki işarete değmeyen bir çerçeve ayırın. Böylece seçim siz değiştirene kadar kartta kalır; odak ise klavyeyle dolaştığınız yeri gösterir.

Bir dakikalık kontrol

  1. Taslağın gri tonlu bir kopyasını alın. Renk adını söylemeden hangi seçeneğin etkin olduğunu tarif edebiliyor musunuz?
  2. Çalışan arayüzde klavyeyle ilerleyin. Seçim değişmeden odak başka bir kontrole geçtiğinde iki durum hâlâ ayırt ediliyor mu?
  3. Bir yazı tipi etiketi iki satıra uzadığında onay işareti yazının üzerine biniyor mu? Özellikle dar ekranda kontrol edin.

Tek seçimli bir grupta geliştiriciye yalnızca ekran görüntüsü teslim etmeyin: kontrollerin aynı adlı radyo düğmeleri olarak çalışmasını, her birinin okunabilir etiketi olmasını ve seçili durumun yardımcı teknolojilere aktarılmasını belirtin. Gri tonlu prova ilk sorunu yakalar; tek başına erişilebilirlik testi değildir.

W3C: WCAG 2.2, 1.4.1 · 5 Ekim 2023 tarihli öneri

Not defterinden

Adobe MAX 2026’da MCP desteği tasarımcılar için ne değiştiriyor? ↗Otel yönlendirme tabelası için tasarımcıya hangi ölçüleri vermeliyim? ↗Tüm yazılar ↗