Klavye odağı

Çoğu kişi gezinme için birincil araç olarak klavye veya anahtar cihazı gibi klavye işlevlerini taklit eden başka yazılımlar/donanımlar kullanır. Bilek burkulması veya karpal tünel gibi hassas motor engelleri gibi geçici fiziksel kısıtlamaları olan kullanıcıların yanı sıra engelli olmayan bazı kişiler de kişisel tercihleri, verimliliği veya bozuk donanım nedeniyle bir sayfada gezinmek için klavye kullanmayı tercih edebilir.

Az gören veya görme engelli kullanıcılar, gezinmek için büyütme veya ekran okuyucu yazılımlarıyla birlikte klavye kullanabilirler. Ancak bir ekranda gezinmek için, gören bir kullanıcının kullanacağından farklı klavye kısayol komutları kullanabilirler.

Tüm bu engeller ve koşullar için klavye desteği son derece önemlidir. Klavye erişilebilirliğinin büyük bir bölümü odaklanma çevresinde ortalanı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 yoğunlaşacağız. JavaScript modülü, etkileşimli öğeler için odak yönetimi ve tuş vuruşları hakkında daha fazla bilgi içerir.

Sıraya odaklan

Klavye kullanıcılarının gidebileceği öğelere, odaklanılabilir öğeler denir. Sekme veya gezinme sırası olarak da adlandırılan odak sırası, öğelerin odaklanıldığı sıradır. Varsayılan odak sırası mantıksal ve sezgisel olmalı, sayfanın görsel sıralamasıyla eşleşmelidir.

Çoğu dilde, odak sırası sayfanın üst kısmında başlar ve alt tarafta sona erer, soldan sağa doğru ilerler. Ancak bazı diller sağdan sola doğru okunur, bu nedenle sayfanın birincil dili farklı bir odaklanma sırası gerektirebilir.

Varsayılan olarak odak sırası; bağlantılar, onay kutuları ve metin girişleri gibi doğal bir şekilde odaklanılabilen HTML öğelerini içerir. Doğal olarak odaklanılabilir HTML öğeleri, yerleşik sekme sırası desteği ve temel klavye etkinliği işlemeyi içerir.

Odak sırasını etkileşimli olmayan HTML öğeleri, özel bileşenler veya doğal odak anlamını geçersiz kılan ARIA'lı öğeler gibi normalde odaklanmayan öğeleri içerecek şekilde güncelleyebilirsiniz.

Sekme Dizini

Odak sırası, pozitif bir tabindex özelliğine (varsa) sahip öğelerle başlar ve en küçük pozitif sayıdan en büyük sayıya (1, 2, 3 gibi) doğru ilerler. Daha sonra, DOM'deki sıralarına göre sıfır sekme diziniyle öğeler arasında ilerler. Negatif bir sekme dizinine sahip tüm öğeler doğal odaklanma sırasından kaldırılır.

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

Benzer şekilde, normalde odaklanılabilen ancak etkin olmayan bir öğeniz varsa (ör. bir giriş alanı doldurulana kadar çalışmayan bir düğme) bu öğeye negatif sekme dizini (tabindex="-1") eklemeniz gerekir. Yardımcı teknolojilere ve klavyelere negatif sekme dizini sinyalleri eklemek, bu düğmenin doğal odaklanma sırasından kaldırılması gerekir. Ancak endişelenmeyin. Gerektiğinde odağı öğeye tekrar eklemek için JavaScript kullanabilirsiniz.

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

Atlama bağlantıları

Günümüzde çoğu web sitesinin, sayfanın ana başlığında sayfadan sayfaya tutarlı uzun bir menü bağlantıları listesi bulunmaktadır. Bu, genel gezinme için idealdir, ancak yalnızca klavye kullanan kullanıcıların, birkaç kez sekme yapmak zorunda kalmadan web sitesinin ana içeriğine kolayca ulaşmalarını zorlaştırabilir.

