'sıralı odak gezinmesi başlangıç noktası' özelliği, odaklanmış alan olmadığında sıralı odak gezinmesi için odaklanılabilir öğeleri nerede aramaya başladığımızı tanımlar ([Sekme] veya [Üst Karakter-Sekme]). Bu, özellikle "bağlantıları atla" gibi erişilebilirlik özellikleri ve dokümandaki odağı yönetmek için yararlıdır.
HTML, klavye etkileşimleri için birçok yerleşik destek sağlıyor. Bu da, ister motor engeli fare kullanmamızı engellesin ister klavyedeki ellerimizi çok verimli bir şekilde kaldırabilmemiz sayesinde, klavyeyle kullanılabilecek sayfaları yazmak oldukça kolay ve çok değerli milisaniyeler harcıyor.
Klavye kullanımı, klavye etkinliklerinin sayfada nereye gideceğini belirleyen odak etrafında yapılır. Şimdiye kadar klavye kullanıcılarının her şeyin düzgün çalışması için ekstra çalışmalar yapmamız gerekti. focus() yöntemi, kullanıcı işlemine yanıt olarak odaklanılacak bir öğeyi seçerek odağı yönetmemizi sağlar. Ancak, bu en iyi uygulamada çok sayıda sorun yaşanıyor ve temel bir deneyim sunmak için bazı aldatıcı JavaScript bilgisayar korsanlığı yöntemleri gerekiyor.
Bu teknik yakında tamamen ortadan kalkmayacak olsa da, Chrome 50'de Sıralı Odak Gezinme Başlangıç Noktası sayesinde daha az durumda gerekli olacaktır. Bu değişiklik sayesinde, iyi yazılmış sayfalar ekstra manuel odak yönetimine gerek kalmadan otomatik olarak daha erişilebilir hale gelecek. Bir örnekle açıklayalım.
Sayfa içinde bağlantı oluşturma
Metin ağırlıklı siteler, kullanıcıların önemli bölümlere hızlı bir şekilde atlamasına yardımcı olmak için genellikle aynı sayfa içinde birbiriyle bağlantı kurar.
<!-- 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 kullanan bir kullanıcı olsaydım (ve Avustralya yemeklerinin lezzetlisi olsaydım) sonraki işlemlerim şöyle olurdu:
- Yemek Tarifleri bağlantısına odaklanmak için
Tabtuşuna iki kez basın - Yemek Tarifleri bölümüne atlamak için
Entertuşuna basın - Devamı bağlantısına odaklanmak için
Tabtuşuna tekrar basın
Chrome 49 ile bunu iş başında görelim.
Neyse, pek planlandığı gibi gitmedi, değil mi?
Devamı bağlantısına odaklanmak yerine, son kez Tab tuşuna basarak odağı içindekiler bölümündeki bir sonraki öğeye taşıdı. Bunun nedeni, geliştiricinin odaklanılabilir hale getirmek için başlıkta tabindex="-1" ayarı yapmamasıdır. Dolayısıyla, #recipes adlı bağlayıcıyı tıklamak odağı taşımadı. Bu küçük bir hatadır ve bir fare kullanıcısıysanız büyük bir sorun değildir. Ancak bir klavye veya geçiş cihazı kullanıcısıysanız bu durum potansiyel olarak çok büyük bir sorundur. Tipik bir Wikipedia sayfasında birbiriyle ne kadar çok bağlantı paylaşıldığını düşünün. Tüm bu bağlantılar arasında sürekli gidip gelmek zorunda kalmak sinir bozucu olurdu.
Şimdi de Chrome 50'de yaşanan aynı deneyime göz atalım.
Vay canına, tam olarak bunu istiyorduk. En iyisi de, kodumuzu değiştirmek zorunda kalmadık. Tarayıcı, dokümanda bulunduğumuz yere göre odağın nereye gitmesi gerektiğini belirledi.
İşleyiş şekli
Odak başlangıç noktasının uygulanmasından önce, odak her zaman önceki odaklanılan öğeden veya sayfanın üst kısmından hareket eder. Yani bir sonraki adımda neyin odaklanacağını seçerken, bir kapsayıcı öğe veya başlık gibi gerçekten odaklanılması gerekmeyen bir şeye odaklanmanız gerekebilir. Bu durum, bir öğeyi boş bir şekilde tıklarsanız odak halkasının gösterilmesi de dahil olmak üzere her türlü duruma neden olur.
Adından da anlaşılacağı gibi odak başlangıç noktası, Tab veya Shift-Tab tuşlarına bastığımızda bir sonraki odaklanılabilir öğeyi aramaya başlayacağımız yeri öneren bir mekanizma sağlar.
Birkaç şekilde ayarlanabilir:
Bir öğeye odaklanılmışsa bu, aynı zamanda daha önce olduğu gibi odakla gezinme başlangıç noktasıdır.
Ayrıca, daha önce olduğu gibi, odakta gezinme başlangıç noktasını başka hiçbir şey ayarlamadıysa geçerli document veya kullanılabiliyorsa ve destekleniyorsa şu anda etkin olan dialog olur.
Yukarıdaki örnekte olduğu gibi bir sayfa parçasına gidersek odak noktası başlangıç noktasını ayarlar.
Ayrıca, odaklanılabilir olup olmadığına bakılmaksızın, sayfadaki herhangi bir öğeyi tıklarsak odağın gezinme başlangıç noktası da 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 odaklanma becerisi yok!
Diğer kullanım alanları
Yukarıdaki örneğin dışında, bu özelliğin kullanışlı olabileceği başka birçok senaryo da vardır.
Öğeler gizleniyor
Kullanıcının, visibility: hidden veya display: none olarak ayarlanması gereken bir öğeye odaklanacağı zamanlar olabilir. Buna bir bant içindeki tıklanabilir öğeler örnek olarak verilebilir. Chrome'un önceki sürümlerinde, o sırada odaklanılan öğeyi bu şekilde gizlemek, odağı tekrar varsayılan başlangıç noktasına sıfırlayarak daha önce bahsedilen bantı motor bozukluğu olan kullanıcılar için tehlikeli bir tuzağa dönüştürür. Sıralı odaklanma başlangıç noktasıyla artık durum böyle değil. Yukarıdaki yöntemlerden biri aracılığıyla bir öğe gizlenirse Tab tuşuna basıldığında bir sonraki odaklanılabilir öğeye gidersiniz.
Atlama bağlantıları
Atlama bağlantıları, yalnızca klavyeden erişilebilen görünmez bağlantılardır. Kullanıcıların doğrudan bir sayfanın içeriğine atlamak için gezinme öğelerini "atlamalarına" olanak tanırlar, klavye ve geçiş cihazı kullanıcıları için son derece faydalı olabilirler. WebAIM sitesinde açıklandığı gibi
Çoğu popüler web sitesi atlama bağlantılarını uygular, ancak bunu daha önce hiç fark etmemiş olabilirsiniz.
Atlama bağlantıları, bağlayıcılar olarak adlandırıldığından, orijinal içindekiler örneğimizle aynı şekilde çalışırlar.
Uyarılar ve destek
Sıralı odaklı 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ış sabit hedeflerinize tabindex="-1" eklemeniz (ve odak dış çizgisini kaldırmanız) gerekir.
Demo
Sıralı odaklı gezinme başlangıç noktası, tarayıcının temel erişilebilirlik öğeleri grubuna mükemmel bir katkı sağlar. Kullanması kolay olup kullanıcılarımızın deneyimini iyileştirirken uygulamamızdan kodu kaldırmamıza olanak tanır. İki kat kazan! Bu özelliği daha ayrıntılı incelemek için demoya göz atın.