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.
Bileği burkulma veya karpal tünel gibi ince motor becerileriyle ilgili engeller gibi geçici fiziksel sınırlamalara sahip 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, ekranda o anda klavyeden giriş alan öğeyi ifade eder.
Bu modülde, klavye ve odaklanılabilir öğeler için HTML yapısına ve CSS stillerine 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 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ı etkileşimsiz HTML öğeleri, özel bileşenler veya ARIA içeren öğeler gibi normalde odağı almayan öğeleri içerecek şekilde güncelleyebilir ve doğal odaklama anlamı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. 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 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. Yardımcı teknolojilere ve klavyelere negatif bir sekme dizini eklemek, bu düğmenin doğal odak sırasından kaldırılması gerektiğini gösterir. Ancak endişelenmeyin. Gerektiğinde JavaScript'i kullanarak odağın tekrar öğeye eklenmesini sağlayabilirsiniz.
Bu örnekte, doğal olarak odaklanılmayan öğelere bir 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
bir örnektir!
Atlama bağlantıları
Günümüzde çoğu web sitesi, sayfanın ana başlığında sayfadan sayfaya tutarlı olan uzun bir menü bağlantısı listesine sahiptir. 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 kullanışlı olmayan bağlantı gruplarını atlamanın bir yolu da 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, ilgili bölümün kimliğini kullanarak aynı sayfanın farklı bir bölümüne atlayan ana 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ıklayıp DOM'ye doğru ilerlemeye devam ederlerse bir sonraki odaklanılabilir öğeye gönderilirler.
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 şekillendirileceğine karar vermek de önemlidir. Çünkü odaklanma sırası mükemmel olsa bile kullanıcı, uygun stil olmadan sayfanın neresinde 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ı 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ı sayfayı sekme tuşuyla gezerken, öğe klavye odağına alındığı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 odak göstergesi stilini kaldırabilir. Bu da 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: 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.
Odak göstergesinin görülebilmesi için stilini 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 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 düğme öğesi için yuvarlak kenarlıklı bir stil 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.
Beyaz arka planda en erişilebilir :focus
CSS stili örneği hangisidir?
text-decoration: dotted underline 2px blue;
outline: 0.5rem solid yellow;
outline: none; text-decoration:none; background:none;
background-color:black;
Atlama bağlantısının amacı nedir?