Odaklanma

Form kontrolleri, bağlantılar ve düğmeler dahil olmak üzere etkileşimli öğeler odaklanılabilir ve sekme tuşuyla oynanabilir. Sekmeli öğeler, dokümanın sıralı odaklama gezinme düzeninin bir parçasıdır. Diğer öğeler etkileşimli değildir. HTML özellikleriyle, etkileşimli öğeleri hareketsiz hale getirmek ve hareketsiz öğeleri etkileşimli hale getirir.

Varsayılan olarak, gezinme odağı sırası, kaynak kodu sırası olan görsel sırayla aynıdır. HTML özellikleri ve içeriğin görsel sırasını değiştirebilen CSS özellikleri hakkında daha fazla bilgi edinin. Sekmeleri değiştirme veya CSS ile görsel oluşturma sırası 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, sekme sıraları görsel olarak beklenen sıradan farklı olan reklamlar kullanıcıların kafasını karıştırabilir ve kullanıcı deneyimi açısından kötü olabilir.

Bu örnekte, tabindex özelliğinin değeri , sekme sırasını düzensiz hale getirdi:

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. Buna ek olarak, CSS order özelliği, bir kelime ekleyin. Sekme dizisi, kod sırasıdır ve artık görsel sırayla eşleşmez ve bağlantının kesilmesine neden olur. bir uygulamadır.

Eylemsiz öğeleri etkileşimli hale getirme

Global özellikler olan contenteditable ve tabindex özellikleri, herhangi bir öğeye eklenerek odaklanılabilir hale getirilebilir bu süreçte yer alır. Odaklanabilir öğelere autofocus kullanılarak fare veya işaretçiyle de odaklanılabilir. özellik grubuna göre veya komut dosyasına göre (örneğin, element.focus() ile) kullanabilirsiniz.

tabindex özelliği

Global tabindex özelliği, özelliklerini devreye sokar. genelde Sekme tuşu ile bir şeydir.

tabindex özelliği, değerini bir tam sayı olarak alır. Negatif bir değer, bir öğeye odaklanılabilir ancak sekme tuşuna basılamaz. CEVAP 0 öğesinin tabindex değeri, öğeyi sıralı öğeye uygulandığı öğeyi ekleyerek odaklanılabilir ve sekmelanabilir hale getirir kaynak kodu sırasında gezinme sırası. 1 veya daha büyük bir değer, öğeyi odaklanabilir ve sekmeye geçirilebilir hale getirir ancak bunu öncelikli bir sekme oluşturma sırasına ekler ve yukarıda gördüğümüz gibi kaçınılması gerekir.

Bu sayfada, paylaş düğmesi (<share-action>) bir özel öğedir. tabindex="0", normal şekilde odaklanılamayan bunu ekler öğesini klavyenin varsayılan sekme sıralama sırasına koyun:

<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 vardır: yerel gezinme, öğesi, negatif tabindex değerine sahip:

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

Negatif değere sahip bir tabindex özelliği, öğeyi odaklanılabilir hale getirir ancak sekmeye dönüştürülemez hale getirir. Öğe, (ör. HTMLElement.focus() aracılığıyla) ancak bu, önceliklerini belirleyin. Sekmede kaydırılamayan, odaklanılabilir öğeler için kural, tabindex="-1" kullanmaktır. Lütfen etkileşimli bir öğeye tabindex="-1" eklerseniz artık sekmeye dönüştürülemez.

element.focus() yöntemi, odağı odaklanılabilir öğelerdir. Tarayıcıların, odaklanılan öğeleri görünüme kaydırdığına dikkat edin. Bu nedenle, element.focus({preventScroll:true}), görünmez bir öğeye odaklanmak kötü bir kullanıcı deneyimine neden olur.

O 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 büyük olan öğeler ayrı bir sekme sırasına dahil edilir. Codepen'de fark edeceğiniz üzere sekmeye geçiş (tabindex ayarlanmadı veya tabindex="0") kaynak sırada:

