Sabit başlıkta kaybolan odağı ayrı bir kullanım sorunu olarak görün

Bir sayfada fareyle her bağlantıya kolayca tıklanabilir; fakat yalnız klavyeyle ilerleyen kişi Tab tuşuna bastığında hangi öğede olduğunu göremeyebilir. Odak göstergesi çok silikse, başlık ya da alt bant odaktaki düğmeyi tamamen kapatıyorsa, kullanıcı sayfada nerede bulunduğunu kestiremez. Sayfanın yerleşimi, gezinme sırası, sabit katmanlar ve ekranın yüksekliği birlikte değerlendirilmelidir.

Bu rehberin odağı web sitesinde klavye ile ilerlerken görünen odak işaretinin korunması ve sabit üst/alt öğelerin odaktaki denetimi örtmesinin önlenmesidir. Amaç bir sitenin erişilebilirlik standardına uygun olduğunu ilan etmek veya tek bir denetim listesiyle sertifika vermek değildir. Tasarım ekibinin ortak başlık, kayan uyarı, menü, iletişim penceresi ve sayfa sonu alanlarında aynı sorunu tekrar edilebilir şekilde sınamasına yardımcı olacak bir kontrol yolu sunar. Her site, içerik yapısı ve etkileşimi üzerinden ayrıca incelenmelidir.

W3C’nin Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.2 açıklama belgeleri üç ayrı ölçütü birbirinden ayırır. 2.4.7 Odak Görünür (AA), klavyeyle kullanılabilen arayüzlerde odağın görülebildiği bir çalışma biçimi ister. 2.4.11 Odak Kapanmaz – Asgari (AA), odak alanının yazarın oluşturduğu başka içerik tarafından tamamen gizlenmemesini ele alır. 2.4.3 Odak Sırası (A), klavyeyle ilerleme sırasının anlamı ve çalışmayı korumasını ister. Bunlar aynı kontrol değildir. Bir öğe doğru sırayla odak alabilir, ancak sabit başlığın arkasında kalabilir; çevresinde belirgin çizgi olsa bile ekranda görünmeyebilir.

Yalnız görünüşe değil, odaklanan öğeye bakın

Sayfanın üstünden başlayıp Tab ve gerektiğinde Shift+Tab ile bağlantılar, düğmeler ve form denetimleri arasında ilerleyin. Her adımda odak göstergesinin hangi öğede olduğunu gözle görülür biçimde izleyin. Görsel tasarımda seçilmiş bir çizgi, arka plan farkı veya başka belirgin işaret kullanılabilir; hangi yaklaşımın uygun olduğuna tasarım sistemi karar verir. Odak göstergesini kaldırmak ya da yalnız fare imlecinin konumuna güvenmek, klavyeyle kullanan kişiye aynı bilgiyi sağlamaz.

Odak görünürlüğünü sınarken işaretin arka planla karışıp karışmadığını, üst üste binen görselin altında kalıp kalmadığını ve farklı içerik yüzeylerinde seçilebilir olup olmadığını inceleyin. Bir düğmenin çevresindeki çizgi açık renkli bölümde görünürken koyu fotoğraf alanında kaybolabilir. Menü açıkken gösterge arka sayfadaki düğmeye geçiyorsa, kullanıcı kapalı bir katmanın içine taşınmış gibi hissedebilir. Ekranın yalnızca ilk bölümüne bakmak yerine gezinmeyi sayfanın sonuna kadar sürdürün; sabit alt çubuklar, yukarıdan görülen sabit menüler kadar sorun çıkarabilir.

W3C’nin odak görünürlüğü açıklaması, belirli bir renk veya tek bir teknik zorunlu kılmaz; yeterli görünürlük sağlayan farklı uygulamaların bulunabileceğini söyler. W3C’deki teknik örnekler de uygun yöntemleri gösterir, tek geçerli çözüm listesi değildir. Bu nedenle yalnızca denetim aracında yeşil sonuç görmekle yetinmeyin. Gerçek sayfada klavye kullanımıyla odak işaretinin görülüp görülmediğini, gerektiğinde farklı arka plan ve pencere boyutlarında tekrar kontrol edin.

