Chrome 124 sürümünden itibaren, klavyeye odaklanabilen alt öğeleri olmayan kaydırma çubuklarına varsayılan olarak odaklanabilirler.
Arka plan
Kaydırmacılar her yerde. "Şartlar ve Koşullar" kutusunda böyle bir belge bulabilirsiniz. Buradan, gönder düğmesini tıklamak için sayfanın en altına gitmeniz gerekir. Ya da aralarından seçim yapabileceğiniz simgelerle dolu dikey bir menü çubuğuyla da karşılaşabilirsiniz.
Böyle durumlarda birçok web kullanıcısı, öğe üzerinde kaydırma yapmak için fare veya dokunmatik alan üzerinden yukarı aşağı hareket edebilir. Ancak bir işaretleme cihazı, dokunmatik yüzey veya dokunmatik ekran her kullanıcı için bir sayfada gezinmek için en uygun yol değildir. Bazı kullanıcılar odaklanılabilir her öğeye yalnızca klavyelerini kullanarak erişen bir HTML sayfasında gezinmeyi tercih eder. Bunun çeşitli nedenleri olabilir. Fare kullanımını zorlaştıran titremeler veya başka sorunlar yaşayan kişiler, fare imlecinin yerini görsel olarak bulmakta zorlanan kişiler ve tek bir anahtar ya da sesli kontrol kullanan kişiler.
Erişilebilirlikle ilgili en iyi uygulamalar, tüm özelliklerin klavye ile kullanılabilir olması gerektiğini belirtir. Bu şekilde, herkes web'i kendilerine en uygun şekilde kullanabilir.
2.1.1 Klavye: İçeriğin tüm işlevsellikleri, tek tek tuş vuruşları için belirli zamanlamalar gerektirmeden bir klavye arayüzü üzerinden çalıştırılabilir. Bu işlev için temel işlev yalnızca uç noktalara değil, kullanıcının hareketinin yoluna bağlı olarak giriş gerektirir. (A Seviyesi)
Kaydırma çubuklarında odaklanmak için bu değişiklikten önce
Bu değişiklikten önce, bir kayan öğeye yalnızca sekme dizini açıkça 0 veya daha yüksek bir değere ayarlanmışsa sekmeye odaklanılabilir. Örneğin, aşağıdaki CSS ve HTML'yi kullanın. Ardından, ilk düğmeden kaydırıcı öğeye geçiş yapmayı 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 tabindex kullanıldığında kaydırma çubuğu atlanır.
<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>
Bir tabindex değeri ayarlamazsanız kullanıcının kaydırma çubuğuna erişmek için sıralı odak gezinmesini kullanması zor olabilir. Bu durum, fareye erişimi olmayan kullanıcılar için son derece can sıkıcı olabilir.
<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ırma çubuğunun zaten erişilebilir olduğunu unutmayın. Çünkü ok tuşları, odaklanılabilir alt öğeler odaklanıldığında kaydırmaya olanak tanır. Bu durumda herhangi bir davranış değiştirilmez.
<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>
Chrome 124'ten itibaren odaklanılabilir kaydırma çubuklarıyla
Bu özellik, sekme dizini değeri ayarlanmamış ve odaklanılabilir alt öğeler olmayan kaydırma öğelerinin klavyeye odaklanabilmesine olanak tanır. Bu, klavyenin sekmesini ve ok tuşlarını kullanarak içeriğe odaklanmak için fare kullanamayan veya kullanmamayı seçen kullanıcılara izin verir.
<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ırıcıda odaklanılabilir alt öğeler olmadığında meydana geldiğini unutmayın. Örneğin, kaydırma çubuğunda zaten bir düğme varsa sekme odağı, kaydırma çubuğunu atlar ve doğrudan düğmeye odaklanır. Bu durumda, düğme odaklandıktan sonra kaydırma çubuğu içeriğine ok tuşları kullanılarak halihazırda erişilebilir. Bu kural nedeniyle, böyle alt öğeler varsa varsayılan ayar her zaman en uygun şekilde davranmayabilir. Bu durumda kaydırma öğesinin klavyeye odaklanabilmesini istiyorsanız sekme dizini değerini 0 veya daha yüksek bir değere ayarlamanız önerilir.
<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 klavyeye erişebilmelerini sağlar. Bu da web kullanıcılarının, bir sayfada sekme ile gezinirken daha sorunsuz bir deneyim yaşamalarına yardımcı olur.