Chrome 130'dan itibaren, klavyeyle odaklanılabilir alt öğeleri olmayan kaydırıcılar varsayılan olarak klavyeyle odaklanılabilir olur.
Arka plan
Kaydırma çubukları her yerde. "Hükümler ve Koşullar" kutusunda bulabilirsiniz. Gönder düğmesini tıklamak için sayfayı en alta kaydırmanız gerekir. Veya siz simgelerle dolu dikey bir menü çubuğuyla karşılaşabilir.
Bu gibi durumlarda, birçok web kullanıcısı öğe üzerinde kaydırabilmek için fare veya dokunmatik yüzeylerindeki yukarı ve aşağı hareketleri kullanır. Ancak işaretleme cihazı, dokunmatik yüzey veya dokunmatik ekran, her kullanıcının bir sayfada gezinmek için en uygun yöntemi değildir. Bazı kişiler bir HTML sayfasında gezinmeyi ve odaklanılabilir her öğeye erişimi tercih etmeyi klavyeyi kullanabilirsiniz. Bunun çeşitli nedenleri olabilir. Daha önce fareyi çalıştırmayı zorlaştıran titremeler veya diğer sorunlar, görsel olarak bulmakta güçlük çeken kişilerin ve tek bir fare imlecini kullanan diğer kişilerin anahtar veya sesli kontrol.
Erişilebilirlikle ilgili en iyi uygulamalar, tüm özelliklerin kullanabilirsiniz. Bu şekilde, herkes web'i en iyi şekilde kullanabilir optimize edebilirsiniz.
2.1.1 Klavye: Tümü işlevsellik içeriğin bir veya daha fazla klavye arayüzü tuş vuruşları için belirli zamanlamalar gerektirmeden temel işlev, kullanıcının hareket ettiğine dikkat edin. (A Seviyesi)
Kaydırma çubuklarında odak değişikliğinden önce
Bu değişiklikten önce, bir kaydırılabilir alan öğesi yalnızca tabindex açıkça 0 veya daha yüksek bir değere ayarlandığında sekmeyle odaklanabiliyordu. Örneğin, aşağıdaki CSS ve HTML'yi kullanın. Ardından, Sekme tuşuyla ilk düğmeden kaydırma öğesine geçmeyi deneyin.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Aşağıdaki HTML'de olduğu gibi bir negatif sekme dizini kullandığınızda kaydırma çubuğu atlandı.
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
tabindex değeri ayarlamazsanız kullanıcının kaydırma çubuğuna erişmek için sıralı odak gezinmeyi kullanması zor olabilir. Bu durum can sıkıcı olabilir. erişimi olmayan kullanıcılar içindir.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Aşağıdaki HTML'de olduğu gibi odaklanılabilir alt öğeler içeren bir kaydırıcının hâlihazırda erişilebilir olduğundan ok tuşları odaklanmasını sağlarsınız. Bu durumda herhangi bir davranış değişikliği yapılmaz.
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Odaklanabilir kaydırma çubuklarıyla Chrome 130'dan
Bu özellik, tabindex değeri ayarlanmamış ve odaklanılabilir alt öğeleri olmayan kaydırıcıların klavyeyle odaklanılabilir olmasına olanak tanır. Bu sayede, fare kullanamayan veya kullanmak istemeyen kullanıcılar, klavyedeki sekme ve ok tuşlarını kullanarak içeriklere odaklanabilir.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
Bu davranışın yalnızca kaydırma çubuğunun odaklanılabilir alt öğesi olmadığında gerçekleşeceğini unutmayın. Örneğin, kaydırma çubuğu zaten bir düğme içeriyorsa sekme odağı kaydırma çubuğunu atlayıp doğrudan düğmeye odaklanın. Bu durumda, düğmeye odaklanıldığında ok tuşları kullanılarak kaydırma çubuğu içeriğine zaten erişilebilir. Bu kural nedeniyle, varsayılan değer her zaman en uygun olanıdır. Bu durumda kaydırılabilir alan öğesinin kendisinin klavyeyle odaklanılabilir olmasını istiyorsanız 0 veya daha yüksek bir tabindex değeri ayarlamanızı öneririz.
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Bu özellik, kaydırıcıların her durumda varsayılan olarak klavyeden erişilebilir olmasını sağlar. Böylece web kullanıcıları sekmede gezinirken daha sorunsuz bir deneyim yaşarlar. bir sayfadır.