Sabit başlık ve alt bantları farklı ekran koşullarında deneyin

Sabit başlık, sayfa kaydırılırken görünür kalır. Bu düzen menüyü sürekli erişilebilir tutabilir; ancak tarayıcı içeriği odaklanan bağlantıya kaydırdığında başlık o bağlantının üzerini örtebilir. W3C’nin 2.4.11 açıklaması, yapımcı tarafından eklenen sabit üst/alt alanları ve bildirimleri tipik örtme örnekleri arasında sayar. Asgari ölçütte odaktaki öğenin tamamen kapanmaması değerlendirilir; bununla birlikte kısmi örtülmeyi azaltmak da kullanıcının odağı izleyebilmesini kolaylaştırır.

Her sayfa için küçük bir senaryo listesi çıkarın: masaüstünde uzun hizmet sayfası, telefonda menü açılıp kapanması, formda son düğmeye ulaşma, sabit alt iletişim çubuğu, açılır bildirim veya pencere ve sayfa sonunda kalan bağlantılar. Önce Tab ile aşağı, ardından Shift+Tab ile geri ilerleyin. Sık kullanılan sabit katmanlar görünürken odaklanan bileşenin tamamen kaybolup kaybolmadığını kaydedin. Pencere daraltıldığında veya yüksekliği azaltıldığında başlık büyüyor mu? Büyütme etkin olduğunda aynı kontrol görünür kalıyor mu? Ekran yönü değişince ya da sayfa yakınlaştırılınca sabit alan kullanılabilir yüksekliğin çoğunu kaplıyor mu?

W3C’nin F110 hata tekniği, sabit üst ya da alt alanın klavyeyle odaklanmış öğeyi tamamen kapatabileceği bir örnek sunar ve test adımı olarak sayfada hem aşağı hem yukarı Tab ile ilerlemeyi tarif eder. Bu, W3C’nin bütün siteler için zorunlu kod tarifi verdiği anlamına gelmez. Teknik not, ilgili ölçütün bir başarısızlık durumunu açıklayan örnektir. Tasarımcı farklı bir çözüm de kullanabilir; önemli olan gerçek arayüzde odağın bulunabilir ve işletilebilir kalmasıdır.

Sıra, açılır katman ve sayfa içi gezinmeyi tek akışta sınayın

Odak sırası görsel yerleşimle birebir aynı olmak zorunda değildir; fakat anlamı ve işleyişi korumalıdır. Üst menü, ana içerik, kart eylemi ve alt bağlantılar arasında ilerleyen kullanıcı birdenbire ekranın başka ucundaki öğeye atlamamalıdır. Sayfa kaynak sırası ve görsel düzen ayrışıyorsa, örnek görevleri sadece fareyle değil klavyeyle de yürütün. Tekrarlanan odağı, atlanan denetimi ve beklenmedik menü sıçramasını ayrı hata olarak not edin. Kullanıcıyı çok uzun bağlantı dizisinden geçirmek yerine ana içeriğe atlama bağlantısı veya uygun odak başlangıcı değerlendirin.

Menü veya iletişim penceresi açıldığında odak hangi bölüme taşınıyor? Açılan öğeler kapatılınca odak, işlemi başlatan düğmeye veya anlamlı sonraki adıma dönebiliyor mu? Bu davranışı varsaymak yerine her etkileşim için deneyin. Ekranda açık görünmeyen fakat klavye sırasına giren menü bağlantıları, kullanıcıyı görünmeyen kontrollere götürebilir. Aynı şekilde odak pencerede kalması gerekirken arka sayfadaki bağlantılara geçerse, kullanıcı hangi alanın aktif olduğunu anlamakta zorlanabilir. Bu örneklerde ürünün açılır öğe tasarımını ve klavye modelini geliştiren ekip birlikte karar vermelidir.

