Odak

Form kontrolleri, bağlantılar ve düğmeler gibi etkileşimli öğeler varsayılan olarak odaklanılabilir ve sekmeyle gezilebilir. Sekmeyle erişilebilen öğeler, dokümanın sıralı odak gezinme düzeninin bir parçasıdır. Diğer öğeler etkileşimli olmadıkları için durağandır. 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.

Aşağıdaki örnekte, tabindex özelliğinin değeri sekme sırasını karmaşık hale getirmiştir:

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; bildirimi, görsel sırayı 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ı, artık görsel sırayla eşleşmeyen kodun sırasıdır. Bu durum, klavye kullanıcıları için bağlantı kopmasına neden olur.

Flexbox, grid, konumlandırma, dönüşümler ve çok sütunlu gibi bazı CSS özellikleri içeriğin görsel sırasını değiştirebilir. İçeriğinizde klavyeyle sekme tuşunu kullanarak gezinip test edin: İçerikte geriye doğru gitmek için Üst Karakter + Sekme tuşlarını kullanın. Hangi öğenin odaklandığını belirtmek için CSS kullanın. Odaklanılabilir öğeleri CSS ile yeniden sıralamayın.

Tüm görüntü alanı boyutlarında mantıksal bir sekme sırası oluşturmanız önemlidir.

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 bir komut dosyasıyla fare ya da işaretçi kullanılarak da odaklanılabilir.

tabindex özelliği

tabindex Özellikler'de kullanıma sunulan genel özelliği, normalde odaklanamayan öğelerin odaklanmasını sağlar. Bu işlem genellikle Tab tuşuyla yapılır. Bu nedenle, özelliğin adı da bu tuşla ilişkilidir.

tabindex özelliği, değer olarak bir tam sayı alır. Negatif değer, bir öğenin odaklanılabilir ancak sekme ile geçilebilir olmasını sağlar. tabindex değeri 0 olan öğe odaklanılabilir ve sekmeyle geçilebilir hale gelir. Bu değerin uygulandığı öğe, kaynak kodu sırasına göre sıralı odaklanma gezinme düzenine eklenir. 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", 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>

Ayrıca, yerel gezinme, negatif tabindex değerine sahip özel bir öğe içeriyor:

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

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

element.focus() yöntemi, odaklanılabilir öğelere odaklanmak için 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. Aşağıdaki Codepen'de olduğu gibi, sekme ile gezinme, kaynak sırasındaki normal sıradakiler (tabindex ayarlanmamış veya tabindex="0") üzerinden 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 odaklanma sırasına yerleştirir. Bu durum, odaklanma sırasının karışmasına neden olabilir. tabindex ile DOM sırasını değiştirmeyin. Değiştirilmiş sekme sırası, kötü kullanıcı deneyimlerine yol açabilir ve bakımı 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" ayarlamaya benzer ancak aynı değildir. İç içe yerleştirilmiş contenteditable öğeleri odaklanılabilir ancak sekmeyle geçilebilir değildir. İç 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 etkisiz bir öğeyi etkileşimli hâle getirmez. Sayfa yüklendiğinde, autofocus özelliklerine sahip ilk odaklanılabilir öğe, bu öğe görüntülendiği ve <dialog> içine yerleştirilmediği sürece odağı alır.

İçeriğe otomatik olarak odaklanılması kullanıcılar için kafa karıştırıcı olabilir. Bir form denetiminde autofocus ayarladığınızda, bu form denetimi sayfa yüklendiğinde görünür hale gelir. Ekran okuyucu kullanıcıları ve küçük görüntü alanına sahip kullanıcılar da dahil olmak üzere kullanıcılarınız, formun talimatlarını veya form kontrolünün etiketini kaçırabilir. Ayrıca, autofocus özelliği, dokümanın sıralı odaklanma gezinme sırasını değiştirmez. Otomatik olarak odaklanılan öğeden önce gelen öğeler atlanır. Bu nedenlerle, autofocus özelliğini kullanmaktan kaçınmalısınız.

"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, sekme sırasından etkileşimli öğeleri 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 erişilemez hale getirir. Bu üç özellik tamamen ayrıdır ve birbirinin yerine kullanılamaz.

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 değildir. Negatif değere sahip bir tabindex eklemek, normalde sekme ile geçilebilir öğ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 kullanıcıları, öğeye odaklanmaya devam edebilir. 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>'ın 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 genellikle Element.removeAttribute('disabled') ile özelliğin kaldırılması gerekir.

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ü aynı salt okunur özelliğe sahiptir.

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 ekran dışında veya başka bir şekilde gizlenmiş içerik gibi içerik bölümleri için kullanılır.

Form kontrollerine disabled uygulandığında tarayıcı varsayılan stil oluşturur 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).

inert özelliğini, etkisizliği gösteren stiller olmadan görünür içerikte kullanmak kötü bir kullanıcı deneyimine yol açabilir. İçerik ekran okuyucu kullanıcıları tarafından kullanılamadığından, ekran okuyucu kullanan görme engelli 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 belirgin hale getirin.

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) hale getirilmelidir. İçerik gizliyse ancak odaklanıldığında görünür hale geliyorsa (ör. içeriğe git bağlantısı) etkisiz hale getirilmesi gerekmez.

Bilgilerinizi sınayın

Odaklanma ile ilgili bilginizi test edin.