Odak

Form kontrolleri, bağlantılar ve düğmeler gibi etkileşimli öğeler varsayılan olarak odaklanılabilir ve sekmeyle erişilebilir. Sekmeyle erişilebilen öğeler, dokümanın sıralı odak gezinme düzeninin bir parçasıdır. Diğer öğeler etkileşimli değildir. HTML özellikleri sayesinde etkileşimli öğeleri etkisiz, etkisiz öğeleri ise etkileşimli hale getirmek mümkündür.

Varsayılan olarak, gezinme odağı sırası görsel sırayla aynıdır. Bu sıra, kaynak kodu sırasıdır. Bu sırayı değiştirebilecek HTML özellikleri ve içeriğin görsel sırasını değiştirebilecek CSS özellikleri vardır. HTML ile sekme sırasını veya CSS ile görsel oluşturma sırasını değiştirmek 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ı karmaşık hale getiriyor:

Bu örnekte CSS, sekme sırası ile içeriğin görsel sırası arasında bir farklılık oluşturmuştur:

flex-flow: row-reverse; beyanı, görsel sırasını tersine çevirdi. Ayrıca, CSS order özelliği altıncı kelime olan "This"e uygulandı ve bu kelime görsel olarak taşındı. Sekme sırası, kodun sırasıdır ve artık görsel sırayla eşleşmediği için klavye kullanıcıları için bağlantı kesintisi oluşturur.

Etkileşimsiz öğeleri etkileşimli hale getirme

Genel özellikler olan contenteditable ve tabindex özellikleri herhangi bir öğeye eklenebilir ve bu öğeler odaklanılabilir hale gelir. Odaklanılabilir öğeler, autofocus özelliği ayarlanarak veya element.focus() gibi komut dosyasıyla fare ya da işaretçi kullanılarak da odaklanılabilir.

tabindex özelliği

tabindex özelliği, özellikler bölümünde tanıtılmış olup normalde odaklanamayan öğelerin odaklanmasını sağlar. Bu işlem genellikle Tab tuşuyla yapıldığından özelliğe bu ad verilmiştir.

tabindex özelliği, değer olarak bir tam sayı alır. Negatif değer, bir öğenin odaklanılabilir ancak sekme ile geçilebilir olmamasına neden olur. tabindex değeri 0 olan öğe, odaklanılabilir ve sekmeyle geçilebilir hale gelir. Bu öğe, uygulandığı öğeyi kaynak kodundaki sırayla odaklanma gezinme sırasına ekler. 1 veya daha büyük bir değer, öğenin odaklanılabilir ve sekmeyle erişilebilir olmasını sağlar ancak öğeyi öncelikli bir sekme sırasına ekler ve bu nedenle kullanılmamalıdır.

Bu sayfadaki paylaş düğmesi, <share-action>, bir özel öğedir. tabindex="0", normalde odaklanılamayan bu öğeyi klavyenin varsayılan sekme 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 var: Yerel gezinme, negatif tabindex değerine sahip bir özel öğe içeriyor:

<web-navigation-drawer type="standard" tabindex="-1">

Negatif değere sahip bir tabindex özelliği, öğeyi odaklanılabilir ancak sekme ile geçilebilir yapmaz. Öğe, HTMLElement.focus() kullanma gibi odaklanma işlemlerini alabiliyor ancak sıralı odaklanma gezinme düzeninin bir parçası değil. Sekmeyle erişilemeyen, odaklanılabilir öğeler için tabindex="-1" kuralı kullanılır. Etkileşimli bir öğeye tabindex="-1" eklediğinizde bu öğe artık klavyeyle sekme tuşunu kullanarak seçilemez.

Odaklanılabilir öğelere odaklanmak için element.focus() yöntemi kullanılabilir. Tarayıcılar, odaklanılan öğeleri görünür hale getirmek için kaydırır. Bu nedenle, görünür olmayan bir öğeye odaklanmak kötü bir kullanıcı deneyimi olduğundan element.focus({preventScroll:true}) kullanımından kaçının.

Hangi öğenin odaklandığını öğrenmek için dokümana sorgu uygulamak istiyorsanız salt okunur Document.activeElement özelliğini kullanın.

