Odak yönetimindeki zorlukları ortadan kaldırın

Rob Dodson

"Sıralı odak gezinme başlangıç noktası" özelliği, odaklanmış bir alan olmadığında sıralı odak gezinme ([Sekme] veya [Üst Karakter-Sekme]) için odaklanılabilir öğeleri aramaya nereden başlayacağımızı tanımlar. Bu özellikle "bağlantıları atlama" ve belgedeki odak noktasını yönetme gibi erişilebilirlik özellikleri için faydalıdır.

HTML, klavye etkileşimleriyle ilgili birçok yerleşik destek sunar. Bu sayede, klavyeyle kullanılabilen sayfalar yazmak oldukça kolaydır. Bu sayfalar, motor becerilerindeki bir eksiklik nedeniyle fareyi kullanamadığımız veya ellerimizi klavyeden kaldırmanın değerli milisaniyeler kaybettirdiği durumlarda kullanışlıdır.

Klavye işlemleri, klavye etkinliklerinin sayfada nereye gideceğini belirleyen odak noktası etrafında döner. Klavye kullanıcıları için her şeyin sorunsuz çalışmasını sağlamak amacıyla bugüne kadar bazı durumlarda ek çalışmalar yapmamız gerekti. focus() yöntemi, kullanıcı işlemine yanıt olarak odaklanılacak bir öğeyi seçerek odağı yönetmemize olanak tanır. Ancak bu en iyi uygulama, birçok soruna yol açar ve temel bir deneyim sunmak için bazı karmaşık JavaScript işlemleri gerektirir.

Bu teknik yakın zamanda tamamen kaldırılmayacak olsa da Chrome 50'de Sıralı Odak Gezinme Başlangıç Noktası sayesinde daha az durumda gerekli olacaktır. Bu değişiklikle birlikte, iyi yazılmış sayfalar, ek manuel odaklanma yönetimi gerekmeden otomatik olarak daha erişilebilir hale gelecek. Bir örnekle açıklayalım.

Sayfa içi bağlantı

Metin ağırlıklı siteler, kullanıcıların önemli bölümlere hızlıca atlamasına yardımcı olmak için genellikle aynı sayfa içinde bağlantılar oluşturur.

<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>

<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
    Vegemite cheesecake is delicious. We promise.
    <a href="cheesecake.html">Read More</a>
</p>

Klavye kullanıcısı olsaydım (ve Avustralya yemeklerine düşkün olsaydım) sonraki işlemler dizisim şöyle olurdu:

  • Tarifler bağlantısına odaklanmak için Tab tuşuna iki kez basın
  • Tarifler bölümüne gitmek için Enter tuşuna basın
  • Daha fazla oku bağlantısına odaklanmak için tekrar Tab tuşuna basın.

Bunu Chrome 49'u kullanarak uygulamalı olarak görelim.

Oh. Bu planlandığı gibi gitmedi, değil mi?

Tab düğmesine son kez basıldığında, odağı Daha Fazla Oku bağlantısına değil, içindekiler bölümündeki bir sonraki öğeye taşıdı. Bunun nedeni, geliştiricinin başlığı odaklanılabilir hale getirmek için tabindex="-1" ayarını yapmamasıdır. Bu nedenle, #recipes adlı ankrajı tıklamak odağı hareket ettirmedi. Bu, fare kullanıcısıysanız önemsiz bir hatadır. Ancak klavye veya anahtar cihaz kullanıcısıysanız bu durum büyük olasılıkla çok önemli bir konudur. Tipik bir Vikipedi sayfasında bulunan iç bağlantıların miktarını düşünün. Tüm bu sabit noktaları sürekli olarak sekme tuşuyla ileri geri kaydırmak can sıkıcı olur.

Şimdi de Chrome 50'i kullanarak aynı deneyime bakalım.

Tam olarak istediğimiz şey bu. En iyisi de kodumuzu değiştirmek zorunda kalmamamız. Tarayıcı, dokümanda bulunduğumuz yere göre odağın nereye gitmesi gerektiğini belirledi.

İşleyiş şekli

