Klavye odağı

Birçok kullanıcı, birincil gezinme aracı olarak klavye veya klavyenin işlevini taklit eden yazılım ya da donanım (ör. anahtar cihaz) kullanır. Bu durum kişisel tercih, verimlilik veya bozuk donanımdan kaynaklanabilir.

Bilek burkulması gibi geçici fiziksel kısıtlamaları veya karpal tünel gibi ince bedensel engelleri olan kullanıcılar gezinmek için klavye kullanmayı tercih edebilir. Görme bozukluğu veya görme engelli kullanıcılar, yakınlaştırma veya ekran okuyucu yazılımlarıyla birlikte klavye kullanarak gezinebilir. Ancak ekranda gezinmek için görme engeli olmayan bir kullanıcıdan farklı klavye kısayol komutları kullanabilirler.

Engelli olmayan bazı kullanıcılar da klavye kullanarak gezinmeyi tercih edebilir.

Bu engellerin ve koşulların tümünde klavye desteği çok önemlidir. Klavye erişilebilirliğinin büyük bir kısmı odağa odaklanır. Odak, ekrandaki hangi öğenin klavyeden giriş aldığını ifade eder.

Bu modülde, klavye ve odaklanılabilir öğeler için HTML yapısına ve CSS stiline odaklanacağız. 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 adlandırılan odak sırası, öğelerin odaklanacağı sıradır. Varsayılan odak sırası mantıksal, sezgisel olmalı ve sayfanın görsel sıralamasıyla eşleşmelidir.

Çoğu dilde, odak sırası sayfanın üst kısmından başlar ve soldan sağa doğru ilerleyerek alt kısımda sona erer. Ancak bazı diller sağdan sola okunur. Bu nedenle, sayfanın birincil dili farklı bir odaklanma 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 yer alır.

Odak sırasını, normalde odaklanmayan öğeleri (ör. etkileşimli olmayan HTML öğeleri, özel bileşenler veya ARIA içeren öğeler) içerecek şekilde güncelleyebilir ve doğal odak anlamlarını geçersiz kılabilirsiniz.

Sekme Dizini

Odak sırası, pozitif tabindex özelliğine sahip öğelerle (varsa) başlar ve en küçük pozitif sayıdan en büyüğe doğru ilerler (ör. 1, 2, 3). Ardından, DOM'daki sıralarına göre sekme dizini sıfır olan öğelere geçer. Negatif tabindex değerine sahip tüm öğeler doğal odaklanma sırasından kaldırılır.

Normalde odaklanılamayan öğelere sıfır (tabindex="0") değerindeki bir tabindex uygulandığında, öğeler DOM'de göründükleri şekilde sayfanın doğal odak sırasına eklenir. Bununla birlikte, doğal olarak odaklanılabilen HTML öğelerinin aksine, bunların tam olarak erişilebilir olması için ek klavye desteği sağlamanız gerekir.

Benzer şekilde, normalde odaklanılabilir ancak etkin olmayan bir öğeniz varsa (ör. bir giriş alanı doldurulana kadar çalışmayan bir düğme) bu öğeye negatif bir sekme dizini (tabindex="-1") eklemeniz gerekir. Negatif tabindex eklemek, yardımcı teknolojilere ve klavyelere bu düğmenin doğal odaklama sırasından kaldırılması gerektiğini bildirir. Ancak endişelenmeyin. Gerektiğinde JavaScript'i kullanarak odağın tekrar öğeye eklenmesini sağlayabilirsiniz.

Bu örnekte, doğal olarak odaklanmayan öğelere tabindex özelliği eklenmiştir. Odak sırası üzerinde sahip olabileceği gücü göstermek için öğelerin sırası tabindex kullanılarak değiştirildi. Bu, yapılmaması gerekenlere dair bir örnektir.

Atlama bağlantıları

Günümüzde çoğu web sitesinin, sayfanın ana başlığında ve sayfadan sayfaya tutarlı olan uzun bir menü bağlantıları listesi vardır. Bu, genel gezinme için mükemmel olsa da yalnızca klavye kullanan kullanıcıların sekme tuşuna birden fazla kez basmadan web sitesinin ana içeriğine kolayca ulaşmasını zorlaştırabilir.