Pozitif değere sahip tabindex, öğeyi öncelikli bir odak dizisine yerleştirir. Bu da odaklanma düzeninde karmaşaya yol açabilir. tabindex ile DOM sırasını değiştirmekten kaçının. Sekme siparişlerinin değiştirilmesi kötü kullanıcı oluşturmakla kalmaz geliştiricilerin yönetmesi ve sürdürmesi zordur.

contenteditable özelliği

contenteditable özelliği daha önce ele alınmıştı. Herhangi bir öğede contenteditable="true" ayarlanması öğeyi düzenlenebilir hale getirir. odaklanılabilir ve sekme sırasının bir parçasını oluşturur. Odaklanma davranışı, tabindex="0" ayarlamasına benzer ancak aynı değildir. İç içe yerleştirilmiş contenteditable öğelerine odaklanılabilir ancak sekmelere ulaşılamaz. İç içe yerleştirilmiş bir contenteditable öğesini sekmelendirilebilir hale getirmek için tabindex="0" ve Bu, sıralı odaklama gezinme sırasına ekler.

Etkileşimli öğelere odaklanarak

autofocus özelliği

Boole autofocus genel bir özellik olsa da herhangi bir öğede ayarlanabilenler bir eylemsiz öğeyi etkileşimli hale getirmez. Sayfa yüklendiğinde, odaklanılabilir ilk öğe autofocus özelliği ayarlanmışken, söz konusu öğe bir <dialog> içinde görüntülenmediği ve iç içe yerleştirilmediği sürece odağı alır.

İçeriğe otomatik olarak odaklanma ayarı kafa karıştırıcı olabilir. Form kontrolünde autofocus politikasının ayarlanması, form kontrolünün sayfa yüklendiğinde görünümün içine kaydırılır. 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 "görüş" muhtemelen form denetiminin normalde görünen etiketini aşacak şekilde kaydırarak forma ilişkin talimatları da ekleyebilirsiniz. autofocus özelliğinin dokümanın sıralı odak gezinme sırasını değiştirmez. Dizide, otomatik odaklı öğeler atlanır. Bu nedenle, autofocus özelliğinin eklenmesi önerilmez.

"autofocus kullanma" istisnası önerisi, <dialog> öğeleri içindeki autofocus özelliğini içeriyor. Bir iletişim kutusu açıldığında tarayıcı, otomatik olarak <dialog> içindeki ilk odaklanılabilir etkileşimli öğeye odaklanır. yani bir öğe için autofocus gerekli değil. İletişim kutusundaki belirli bir etkileşimli öğenin, odaklandığınızda, söz konusu öğeye autofocus özelliğini ekleyin.

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

<button> kapanışında ayarlanan autofocus özelliği, iletişim kutusu açıldığında odağı almasını sağlar. İlk öğe olarak her durumda odak noktası olacaktır. Varsayılan olarak, bir iletişim kutusu açıldığında iletişim kutusundaki farklı bir öğede autofocus özelliği ayarlanmamışsa iletişim kutusu odağı alır.

Etkileşimli öğeleri etkisiz hale getirme

Sekme oluşturma sırasından etkileşimli öğeleri kaldırabilen HTML özellikleri de mevcuttur. Negatif bir tabindex ekleme odaklanılabilir öğelere, destekleyici form kontrollerine disabled özelliğini ve global inert özelliğini ekleme tüm öğeleri sekmeye dönüştürülemez hale getirir. Bu üç özellik birbirinin yerine GEÇMEZ.

Negatif tabindex değeri