Odak başlangıç noktası uygulanmadan önce, odak her zaman önceki odaklanan öğeden veya sayfanın üst kısmından hareket ederdi. Bu, sonraki odak noktasını seçerken odağın aslında odaklanılabilir olmaması gereken bir öğeye (ör. kapsayıcı öğe veya başlık) taşınması anlamına gelebilir. Bu durum, böyle bir öğeyi tesadüfen tıkladığınızda bir odak halkası gösterilmesi de dahil olmak üzere her türlü tuhaflığa neden olur.

Odak başlangıç noktası, adından da anlaşılacağı gibi, Tab veya Shift-Tab tuşuna bastığımızda odaklanılacak bir sonraki öğeyi nerede aramaya başlayacağımızı önermek için bir mekanizma sağlar.

Bu, çeşitli şekillerde ayarlanabilir: Odak noktası bir öğeye aitse bu öğe, önceki gibi odak gezinme başlangıç noktası olur. Ayrıca, önceki gibi, başka bir şey odak gezinme başlangıç noktasını ayarlamadıysa mevcut document veya mevcut ve destekleniyorsa etkin dialog olur. Yukarıdaki örnekte olduğu gibi bir sayfa parçasına gidersek bu, odak başlangıç noktasını belirler. Ayrıca, odaklanılabilir olup olmadığına bakılmaksızın sayfadaki herhangi bir öğeyi tıkladığımızda artık odak gezinme başlangıç noktası ayarlanır. Son olarak, odak başlangıç noktası olan öğe DOM'dan kaldırılırsa üst öğesi odak başlangıç noktası olur. Artık fare yakalama oyunu oynamanıza gerek yok.

Diğer kullanım alanları

Yukarıdaki örnekten başka, bu özelliğin yararlı olabileceği birçok senaryo vardır.

Öğeleri gizleme

Kullanıcının visibility: hidden veya display: none olarak ayarlanması gereken bir öğeye odaklandığı durumlar olabilir. Buna örnek olarak bir banttaki tıklanabilir öğeler verilebilir. Chrome'un önceki sürümlerinde, o anda odaklanmış öğe bu şekilde gizlendiğinde odak varsayılan başlangıç noktasına sıfırlanır ve yukarıda bahsedilen bant, motor becerilerinde engelli kullanıcılar için can sıkıcı bir tuzağa dönüşür. Sıralı odak başlangıç noktasıyla artık bu durum söz konusu değil. Bir öğe yukarıdaki yöntemlerden biriyle gizlenmişse Tab tuşuna basıldığında odak bir sonraki odaklanılabilir öğeye taşınır.

Atlama bağlantıları, yalnızca klavye üzerinden erişilebilen görünmez ankrajlardır. Kullanıcıların doğrudan bir sayfanın içeriğine atlamak için gezinme öğelerini "atlamasına" olanak tanır ve klavye ile geçiş cihazı kullanıcıları için son derece yararlı olabilir. WebAIM sitesinde açıklandığı gibi

Birçok popüler web sitesi atlama bağlantıları uygular ancak bunları hiç fark etmeyebilirsiniz.

GitHub.com&#39;da bir atlama bağlantısı

Atlama bağlantıları adlandırılmış sabit noktalar olduğundan orijinal içindekiler listesi örneğimizle aynı şekilde çalışır.

Uyarılar ve destek

Sıralı odak gezinme başlangıç noktası şu anda yalnızca Chrome 50, Firefox ve Opera'da desteklenmektedir. Bu özellik tüm tarayıcılarda desteklenene kadar adlandırılmış ana hedeflerinizin başına tabindex="-1" eklemeniz (ve odak dış çizgisini kaldırmanız) gerekir.

Demo

Sıralı odak gezinme başlangıç noktası, tarayıcının erişilebilirlik temel öğelerine mükemmel bir katkıdır. Anlaması kolaydır ve kullanıcılarımızın deneyimini iyileştirirken uygulamamızdan kod kaldırmamıza olanak tanır. Çifte kazanç Bu özelliği daha ayrıntılı şekilde incelemek için demoya göz atın.