Klavyeye odaklanılabilir kaydırıcılar

Chrome 130'dan itibaren, kaydırma araçları çocuklar için daha iyi kontrol edin.

Arka plan

Kaydırıcılar her yerde. "Hükümler ve Koşullar" bölümünde kutu Burada, Gönder düğmesini tıklamak için sayfayı en aşağı kaydırmanız gerekiyor. Veya siz simgelerle dolu dikey bir menü çubuğuyla karşılaşabilir.

Bu tür durumlarda, birçok web kullanıcısı faresini yukarı aşağı hareket ettirerek veya kaydırmak için dokunmatik alanı kullanın. Ancak bir işaretleme cihazı, dokunmatik yüzey veya dokunmatik ekran, her kullanıcı için bir sayfada gezinmek için en uygun yöntem 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ırıcılarda odaklanmaya ilişkin bu değişiklikten önce

Bu değişiklikten önce, açıkça 0 veya daha yüksek bir değere ayarlandığında yapılır. Örneğin, aşağıdaki CSS ve HTML'yi kullanın. Daha sonra, ilk düğmeden kayan öğeye 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>

Bir tabindex değeri ayarlamazsanız kullanıcının kullanması zor olabilir kaydırma çubuğuna erişmek için sıralı odaklama gezinmesi. 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ş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ıyla Chrome 130'dan

Bu özellik, tabindex değeri ayarlanmamış ve herhangi bir değer ayarlanmamış kaydırıcılara izin verir. çocukların klavyeye odaklanmasını sağlar. Bu sayede, işlemi gerçekleştiremeyen ya da klavyedeki sekme ve ok tuşlarını kullanarak içeriğe odaklanmak için fare kullanmamayı seçin tuşlarını kullanın.

<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ının odaklanılabilir alt öğesi olmadığında gerçekleştiğ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 kaydırma çubuğu içeriğe zaten ok tuşları kullanılarak erişilebilir. emin olabilirsiniz. Bu kural nedeniyle, varsayılan değer her zaman en uygun olanıdır. Kaydırma öğesinin kendisinin klavyeye odaklanılabilmesini sağlamak için bir sekme dizini ayarlamanız önerilir. olması gerekir.

<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.