Gereksiz veya kullanışlı olmayan bağlantı gruplarının üzerinden geçmenin bir yolu, bağlantıyı atlama eklemektir. Atlama bağlantıları, kullanıcıyı web sitesindeki başka bir sayfaya veya harici bir kaynağa göndermek yerine ilgili bölümün kimliğini kullanarak aynı sayfanın farklı bir bölümüne atlayan sabit bağlantılardır. Atlama bağlantıları, genellikle bir web sitesine geldiğinde bir kullanıcının karşılaşacağı ilk odaklanılabilir öğe olarak eklenir ve tasarımın ne gerektirdiğine bağlı olarak bir kullanıcı sekmelerine kadar görünür veya görsel olarak gizlenebilir.

Bir kullanıcı sekme tuşuna bastığında ve etkin bir atlama bağlantısı mevcut olduğunda, klavye odağı atlama bağlantısına gönderilir. Kullanıcı, atla bağlantısını tıklayabilir ve başlık bölümüyle ana gezinme bölümünü geçebilir. Atla bağlantısını tıklamamayı ve DOM'da aşağı doğru kaydırmaya devam etmeyi seçerse bir sonraki odaklanılabilir öğeye yönlendirilirler.

Tüm bağlantılar gibi, atla bağlantısının da bağlantının amacıyla ilgili bağlamı içermesi önemlidir. "Ana içeriğe geç" ifadesini eklemek, kullanıcının bağlantının nereye gittiğini bilmesini sağlar. Bağlantılarınıza ek bağlam sağlarken, örnekte gösterildiği gibi aria-labelledby, aria-label veya etiketi <a> öğesinin metin içeriğine ekleme gibi birçok kod seçeneği arasından seçim yapabilirsiniz.

Odak göstergesi

Az önce öğrendiğiniz gibi odak sırası, klavye erişilebilirliğinin önemli bir yönüdür. Bu odağın stilinin nasıl belirleneceğine karar vermek de önemlidir. Çünkü odak sıralaması mükemmel olsa bile, uygun bir stil olmadan kullanıcı sayfanın neresinde olduğunu nasıl bilebilir?

Görünür odak göstergesi, kullanıcıları daima sayfanın neresinde oldukları konusunda bilgilendirmede önemli bir araçtır. Bu, özellikle yalnızca klavyeyi gören kullanıcılar için önemlidir.

Tarayıcı varsayılan stili

Günümüzde her modern web tarayıcısının, web sitenizdeki veya uygulamanızdaki odaklanılabilir öğeler için geçerli olan ve bazıları diğerlerinden daha kolay görünen farklı bir varsayılan görsel stili vardır. Sayfadaki bir kullanıcı sekmeleriyle, öğe klavye odağını alırken 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ı doğrulamak için kodunuzu gözden geçirmeniz önemlidir. Geçersiz kılma işlemi, stil sayfanıza 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 ve bu da kullanıcıların web sitenizde veya uygulamanızda gezinmesini çok zorlaştırır.

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

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 bir özel odak göstergesi oluşturabilirsiniz. Özel bir odak göstergesi oluştururken yaratıcı olma konusunda son derece özgür olursunuz.

Odak göstergesi şekli dış çizgi, kenarlık, alt çizgi, kutu, arka plan değişikliği veya klavyenin odağının o öğede etkin olduğunu belirtmek için tek başına renge dayalı olmayan başka bir belirgin stil değişikliği gibi pek çok biçimde olabilir.

Bir odak göstergesi stilinin arka planda kaybolmamasını sağlamak için değiştirebilirsiniz. Örneğin, bir sayfanın arka planı beyazsa düğme odak göstergesini mavi bir arka plana ayarlayabilirsiniz. Sayfanın arka planı mavi olduğunda aynı düğme odak stilini beyaz bir 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ı alt çizgi kullanabilir, ancak bir düğme öğesi için yuvarlak bir kenarlık seçebilirsiniz.

Bir sayfada kaç odak göstergesi stilinin olacağına dair bir kural yoktur, ancak gereksiz karmaşadan kaçınmak için bunu makul bir sayıda tuttuğunuzdan emin olun.

Özet

Bir web sitesinin veya uygulamanın erişilebilir olarak kabul edilmesi için fareyle erişilebilecek her şeye klavyeyle de erişilebilmesi gerekir. Bu modülde, klavye erişilebilirliğinin görsel yönü, özellikle de odak sırası ve odak göstergeleri üzerinde durulmuştur.

Öğrendiklerinizi sınayın

ARIA ve HTML bilginizi test edin