Birçok kişi, birincil gezinme aracı olarak klavye veya klavyenin işlevselliğini taklit eden yazılım ya da donanım (ör. anahtar cihaz) kullanır. Bu durum kişisel tercihten, verimlilikten veya arızalı donanımdan kaynaklanabilir.
Bilek burkulması gibi geçici fiziksel sınırlamaları olan veya karpal tünel gibi ince motor becerileriyle ilgili engelleri olan kullanıcılar, gezinmek için klavye kullanmayı tercih edebilir. Az görme veya görme engelli kullanıcılar, gezinmek için klavye kullanabilir. Bu kullanıcılar, büyütme veya ekran okuyucu yazılımlarını da kullanabilir. Ancak, ekranlarda gezinmek için gören kullanıcıların kullandığından farklı klavye kısayolu komutları kullanabilirler.
Engeli olmayan bazı kullanıcılar da klavye kullanarak gezinmeyi tercih edebilir.
Bu engeller ve durumlar için klavye desteği çok önemlidir. Klavye erişilebilirliğinin büyük bir kısmı odaklanma üzerine kuruludur. Odak, klavyeden etkin olarak giriş alan ekrandaki öğeyi ifade eder.
Bu modülde, klavye ve odaklanılabilir öğeler için HTML yapısına ve CSS stiline odaklanıyoruz. JavaScript modülü, etkileşimli öğeler için odak yönetimi ve tuş vuruşları hakkında daha fazla bilgi içerir.
Odak sırası
Klavye kullanıcısının gidebileceği öğelere odaklanılabilir öğeler denir. Sekme veya gezinme sırası olarak da bilinen odak sırası, öğelerin odaklandığı sıradır. Varsayılan odak sırası mantıklı, sezgisel olmalı ve sayfanın görsel sırasıyla eşleşmelidir.
Çoğu dilde odak sırası, sayfanın üst kısmında başlar, sol taraftan sağ tarafa doğru ilerleyerek alt kısmında sona erer. Ancak bazı diller sağdan sola okunur. Bu nedenle, sayfanın birincil dili farklı bir odak sırası gerektirebilir.
Odak sırası varsayılan olarak bağlantılar, onay kutuları ve metin girişleri gibi doğal olarak odaklanılabilir HTML öğelerini içerir. Doğal olarak odaklanılabilir HTML öğeleri arasında yerleşik sekme sırası desteği ve temel klavye etkinliği işleme bulunur.
Odaklanma sırasını, normalde odaklanma almayan öğeleri (ör. etkileşimli olmayan HTML öğeleri, özel bileşenler veya ARIA'ya sahip öğeler) içerecek şekilde güncelleyebilir ve doğal odaklanma semantiğini geçersiz kılabilirsiniz.
Tabindex
Odak sırası, pozitif tabindex özelliği olan öğelerle başlar (varsa) ve en küçük pozitif sayıdan en büyüğe (ör. 1, 2, 3) doğru ilerler. Ardından, DOM'daki sıralarına göre tabindex değeri sıfır olan öğelerle devam eder. Tabindex değeri negatif olan tüm öğeler doğal odaklanma sırasından kaldırılır.
Normalde odaklanılamayan öğelere sıfır (tabindex="0") tabindex uygulandığında, bu öğeler DOM'da görünme şekillerine göre sayfanın doğal odaklanma sırasına eklenir. Ancak doğal olarak odaklanılabilir HTML öğelerinin aksine, bu öğelerin tam olarak erişilebilir olması için ek klavye desteği sağlamanız gerekir.
Benzer şekilde, normalde odaklanılabilir olan ancak etkin olmayan bir öğeniz varsa (ör. bir giriş alanı doldurulana kadar çalışmayan bir düğme) bu öğeye negatif bir tabindex (tabindex="-1") eklemeniz gerekir. Negatif tabindex eklemek, bu düğmenin doğal odaklanma sırasından kaldırılması gerektiğini yardımcı teknolojilere ve klavyelere bildirir. Ancak endişelenmeyin. Odaklanmayı gerektiğinde öğeye geri eklemek için JavaScript'i kullanabilirsiniz.
Bu örnekte, doğal olarak odaklanılmayan öğelere tabindex özelliği eklenmiştir. Öğelerin sırası, odak sırası üzerindeki etkisini göstermek için tabindex kullanılarak değiştirildi. Bu, ne yapmamanız gerektiğine dair bir örnektir.
Atlama bağlantıları
Günümüzde çoğu web sitesinin sayfanın ana üstbilgisinde, sayfadan sayfaya değişmeyen uzun bir menü bağlantıları listesi bulunur. Bu, genel gezinme için harika olsa da yalnızca klavye kullanan kullanıcıların birden çok kez sekme tuşuna basmak zorunda kalmadan web sitesinin ana içeriğine kolayca ulaşmasını zorlaştırabilir.
Gereksiz veya faydasız bağlantı gruplarını atlamanın bir yolu atlama bağlantısı eklemektir. Atlama bağlantıları, kullanıcıyı web sitesindeki başka bir sayfaya veya harici bir kaynağa göndermek yerine aynı sayfanın farklı bir bölümüne atlamak için bu bölümün kimliğini kullanan bağlantılardır. Atlama bağlantıları genellikle bir kullanıcı web sitesine geldiğinde karşılaşacağı ilk odaklanılabilir öğe olarak eklenir ve tasarıma bağlı olarak, kullanıcı sekme tuşuyla bağlantıya gidene kadar görünür veya görsel olarak gizli olabilir.
Kullanıcı sekme tuşuna bastığında ve etkin bir atlama bağlantısı varsa klavye odağı atlama bağlantısına gönderilir. Kullanıcı, atlama bağlantısını tıklayarak başlık bölümünü ve ana gezinmeyi atlayabilir. Atlama bağlantısını tıklamayıp DOM'da sekme tuşuyla ilerlemeye devam ederlerse odaklanılabilir bir sonraki öğeye yönlendirilirler.
Tüm bağlantılarda olduğu gibi, atlama bağlantısının bağlantının amacı hakkında bağlam bilgisi içermesi önemlidir. "Ana içeriğe atla" ifadesini eklemek, bağlantının kullanıcıyı nereye yönlendirdiğini bildirir. Bağlantılarınıza ek bağlam sağlarken aralarından seçim yapabileceğiniz birçok kod seçeneği vardır. Örneğin, aria-labelledby, aria-label veya örnekte gösterildiği gibi <a> öğesinin metin içeriğine ekleme.
Odak göstergesi
Az önce öğrendiğiniz gibi, odak sırası klavye erişilebilirliğinin önemli bir yönüdür. Odaklanmanın nasıl şekillendirileceğine de karar vermeniz gerekir. Çünkü odak sırası mükemmel olsa bile kullanıcı, uygun stil olmadan sayfada nerede olduğunu nasıl bilebilir?
Görünür bir odak göstergesi, kullanıcılara sayfada her zaman nerede oldukları hakkında bilgi vermek için çok önemlidir. Bu, özellikle görme engelli ve yalnızca klavye kullanan kullanıcılarınız için önemlidir. Odak Noktası Gizlenmemiş (Minimum) odak göstergesinin diğer bileşenlerin altında gizlenmediğinden emin olunmasını sağlar.
Tarayıcının varsayılan stili
Günümüzde her modern web tarayıcısının, web sitenizdeki veya uygulamanızdaki odaklanılabilir öğelere uygulanan farklı bir varsayılan görsel stili vardır. Bu stillerden bazıları diğerlerinden daha iyi görünür. Kullanıcı sayfada sekmeyle ilerlerken bu stil, öğe klavye odağı aldığında uygulanır.
Tarayıcının odak stilini işlemesine izin verirseniz temanızın tarayıcının varsayılan stilini geçersiz kılmayacağını onaylamak için kodunuzu incelemeniz önemlidir. Geçersiz kılma işlemi, stil sayfanızda genellikle "outline: 0" veya "outline: none" olarak yazılır. Bu küçük kod parçası, tarayıcının varsayılan odak göstergesi stilini kaldırabilir. Bu durum, kullanıcıların web sitenizde veya uygulamanızda gezinmesini çok zorlaştırır.
Önerilmez: Anahat yok
a:focus { outline: none; /* don't do this! */ }
Önerilen: Şekillendirilmiş ana hat
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
Özel stiller
Elbette varsayılan tarayıcı stilinin ötesine geçebilir ve temanızı tamamlayan özel bir odak göstergesi oluşturabilirsiniz. Özel bir odak göstergesi oluştururken yaratıcılığınızı konuşturabilirsiniz.
Odak göstergesi şekli; ana hat, kenarlık, alt çizgi, kutu, arka plan değişikliği veya klavyenin odağının söz konusu öğede etkin olduğunu belirtmek için yalnızca renge dayanmayan başka bir belirgin stil değişikliği gibi birçok biçimde olabilir.
Odak göstergesi stilini, görülebilmesini sağlayacak şekilde değiştirebilirsiniz. Örneğin, bir sayfanın arka planı beyaz olduğunda düğme odak göstergesini mavi arka plan olarak ayarlayabilirsiniz. Sayfanın arka planı mavi olduğunda aynı düğme odak stilini beyaz arka plan olarak ayarlayabilirsiniz.
Odak öğesi stilini öğe türüne göre değiştirebilirsiniz. Örneğin, gövde bağlantıları için noktalı alt çizgi kullanabilir, ancak düğme öğesi için yuvarlak kenarlık seçebilirsiniz.
Bir sayfada kaç odak göstergesi stili kullanabileceğinize dair bir kural yoktur ancak gereksiz karışıklığı önlemek için makul bir sayıda tuttuğunuzdan emin olun.