tabindex değeri 1 veya daha büyük olan öğeler ayrı bir sekme sırasına dahil edilir. Codepen'de de göreceğiniz gibi, sekme oluşturma işlemi, kaynak sırasındaki normal sıraya (tabindex veya tabindex="0" ayarlanmamış) 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 özelliği, öğeyi öncelikli bir odaklanma sırasına yerleştirir. Bu da odaklanma sırasının karışmasına neden olabilir. ile DOM sırasını değiştirmektentabindex kaçının. Değiştirilmiş sekme sıraları yalnızca kötü kullanıcı deneyimleri oluşturmakla kalmaz, aynı zamanda geliştiricilerin yönetmesi ve sürdürmesi de zordur.

contenteditable özelliği

contenteditable özelliği daha önce ele alınmıştı. Herhangi bir öğede contenteditable="true" ayarını yaptığınızda öğe düzenlenebilir, odaklanılabilir ve sekme sırasının bir parçası olur. Odaklanma davranışı, tabindex="0" değerini ayarlamaya benzer ancak aynı değildir. İç içe yerleştirilmiş contenteditable öğeleri odaklanılabilir ancak sekme ile geçilemez. İç içe yerleştirilmiş bir contenteditable öğesini klavyeyle erişilebilir hale getirmek için tabindex="0" ekleyin. Bu, öğeyi sıralı odak gezinme sırasına ekler.

Etkileşimli öğelere autofocus verme

Boole değeri olan autofocus, herhangi bir öğede ayarlanabilen genel bir özellik olsa da etkileşimsiz bir öğeyi etkileşimli hale getirmez. Sayfa yüklendiğinde, autofocus özelliklerine sahip ilk odaklanılabilir öğe, bu öğe gösterildiği ve <dialog> içine yerleştirilmediği sürece odaklanır.

İçeriğe otomatik olarak odaklanılması kafa karıştırıcı olabilir. Bir form kontrolünde autofocus ayarının yapılması, form kontrolünün sayfa yüklendiğinde görünür hale gelmesini sağlar. Ekran okuyucu kullanıcıları ve küçük görüntü alanına sahip kullanıcılar da dahil olmak üzere tüm kullanıcılarınız, formun talimatlarını "göremeyebilir". Hatta form kontrolünün normalde görünür olan etiketini kaydırarak geçebilirler. autofocus özelliği, dokümanın sıralı odaklanma gezinme sırasını değiştirmez. Otomatik olarak odaklanan öğeden önce gelen sıradaki öğeler atlanır. Bu nedenlerle autofocus özelliğinin eklenmesi önerilmez.

"autofocus kullanmayın" önerisinin istisnası, <dialog> öğelerine autofocus özelliğinin eklenmesidir. Bir iletişim kutusu açıldığında tarayıcı, <dialog> içindeki odaklanılabilir ilk etkileşimli öğeye otomatik olarak odaklanır. Bu nedenle, bir öğeye autofocus eklemek gereksizdir. İletişim kutusu açıldığında iletişim kutusundaki belirli bir etkileşimli öğenin odaklanmasını istiyorsanız bu öğeye autofocus özelliğini ekleyin.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Kapatma <button> öğesinde ayarlanan autofocus özelliği, iletişim kutusu açıldığında öğenin odaklanmasına olanak tanır. İletişim kutusundaki ilk öğe olduğundan her durumda odaklanılırdı. Varsayılan olarak, bir iletişim kutusu açıldığında iletişim kutusundaki farklı bir öğede autofocus özelliği ayarlanmadığı sürece iletişim kutusundaki odaklanılabilir ilk öğe odağı alır.

Etkileşimli öğeleri etkisiz hale getirme

Ayrıca, etkileşimli öğeleri sekme sırasından kaldırabilen HTML özellikleri de vardır. Odaklanılabilir öğelere negatif tabindex eklemek, destekleyici form kontrollerine disabled özelliğini eklemek ve bir kapsayıcıya genel inert özelliğini eklemek, öğelerin tümünü sekme ile geçilemez hale getirir. Bu üç özellik BİRBİRİNİN YERİNE KULLANILAMAZ.

