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 bir tane bulabilirsiniz. Burada, Gönder düğmesini tıklamak için en fazla aşağı kaydırmanız gerekir. Alternatif olarak, aralarından seçim yapabileceğiniz simgelerle dolu dikey bir menü çubuğuyla da karşılaşabilirsiniz.
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ı kullanıcılar, HTML sayfasında yalnızca klavyelerini kullanarak odaklanılabilir her öğeye erişmeyi tercih eder. Bunun çeşitli nedenleri olabilir. Titreme veya fareyi kullanmayı zorlaştıran başka sorunları olan, fare imlecini görsel olarak bulma konusunda zorluk yaşayan ve tek anahtar veya sesli kontrol kullanan kişiler.
Erişilebilirlikle ilgili en iyi uygulamalar, tüm özelliklerin klavye kullanılarak erişilebilir olması gerektiğini önerir. Bu sayede herkes web'i kendisi için en uygun şekilde kullanabilir.
2.1.1 Klavye: İçeriğin tüm işlevleri, temel işlevin yalnızca uç noktalara değil, kullanıcının hareketinin yoluna bağlı giriş gerektirdiği durumlar hariç olmak üzere, tek tek tuş vuruşları için belirli zamanlamalar gerektirmeden klavye arayüzü aracılığıyla kullanılabilir. (A Seviyesi)
Kaydırma çubuklarında odak değişikliğinden önce
Bu değişiklikten önce, tabindex açıkça 0 veya daha yüksek bir değere ayarlanmışsa bir kaydırıcı öğesine yalnızca sekme odaklanılabilir. Ö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 negatif bir sekme dizini 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>
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, fareye erişimi olmayan kullanıcılar için çok 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, odaklanılabilir alt öğeler odaklandığında ok tuşlarının kaydırmaya izin vereceğinden zaten erişilebilir olduğunu unutmayın. 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>
Odaklanabilir kaydırma çubukları ile 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ırılabilir alanda zaten bir düğme varsa sekme tuşu odağı, kaydırılabilir alanı atlar ve doğrudan düğmeye odaklanır. 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, bu tür alt öğeler varsa varsayılan her zaman en uygun şekilde davranmayabilir. 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ı bir sayfada sekmede gezinirken daha sorunsuz bir deneyim yaşarlar.