Form kontrolleri, bağlantılar ve düğmeler dahil olmak üzere etkileşimli öğeler, varsayılan olarak odaklanabilir ve sekme tuşuyla kullanılabilir. Sekme tuşuyla gezinilebilen öğeler, dokümanın sıralı odak gezinme sırasının bir parçasıdır. Diğer öğeler durağandır, yani etkileşimli değildir. HTML özellikleriyle, etkileşimli öğeleri durağan hale getirmek ve durağan öğeleri etkileşimli yapmak mümkündür.
Gezinme odağı sırası, varsayılan olarak kaynak kodu sırası olan görsel sıra ile aynıdır. Bu sırayı değiştirebilen HTML özellikleri ve içeriğin görsel sırasını değiştirebilen CSS özellikleri vardır. Sekme sırasının HTML ile veya CSS ile görsel oluşturma sırasının değiştirilmesi kullanıcı deneyimine zarar verebilir.
CSS ve HTML ile algılanan ve gerçek sekme sırasını değiştirmeyin. Aşağıdaki iki örnekte gösterildiği gibi, görsel olarak beklenen sıradan farklı olan sekme sıraları kullanıcılar için kafa karıştırıcıdır ve kullanıcı deneyimi açısından kötüdür.
Bu örnekte, tabindex özelliğinin değeri sekme sırasını karışık hale getirmiştir:
Bu örnekte CSS, sekme sıralaması ile içeriğin görsel sırası arasında bir fark oluşturmuştur:
flex-flow: row-reverse; bildirimi görsel sırayı tersine çevirdi.
Buna ek olarak, CSS order özelliği, bir kelimeyi görsel olarak taşıyan altıncı kelime olan "This"e uygulandı. Sekme sıralama sırası, kodun sırasıdır. Bu sıra artık görsel sırayla eşleşmez ve bu da klavye kullanıcıları için bağlantı kesmesine yol açar.
Durağan öğeleri etkileşimli hale getirme
Global özellikler olan contenteditable ve tabindex özellikleri, herhangi bir öğeye eklenebilir ve bu sayede süreçte odaklanabilirler. Odaklanabilir öğeler, autofocus özelliği ayarlanarak veya komut dosyasıyla (ör. element.focus()) fareyle veya işaretçiyle de odaklanabilir.
tabindex özelliği
Özelliklerde tanıtılan global tabindex özelliği, normalde Sekme tuşuyla yani adla odaklanmak için odağı alamayacak öğelerin kullanılmasını sağlar.
tabindex özelliği, değeri olarak bir tam sayı alır. Negatif değer, bir öğeyi odaklanılabilir hale getirir ancak sekme tuşuyla ayarlanamaz. tabindex değeri 0, öğeye odaklanılabilir ve sekme yapılabilir hale gelir. Böylece, uygulandığı öğe, kaynak kodu sırasında sıralı odak gezinme sırasına eklenir. 1 veya daha büyük bir değer, öğeyi odaklanılabilir ve sekme tuşuyla yapılabilir hale getirir ancak öğeyi öncelikli bir sekme oluşturma sırasına ekler ve yukarıda gördüğümüz gibi bundan kaçınılmalıdır.
Bu sayfadaki paylaş düğmesi <share-action>, bir özel öğedir. tabindex="0", normalde odaklanılamayan bu öğeyi klavyenin varsayılan sekme oluşturma sırasına ekler:
<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
Bu sayfada başka bir özel öğe daha var: yerel gezinme, negatif tabindex değerine sahip bir özel öğe içerir:
<web-navigation-drawer type="standard" tabindex="-1">
Negatif değere sahip tabindex özelliği, öğeyi odaklanılabilir ancak sekme tuşuyla kapatılamaz hale getirir. Öğe, HTMLElement.focus() aracılığıyla olduğu gibi odak alma yeteneğine sahiptir ancak sıralı odakla gezinme sırasının bir parçası değildir. Sekme tuşuyla seçilemeyen, odaklanılabilir öğeler için kural tabindex="-1" kullanmaktır. Etkileşimli bir öğeye tabindex="-1" eklerseniz bu öğe artık sekmeye dönüştürülebilir olmaz.
Odağı, odaklanılabilir öğelere ayarlamak için element.focus() yöntemi kullanılabilir. Tarayıcıların odaklanmış öğeleri görünüme kaydırdığını unutmayın. Bu nedenle, görünür olmayan bir öğeye odaklanmak kötü bir kullanıcı deneyimine neden olacağından element.focus({preventScroll:true}) kullanmaktan kaçının.
Şu anda hangi öğeye odaklanıldığını öğrenmek için dokümanı sorgulamak istiyorsanız salt okunur Document.activeElement özelliğini kullanın.
tabindex değeri 1 veya daha yüksek olan öğeler ayrı bir sekme sırasına dahil edilir. Codepen'de göreceğiniz gibi sekme işlemleri, kaynak sırasına göre normal dizideki (tabindex ayarlanmamış veya tabindex="0") geçmeden önce, en düşük değerden en yüksek değere doğru ayrı bir sırada başlar:
Pozitif değere sahip tabindex, öğeyi öncelikli bir odak dizisine yerleştirir ve bu durum, odak sırası kaosuna yol açabilir.
DOM sırasını tabindex ile değiştirmekten kaçının. Sekme tuşlarının değiştirilmesi yalnızca kötü kullanıcı deneyimlerine yol açmakla kalmaz, geliştiricilerin bunları yönetmesi ve sürdürmesi de zordur.
contenteditable özelliği
contenteditable özelliği, daha önce tartışılmıştı. contenteditable="true" herhangi bir öğeye ayarlandığında düzenlenebilir, odaklanılabilir ve sekme sırasının bir parçası haline gelir. Odaklanma davranışı tabindex="0" ayarına benzer ancak aynı değildir. İç içe yerleştirilmiş contenteditable öğelerine odaklanabilir ancak sekme tuşuyla eklenemez. İç içe yerleştirilmiş contenteditable öğesini sekmelanabilir hale getirmek için tabindex="0" ekleyin. Bu işlem, öğeyi sıralı odak gezinme sırasına ekler.
Etkileşimli öğelere odaklanarak
autofocus özelliği
autofocus boole değeri, herhangi bir öğe üzerinde ayarlanabilen global bir özellik olsa da durağan öğeyi etkileşimli hale getirmez. Sayfa yüklendiğinde, autofocus özelliği ayarlanmış ilk odaklanılabilir öğeye, bu öğe bir <dialog> içine yerleştirilmediği sürece odaklanılır.
İçeriğe otomatik olarak odaklanılması kafa karıştırıcı olabilir. Bir form kontrolünde autofocus değeri ayarlamak, form denetiminin sayfa yüklendiğinde görünümün içine kaydırılacağı anlamına gelir. Ekran okuyucu kullanıcıları ve küçük görüntü alanlarına sahip kullanıcılar da dahil olmak üzere tüm kullanıcılarınız, forma ilişkin talimatları "göremeyebilir", hatta form kontrolünün normalde görünür olan etiketini geçmek bile mümkündür. autofocus özelliği, dokümanın sıralı odak gezinme sırasını değiştirmez. Dizide otomatik odaklı öğeden önce gelen öğeler ise atlanır. Bu nedenlerden dolayı autofocus özelliğinin eklenmesi önerilmez.
"autofocus kullanmayın" önerisiyle ilgili istisna, <dialog> öğelerine autofocus özelliğinin eklenmesiyle ilgilidir.
Bir iletişim kutusu açıldığında, tarayıcı otomatik olarak <dialog> içindeki ilk odaklanılabilir etkileşimli öğeye odaklanır. Diğer bir deyişle, bir öğeye autofocus eklenmesi gerekmez. İletişim kutusu açıldığında, iletişim kutusundaki belirli bir etkileşimli öğenin odak aldığından emin olmak istiyorsanız bu öğeye autofocus özelliğini ekleyin.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Kapanışta ayarlanan autofocus özelliği <button>, iletişim kutusu açıldığında odağın almasını sağlar. İletişim kutusundaki ilk öğe olan bu öğeye her durumda odaklanılacaktı. Varsayılan olarak, bir iletişim kutusu açıldığında, iletişim kutusundaki farklı bir öğe autofocus özelliği ayarlanmamışsa iletişim kutusu içindeki ilk odaklanılabilir öğeye odaklanılır.
Etkileşimli öğeleri hareketsiz hale getirme
Ayrıca, etkileşimli öğeleri sekme oluşturma sırasından kaldırabilen HTML özellikleri vardır. Odaklanabilir öğelere negatif tabindex ekleme, destekleyici form kontrollerine disabled özelliği ekleme ve bir kapsayıcıya genel inert özelliği eklemenin tümü öğeleri sekme için uygun hale getirmez. Bu üç özellik birbirinin yerine kullanılamaz.
Negatif tabindex değeri
Yukarıda öğrendiğimiz gibi, negatif değere sahip bir tabindex özelliği, bir öğeyi odaklanabilir ancak sekmeye ayırmaz hale getirir. Bağlantılar, düğmeler, form kontrolleri ve contenteditable olan öğeler dahil olmak üzere varsayılan olarak odaklanılabilir bir öğeye tabindex="0" eklemek gerekli değildir. Negatif değere sahip tabindex eklemek ise normalde sekmeyle kaydırılabilen öğeleri sıralı odaklanma gezinme sırasından kaldırır.
Negatif tabindex değeri, klavye kullanıcılarının etkileşimli öğelere odaklanmasını engeller ancak öğeyi devre dışı bırakmaz. İşaretçi kullanıcıları öğeye odaklanmaya devam edebilir. Bir öğeyi devre dışı bırakmak için disabled özelliğini kullanın.
Devre dışı
Boole disabled özelliği, hangi formda uygulanacağını ve varsa bunların alt öğelerini odaklanamaz hale getirir. Devre dışı bırakılan form kontrollerine odaklanılamaz, tıklama etkinliklerini alamaz ve form gönderildiğinde bu kontroller gönderilmez. disabled değerinin genel bir özellik olmadığını unutmayın. <button>, <input>,
<optgroup>, <option>, <select>, <textarea>, formla ilişkilendirilmiş özel öğeler ve <fieldset> için geçerlidir.
<optgroup> veya <fieldset> üzerinde ayarlandığında, <fieldset> öğesinin ilk <legend> içeriği dışındaki tüm alt form kontrolleri devre dışı bırakılır.
disabled özelliğini destekleyen öğeler, :disabled ve :enabled sözde sınıflarıyla da hedeflenebilir. disabled özelliğiyle devre dışı bırakılan öğelerin stili, accent-color ayarlanmış olsa bile genellikle kullanıcı aracısı stil sayfasında açık gri renkte gösterilir.
Bir boole özelliği olduğundan, özelliğin varlığı normalde etkinleştirilmiş olan öğeyi devre dışı bırakır. Bu özelliği false olarak ayarlayamazsınız.
Devre dışı bırakılan bir öğeyi yeniden etkinleştirmek için özelliğin genellikle Element.removeAttribute('disabled') üzerinden kaldırılması gerekir.
HTMLInputElement.disabled özelliği, bir girişin devre dışı bırakılıp bırakılmadığını kontrol etmenizi sağlar. disabled genel bir özellik olmadığı için HTMLElement'ten devralınmaz, ancak HTMLSelectElement ve HTMLTextareaElement gibi her destekleyici öğe arayüzü aynı salt okunur özelliğe sahiptir.
disabled özelliği, tabindex veya contenteditable aracılığıyla odaklanabilir inert öğeleri için geçerli değildir.
Ayrıca, <form> öğesinin kendisi için de geçerli değildir. Bunları devre dışı bırakmak için genel inert özelliği kullanılabilir.
inert özelliği
Bir öğeye inert global boole özelliği eklendiğinde, bu öğe ve iç içe yerleştirilmiş tüm içerikler devre dışı bırakılır (tıklanabilir veya sekme tuşuyla kapatılamaz) ve erişilebilirlik ağacından kaldırılır. inert herhangi bir öğeye uygulanabilir olsa da genellikle ekran dışı veya başka bir şekilde gizli içerik gibi içerik bölümleri için kullanılır.
Form kontrollerine disabled uygulanırken tarayıcı varsayılan stil sağlar ve :disabled sözde sınıfı kullanılarak biçimlendirilebilir. inert özelliği görsel göstergeler sağlamaz ve eşleşen sözde sınıf içermez (ancak [inert] özellik seçici eşleşir).
Görünür içerikte hareketsizliği gösteren stiller olmadan inert kullanılması, kötü kullanıcı deneyimine neden olabilir. Gerçekçi içerik, ekran okuyucu kullanıcılarına sunulmadığı için görme engelli ekran okuyucu kullanıcıları ekranda, erişilebilirlik araçları tarafından kullanılamayan bir içerik gördüğünde kafa karışıklığına yol açabilir. Değişmezliği CSS aracılığıyla açıkça belirtin.
Odağın, görülemeyen içeriğe asla taşınmadığından emin olun. Ekran dışında oluşturulan ancak odaklanıldığında otomatik olarak görüntülenmeyen her şey gerçek olmayan olmalıdır. İçerik gizliyse ancak bu sayfadaki içerik bağlantısını atla gibi odaklanıldığında görüntüleniyorsa etkisiz hale getirilmesi gerekmez.
Öğrendiklerinizi sınayın
Öğrendiklerinizi sınayın
Odaklanma bilginizi test edin.
Odaklanamayan öğenin tanımı nedir?
Öğenin disabled özelliği varsa aşağıdakilerden hangisi doğrudur?