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 fare kullanamayan veya klavyeden ellerini kaldırmanın değerli milisaniyeler kaybettirdiğini düşünen kullanıcılar için idealdir.

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 uygulamada birçok sorun yaşanır ve temel bir deneyim sunmak için bazı karmaşık JavaScript işlemleri gerekir.

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 odaklama 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 serisi şö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ğı taşımadı. 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 kodumuzda değişiklik yapmamız gerekmedi. 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ıklarsanız odaklanma halkası göstermek 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ı olan bir öğe, tıpkı önceki gibi odak gezinme başlangıç noktasıdır. Ayrıca, önceki gibi, başka bir şey odak gezinme başlangıç noktasını ayarlamadıysa mevcut document veya mevcut ve desteklenen dialog etkin 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ıklarsak artık o öğe, odak gezinme başlangıç noktasını belirler. 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 ve anahtar 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. 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.