Yukarıda öğrendiğimiz gibi, negatif değere sahip tabindex özelliği bir öğeye odaklanılabilir ancak sekme tuşuna basılamaz. Eklerken tabindex="0" öğesini; bağlantılar, düğmeler, form denetimleri ve contenteditable olan öğeler dahil olmak üzere varsayılan olarak odaklanılabilir bir öğeye gerekli değildir; negatif değere sahip bir tabindex eklemek, normal olarak sekmeye dönüştürülebilir öğeleri sıralı odaktan kaldırır gezinme sırası.

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

Devre dışı

Boole devre dışı özelliği, form kontrollerini ve alt öğeleri (varsa) odaklanılamaz. Devre dışı bırakılan form denetimlerine odaklanılamaz, tıklama etkinlikleri alınmaz, ve form gönderildikten sonra gönderilmez. disabled özelliğinin genel bir özellik olmadığını unutmayın. <button>, <input>, <optgroup>, <option>, <select>, <textarea>, formla ilişkili özel öğeler ve <fieldset>. <optgroup> veya <fieldset> üzerinde ayarlandığında, <fieldset> öğesinin ilk <legend> içeriği hariç tüm alt form denetimleri devre dışı bırakılır.

disabled öğesini destekleyen öğeler, :disabled ile de hedeflenebilir. ve :enabled sözde sınıfları. disabled özelliği, accent-color olsa bile kullanıcı aracısı stil sayfasında genellikle açık gri olarak ayarlanır. ayarlandı.

Özelliğin mevcut olması, bir boole özelliği olduğundan aksi etkinleştirilmiş öğeyi devre dışı bırakır; bunu false olarak ayarlayamazsınız. Devre dışı bırakılan bir öğeyi yeniden etkinleştirmek için özelliğin genellikle Element.removeAttribute('disabled') aracılığıyla kaldırılması gerekir.

HTMLInputElement.disabled özelliği, aşağıdakileri kontrol etmenizi sağlar: tıklayın. disabled genel bir özellik olmadığından HTMLElement öğesinden değil, destekleyici her öğeden devralınır HTMLSelectElement gibi bir öğe arayüzü, HTMLTextareaElement aynı salt okunur özelliğe sahiptir.

disabled özelliği, tabindex veya contenteditable aracılığıyla odaklanılabilir hale getirilen ve normalde inert öğeleri için geçerli değildir. Bu sınırlama, <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

inert global boole özelliği bir öğeye eklendiğinde, bu öğe ve iç içe yerleştirilmiş tüm içerikler devre dışı bırakılır (ikisi de devre dışı bırakılır) ve erişilebilirlik ağacından kaldırılır. inert herhangi bir öğeye uygulanabilir olsa da genellikle ekran dışı veya gizli içerik gibi içerik bölümlerinde kullanılır.

Form kontrollerine disabled uygulanırken tarayıcı varsayılan stilleri sağlar ve :disabled kullanılarak stil ayarlanabilir. sözde sınıf. inert özelliği, görsel gösterge sağlamaz ve eşleşen sözde sınıfa sahip değildir (ancak [inert] özellik seçici eşleşir).

Eylemsizliği gösteren stil olmadan görünür içerikte inert kullanılması, kullanıcı deneyimini olumsuz yönde etkileyebilir. Hareketsiz içerik olarak Bu özellik, ekran okuyucu kullanıcıları tarafından kullanılamaz. Görme engelli ekran okuyucu kullanıcıları ekranda içerik görürken karışıklığa yol açabilir. Google Play'de mevcut değildir. Eylemsizliği CSS aracılığıyla açıkça gösterin.

Odağın, görünmeyen içeriklere taşınmadığından emin olun. Otomatik olarak oynatılmayan, ekran dışında oluşturulan her şey odaklanmanın aktivite yapılması gerektiğinde görünür. İçerik gizliyse ancak bu sayfadaki içeriklere atla bağlantısı gibi odaklanıldığında görüntülenir. eylemsiz hale getirilmesine gerek yoktur.

Öğrendiklerinizi sınayın

Öğrendiklerinizi sınayın

Odaklanma bilginizi test edin.