Klavye kontrolünde yalnızca Tab tuşuna basmak yeterli olmayabilir. Enter veya Boşluk tuşuyla bağlantı, düğme ve seçimlerin beklenen işlevi başlatıp başlatmadığını; Escape ile kapanması tasarlanan öğelerin gerçekten kapanıp kapanmadığını kontrol edin. Bunlar her bileşen için aynı davranışın zorunlu olduğu anlamına gelmez. Etkileşim modeli öğenin türüne ve geçerli tasarımına göre belirlenir. İnceleme, ekrandaki kontrolün ne işe yaradığını ve klavye kullanan kişinin bu işlemi nasıl tamamlayacağını doğrulamalıdır.

Düzeltme kararını ölçüte ve tekrar testine bağlayın

Bir kusur kaydında sayfa adresini, kullanılan ekran boyutunu, klavyeyle izlenen adımları, odaklanılan öğeyi ve görülen sorunu belirtin. “Odak bozuk” notu geliştiriciye yeterli tekrar bilgisi vermez. Örneğin “sayfanın üstünden yedi kez Tab; sabit başlık açıkken hizmet fiyatı bağlantısı tamamen görünmez” şeklinde tarif, durumun yeniden kurulmasına yardım eder. Kayıtta beklenen sonucu da yazın: odaktaki öğe görünür olmalı, açılır menünün sırası anlamlı kalmalı veya sabit bant ilgili bağlantıyı kapatmamalı. Ekran görüntüsü kanıt olabilir; fakat klavye adımlarının yerini tutmaz.

Çözüm birden fazla olabilir: sabit alanı belirli görünüm koşullarında normal akışa almak, başlık yüksekliğini azaltmak, odaklanan öğe çevresinde kaydırma boşluğu bırakmak veya katmanı kullanıcı işleminden sonra kapatmak düşünülebilir. Hangi değişikliğin uygun olduğu sayfanın gerçek gereksinimine ve teknik yapısına bağlıdır. Her sayfada sabit menüyü kaldırmak ya da her ekrana aynı sayfa biçimlendirme ayarını uygulamak otomatik doğru çözüm değildir. Değişikliğin bir sayfada odak görünürlüğünü iyileştirirken başka bir sayfada menü erişimini bozmadığını yeniden test edin.

Önce ve sonra kontrolünü aynı başlangıç noktası, gezinme yönü, sayfa içeriği ve ekran boyutuyla yapın. Düzeltmeden sonra yalnızca ilgili bağlantıyı değil, önceki ve sonraki odak adımlarını da tekrar deneyin. Ortak başlık bileşeni değiştiyse bu bileşeni kullanan temsilî sayfalara bakın; bir sayfada yapılan iyileştirme başka bir şablonda aynı sonucu vermeyebilir. Test tarihi, sürüm veya sayfa, bulgu, değişiklik ve son kontrol sonucunu kısa kayda alın. Bu kayıt bütün erişilebilirlik koşullarının sağlandığını kanıtlamaz; hangi senaryonun denendiğini ve hangi sorunun kapandığını açıklar.

Web tasarım ve yazılım hizmeti kapsamında sayfa şablonları ve etkileşimlerin proje gereksinimlerine göre nasıl ele alınacağını görüşebilirsiniz. Mobil kullanım rehberi küçük ekrandaki görevleri, form kontrolü rehberi ise formdaki kötüye kullanım önlemlerinin erişilebilir davranışla nasıl birlikte sınanacağını açıklar. Yazdırma görünümü rehberi de ekrandaki bir sayfanın başka bir sunum biçimine dönüştüğünde nelerin değiştiğini ele alır. Bu konular birbirinin yerine geçmez; odak görünürlüğü ve klavye sırası ayrıca test edilmelidir.

Sık Sorulan Sorular

Odak göstergesi görünürken sabit başlık öğeyi örtüyorsa sorun çözülmüş sayılır mı?

Hayır. Görünür odak işareti, nerede bulunulduğunu gösterir; fakat odaklanan bağlantı veya düğme başlığın arkasında tamamen kapanmışsa kullanıcı onu göremeyebilir veya kullanamayabilir. Odak görünürlüğü ile odaklanan bileşenin sabit içerik altında kalmamasını ayrı kontroller olarak ele alın. İki durumu da klavye ile gerçek sayfada deneyin.

WCAG 2.2 hangi odak kontrollerini birbirinden ayırıyor?

