Birçok kişi bir klavye veya bir klavyenin birincil aracı olarak işlev gördüğünde yardımcı olabilir. Bilek burkulması gibi geçici fiziksel sınırlamaları olan kişiler veya karpal tünel gibi ince bedensel engelleri olanların yanı sıra özel durumları nedeniyle bir sayfada gezinmek için klavye kullanmayı tercih edebilir verimlilik veya arızalı donanım gibi faktörlerle ilişkilidir.
Az gören veya görme engelli kullanıcılar gezinme için büyütme veya ekran okuyucu yazılımlarını kullanmaları gerekir. Ancak, farklı türde ekranda gezinmek için görme engelli kullanıcılara göre daha az klavye kısayolu komutlarını kullanabilirsiniz.
Tüm bu engeller ve durumlar için klavye desteği kritik öneme sahip. CEVAP klavye erişilebilirliğinin büyük bir kısmı odakta bulunuyor. Odak, ekrandaki öğeyi ifade eder. şu anda klavyeden giriş alıyor.
Bu modülde, birinci taraf verileriniz için HTML yapısına ve CSS stillerine ve odaklanılabilir öğeler içerir. İlgili içeriği oluşturmak için kullanılan JavaScript modülü, etkileşimli öğeler için odak yönetimi ve tuş vuruşları hakkında bilgiler.
Odak sırası
Klavye kullanıcılarının gidebileceği öğelere odaklanılabilir öğeler. Odaklanma sırası sekme veya gezinme sırası olarak da adlandırılır, öğelerin odaklanacağız. Varsayılan odak sırası mantıksal, sezgisel olmalı ve görselle uyumlu olmalıdır. görünür.
Çoğu dilde, odak sırası sayfanın üst kısmından başlar ve soldan sağa doğru hareket ederek altta sona erer. Bununla birlikte, bazı diller sağdan sola doğru okunur. Bu nedenle, sayfanın birincil dili farklı bir odak sırası gerektirebilir.
Varsayılan olarak odaklanma sırası, ve metin girişlerini de kapsar. Doğal olarak odaklanılabilir HTML öğeleri yerleşik sekme sırası desteği ve temel klavye etkinliği işleme.
Odaklanma sırasını, normalde çalışmayan öğeleri içerecek şekilde güncelleyebilirsiniz etkileşimli olmayan HTML öğeleri, özel bileşenler veya ARIA içeren ve doğal odaklanma anlamları.
Sekme Dizini
Odaklanma sırası, pozitif bir öğe içeren öğelerle başlar tabindex özelliğini (varsa) kullanır ve en küçük pozitif sayıdan en büyük (ör. 1, 2, 3) olmalıdır. Daha sonra, DOM'deki sıralarına göre sıfırlar. Negatif sekme dizini içeren tüm öğeler doğal odaklanma sırasından kaldırılır.
Bir tabindex
normal olarak odaklanılamayan öğelere sıfır (tabindex="0") değeri uygulandığında,
görünme şekline göre sayfanın doğal odak sırasına eklenir
kullanabilirsiniz. Ancak, doğal olarak odaklanılabilen HTML öğelerinin aksine,
ek klavye desteği sağlayın
erişilebilir hale getirebilirsiniz.
Benzer şekilde, normalde odaklanılabilen ancak
etkin değil (ör. giriş alanı doldurulana kadar çalışmayan bir düğme)
içinde bulunduğu gibi, bu öğeye negatif sekme dizini (tabindex="-1") eklemeniz gerekir. Ekleme
negatif sekme dizini, yardımcı teknolojilere ve klavyelere bu sinyalin
düğmesi doğal odaklama sırasından kaldırılmalıdır. Merak etmeyin, dilerseniz
gerektiğinde odağı tekrar öğeye eklemek için JavaScript kullanın.
Bu örnekte, tabindex özelliği,
odaklanılması doğaldır. Öğelerin sırası
Odaklanma düzeninde sahip olabileceği gücü göstermek için tabindex. Bu bir
yapmamanız gerekenlere bir örnek!
Atlama bağlantıları
Günümüzde çoğu web sitesinin, sayfanın ana başlığında uzun bir menü bağlantıları listesi vardır sayfa arasında tutarlılık sağlar. Bu, genel gezinme için çok iyidir, ancak sadece klavye kullananların web sitesinin ana sayfasına kolayca ulaşmasını içerik oluşturun.
Gereksiz veya kullanışlı olmayan bağlantı gruplarını atlamanın bir yolu, atla bağlantısı. Atlama bağlantıları sabit aynı sayfanın farklı bir bölümüne atlayan bağlantılar, o bölümün kimliği (kullanıcıyı web sitesindeki başka bir sayfaya veya harici bir sayfaya göndermek yerine) gösterir. Atlama bağlantıları, genellikle kullanıcının odaklanılabilir ilk öğesi olarak eklenir. karşılaştığımız reklam türüdür. Bu durum görsel olarak gizlenebilir. tasarım ne gerektirdiğine bağlı olarak kullanıcı sekmeye çıkana kadar.
Kullanıcı sekme tuşuna bastığında ve etkin bir atlama bağlantısı varsa, atlama bağlantısına getirin. Kullanıcı, atlama bağlantısını tıklayıp doğrudan ve ana gezinme bölmesinden geçersiniz. Reklam öğesini bağlantıyı atla ve DOM'ye doğru sekmeye devam et, bu öğeler odaklanılabilir öğedir.
Tüm bağlantılarda olduğu gibi, atlama bağlantısının da
amacıyla kullanın. “Ana içeriğe geç” ifadesini ekleyerek kullanıcının
götürdüğü kabul edilir. Birçok kod seçeneğinden birini kullanarak
bağlantılarınıza ek bağlam sağlar, örneğin
aria-labelledby,
aria-label veya ekleme
değeri, örnekte gösterildiği gibi <a> öğesinin metin içeriğine ayarlanır.
Odak göstergesi
Az önce öğrendiğiniz gibi, odaklanma sırası klavyenin önemli bir özelliği erişilebilirlik. Bu odağın nasıl şekillendirileceğine karar vermek de önemlidir. Çünkü Odaklanma sırası mükemmel olsa bile, kullanıcı nerede olduğunu nasıl bilebilir? nasıl değiştiriliyor?
Görünür bir odak göstergesi kullanıcıları web sitesinin neresinde olduklarına dair bilgilendirmede sayfasını ziyaret edin. Bu, özellikle yalnızca klavyeyi gören kullanıcılar için önemlidir.
Tarayıcının varsayılan stili
Günümüzde her modern web tarayıcısının kendi kendine özgü görsel stiline Web sitenizdeki veya uygulamanızdaki odaklanılabilir öğeler için geçerlidir. Bazı öğeler daha kolay görünür daha iyi sonuçlar verir. Sayfa boyunca kullanıcı sekmelerinde bu stil, öğesi, klavye odağını alır.
Tarayıcının odak stilini işlemesine izin verirseniz şunları kontrol etmeniz önemlidir:
kodunuzun, temanızın tarayıcının varsayılan ayarını geçersiz kılmayacağını
görünüm. Geçersiz kılma işlemi genellikle "outline: 0" veya "outline: none" şeklinde yazılır.
dikkat edin. Bu küçük kod parçası, tarayıcının varsayılan odağını kaldırabilir
ve dolayısıyla kullanıcıların sitenizde gezinmesini zorlaştıran gösterge stili
web sitesi veya uygulama.
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
Tabii ki, varsayılan tarayıcı stilinin ötesine geçip özel bir bir odak göstergesidir. Özel odak oluştururken göstergesi. Yaratıcılığınızı konuşturmak için büyük özgürlük var!
Odak gösterge şekli; dış çizgi, kenarlık, arka plan alt çizgi, kutu, arka plan değişikliği veya başka bir bariz stil değişikliği klavyenin odağının etkin olduğunu belirtmek için yalnızca için de geçerli.
Odaklanma göstergesi stilini değiştirerek, arka plan. Örneğin, bir sayfanın arka planı beyaz olduğunda, bu sayfadaki düğme odak göstergesini mavi bir arka plana dönüştürün. Sayfada mavi bir renk 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ı bir alt çizgi kullanabilir, ancak bir düğme bulunur.
Tek bir odak noktasında kaç odak göstergesi stiliniz olduğuna ilişkin bir kural yoktur Ancak, gereksiz kullanımı önlemek için bu sayıyı makul bir sayıda tutun zihin bulanıklığı.
Özet
Bir web sitesinin veya uygulamanın erişilebilir olarak kabul edilmesi için fare ile erişilememesi için klavyeyle de erişilebilir. Bu modül klavye erişilebilirliğinin görsel yönüne, özellikle de odak noktasına sipariş ve odak göstergeleri.
Öğrendiklerinizi sınayın
ARIA ve HTML bilginizi test edin
Beyaz arka planda en erişilebilir :focus CSS stili örneği hangisidir?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;Atlama bağlantısının amacı nedir?