Negatif tabindex değeri

Negatif değere sahip bir tabindex özelliği, öğeyi odaklanılabilir yapar ancak sekme ile erişilebilir yapmaz. 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 olmasa da negatif değere sahip bir tabindex eklemek normalde sekme tuşuyla odaklanılabilir öğeleri sıralı odaklanma gezinme sırasından kaldırır.

Negatif bir tabindex değeri, klavye kullanıcılarının etkileşimli öğelere odaklanmasını engeller ancak öğeyi devre dışı bırakmaz. İşaretçi kullananlar yine de öğeye odaklanabilir. Bir öğeyi devre dışı bırakmak için disabled özelliğini kullanın.

Devre dışı

Boole değeri olan disabled özelliği, uygulandığı form kontrollerini ve varsa bunların alt öğelerini odaklanılamaz hale getirir. Devre dışı bırakılan form kontrollerine odaklanılamaz, tıklama etkinlikleri alınmaz ve form gönderildiğinde gönderilmez.

disabled, genel bir özellik değil. <button>, <input>, <optgroup>, <option>, <select>, <textarea>, formla ilişkili özel öğeler ve <fieldset> için geçerlidir. <optgroup> veya <fieldset> olarak ayarlandığında, <fieldset>'nin ilk <legend> içeriği hariç 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 öğeler, accent-color ayarlanmış olsa bile genellikle kullanıcı aracısı stil sayfasıyla açık gri olarak stillendirilir.

Bir Boole özelliği olduğundan, özelliğin varlığı aksi takdirde 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 kaldırılması gerekir. Bu işlem genellikle Element.removeAttribute('disabled') ile yapılır.

HTMLInputElement.disabled özelliği, bir girişin devre dışı olup olmadığını kontrol etmenizi sağlar. disabled genel bir özellik olmadığından HTMLElement'den devralınmaz ancak HTMLSelectElement, HTMLTextareaElement gibi destekleyici her öğe arayüzünde aynı salt okunur özellik bulunur.

disabled özelliği, normalde inert olan ve tabindex veya contenteditable ile odaklanılabilir hale getirilen öğeler için geçerli değildir. Ayrıca <form> öğesi için de geçerli değildir. Bu öğeleri devre dışı bırakmak için genel inert özelliği kullanılabilir.

inert özelliği

Bir öğeye inert genel boole özelliği eklendiğinde bu öğe ve tüm yerleştirilmiş içerikler devre dışı bırakılır. Bu durumda, öğe ve içerikler tıklanamaz veya sekme ile erişilemez. Bu öğeler erişilebilirlik ağacından da kaldırılır. inert herhangi bir öğeye uygulanabilse de genellikle içerik bölümleri (ör. ekran dışında veya başka şekilde gizlenmiş içerik) için kullanılır.

Form kontrollerine disabled uygulandığında tarayıcı varsayılan stil sağlar ve :disabled sözde sınıfı kullanılarak stillendirilebilir. inert özelliği görsel gösterge sağlamaz ve eşleşen bir sözde sınıfı yoktur ([inert] özellik seçicisi eşleşse de).

Görünür içerikte, etkisizliği belirten stiller olmadan inert kullanılması kötü bir kullanıcı deneyimine yol açabilir. İçerik ekran okuyucu kullanıcıları tarafından kullanılamadığından, görme engelli ekran okuyucu kullanıcıları ekranda erişilebilirlik araçlarında kullanılamayan içerik gördüğünde kafa karışıklığına yol açabilir. CSS ile inertliği çok net bir şekilde gösterin.

Odağın hiçbir zaman görünür olmayan içeriğe taşınmadığından emin olun. Odaklanıldığında otomatik olarak görünür hale gelmeyen, ekran dışında oluşturulan her şey inert (etkisiz) yapılmalıdır. İçerik gizliyse ancak odaklanıldığında görünür hale geliyorsa (ör. içeriğe git bağlantısı) etkisiz hale getirilmesi gerekmez.

Anlayıp anlamadığınızı kontrol etme

Odaklanma ile ilgili bilginizi test edin.