Gereksiz veya işe yaramayan 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 atlayan bağlayıcı bağlantılardır. Atlama bağlantıları genellikle bir kullanıcının bir web sitesine geldiğinde karşılaşacağı ilk odaklanılabilir öğe olarak eklenir ve tasarıma bağlı olarak kullanıcı sekme tuşuyla bu öğeye gelene kadar görünür veya görsel olarak gizlenebilir.

Kullanıcı Sekme tuşuna bastığında ve etkin bir atlama bağlantısı varsa klavye odağını atlama bağlantısına gönderir. Kullanıcı, atlama bağlantısını tıklayarak başlık bölümünü ve ana gezinme menüsünü atlayabilir. Atlama bağlantısını tıklamamayı seçip DOM'da Sekme tuşuna basmaya devam ederse kullanıcı, odaklanılabilir bir sonraki öğeye yönlendirilir.

Tüm bağlantılarda olduğu gibi, atlama bağlantısının da bağlantının amacıyla ilgili bağlam içermesi önemlidir. "Ana içeriğe atla" ifadesini eklemek, kullanıcının bağlantıyı tıkladığında nereye yönlendirileceğini bilmesini sağlar. Bağlantılarınıza ek bağlam sağlamak için aria-labelledby, aria-label gibi birçok kod seçeneğinden yararlanabilirsiniz veya örneğin gösterildiği gibi <a> öğesinin metin içeriğine ekleyebilirsiniz.

Odak göstergesi

Az önce öğrendiğiniz gibi, odak sırası, klavye erişilebilirliğinin önemli bir yönüdür. Bu odağın nasıl biçimlendirileceğine karar vermek de önemlidir. Çünkü odak sırası mükemmel olsa bile, düzgün bir stil uygulamadan kullanıcı sayfada nerede olduğunu nasıl bilebilir?

Görünür bir odak göstergesi, kullanıcıları sayfanın neresinde oldukları konusunda her zaman bilgilendirmek açısından çok önemlidir. Bu, özellikle görme engelli ve yalnızca klavye kullanan kullanıcılarınız için önemlidir. Odak Açık Değil (Minimum), odak göstergesinin diğer bileşenlerin altında gizlenmemesini 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 stiller, bazı öğelerin diğerlerinden daha iyi görünmesini sağlar. Kullanıcı sekmelerini takip ettiğinde, öğe klavye odağını aldığında bu stil 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 odaklama göstergesi stilini kaldırabilir ve bu da kullanıcıların web sitenizde veya uygulamanızda gezinmesini oldukça zorlaştırabilir.

Önerilmez (ana çizgi yok)

a:focus {
  outline: none; /* don't do this! */
}

Önerilen: stilize dış çizgi

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çerek temanızı tamamlayan özel bir odak göstergesi de oluşturabilirsiniz. Özel bir odak göstergesi oluştururken yaratıcılığınızı konuşturabilirsiniz.

Odak göstergeci şekli, klavyenin o öğede etkin olduğunu belirtmek için yalnızca renge dayanmayan bir dış çizgi, kenar, alt çizgi, kutu, arka plan değişikliği veya başka bir belirgin stil değişikliği gibi birçok biçimde olabilir.

Bunun görünür olmasını sağlamak için odak göstergesi stilini değiştirebilirsiniz. Örneğin, bir sayfanın arka planı beyazsa düğme odak göstergesini mavi arka plana ayarlayabilirsiniz. Sayfanın arka planı mavi olduğunda, aynı düğme odak stilini beyaz arka plana ayarlayabilirsiniz.

Odak öğesi stilini öğe türüne göre değiştirebilirsiniz. Örneğin, gövde bağlantıları için noktalı bir alt çizgi kullanabilir, düğme öğesi için yuvarlak bir kenarlık seçebilirsiniz.

Bir sayfada kaç odak göstergesi stiliniz olacağına dair bir kural yoktur. Ancak gereksiz karışıklıklara yol açmamak için bu stili makul bir sayıda tutun.

Öğrendiklerinizi test etme

ARIA ve HTML hakkındaki bilginizi test edin.