2.4.7 Odak Görünür, klavyeyle kullanılabilen öğelerde odağın görülebildiği bir çalışma biçimini; 2.4.11 Odak Kapanmaz – Asgari, odaklanan öğenin yazarın oluşturduğu içerik tarafından tamamen gizlenmemesini; 2.4.3 Odak Sırası ise gezinme dizisinin anlam ve işleyişi korumasını ele alır. Bunların değerlendirmeleri farklıdır. W3C açıklamaları bilgilendirici anlatımdır; ölçütün kendisi ve proje testleri birlikte incelenmelidir.

Yalnız klavyeyle test için hangi adımlardan başlamalıyım?

Fareyi bırakıp sayfanın üstünden Tab ile ilerleyin; odak göstergesinin yerini ve sıranın mantığını izleyin. Sonra Shift+Tab ile geriye dönün. Menü, açılır pencere, sabit bildirim ve alt iletişim çubuğu gibi katmanlar açıkken tekrarlayın. Her odak adımında öğenin görülebilir olup olmadığını, bir işlemin klavyeyle başlayıp tamamlanabildiğini ve kapatınca odağın nereye döndüğünü not edin.

Sayfada ana içeriğe atlama bağlantısı bulunmalı mı?

Bu karar sayfanın yapısına ve kullanıcı görevine bağlıdır. Uzun bir tekrar eden menüden ana içeriğe geçiş sağlamak için atlama bağlantısı yararlı olabilir. Varsa klavyeyle erişilebildiğini, odaklandığında görünür olduğunu ve hedefe ulaştığında ana içeriğin sabit başlığın altında kaybolmadığını test edin. Bağlantının yalnızca görsel olarak saklanması veya hedefin belirsiz olması yeterli değildir.

Sabit üst menüyü bütün sayfalardan kaldırmak mı gerekir?

Hayır. Sabit menü bazı görevlerde erişimi kolaylaştırabilir. Önce hangi ekran ve yakınlaştırma koşulunda odaklanan öğeyi kapattığını belirleyin. Ardından başlık yüksekliği, katmanın görünümü veya odaklanan öğeye ayrılan kaydırma alanı gibi çözümleri tasarım ve geliştirme ekibiyle karşılaştırın. Her çözümü aynı test senaryolarında yeniden deneyin; bir düzenlemenin başka bir şablondaki etkisini varsaymayın.

Otomatik erişilebilirlik taraması odak testinin yerine geçer mi?

Hayır. Tarama bazı yapılandırma sorunlarını bulabilir; ancak belirli bir klavye sırasının anlamlı olup olmadığını, sabit bandın gerçek kullanımda odaktaki öğeyi örtüp örtmediğini veya açılır öğeden sonra odağın doğru yere dönüp dönmediğini tek başına kanıtlamaz. Otomatik kontrolü başlangıç verisi olarak kullanın ve sayfa görevlerini elle klavyeyle yürütün. Sonucu erişilebilirlik uygunluğu garantisi olarak sunmayın.

Odak göstergesinin rengi ve biçimi nasıl seçilmelidir?

Tek bir renk veya şekil her tasarım için zorunlu kabul edilmemelidir. Göstergenin farklı arka plan ve bileşenlerde kolay seçilip seçilmediğini, yüksek büyütmede ve etkileşim sırasında kaybolup kaybolmadığını inceleyin. W3C’nin 2.4.7 açıklaması görünür bir odak göstergesinin gereğini anlatır; teknik örnekler olası yöntemler sunar. Seçilen tasarımı gerçek sayfa görünümünde test edin.

Bir düzeltmenin tamamlandığını nasıl kaydetmeliyim?

Sayfa veya şablon, ekran koşulu, klavye adımları, önceki bulgu, yapılan değişiklik ve tekrar test sonucu için kısa kayıt tutun. Sonuç “başarılı” gibi tek kelime kalmasın; hangi kontrolün yapıldığı görülsün. Bu, yalnızca o senaryonun denendiğini gösterir; tüm erişilebilirlik koşullarının sağlandığına dair kapsamlı beyan yerine geçmez.