Bu, form erişilebilirliği üzerine yaptığımız küçük serinin 2. gönderisi olacak. İlk gönderiyi kaçırdıysanız, göz atın Sözde Sınıflarla Erişilebilir Formlar. Bu yazıda :focus-visible'a ve onu web sitelerinizde nasıl kullanacağınıza bakacağız!

Temas Noktasına Odaklanma

İlerlemeden önce :focus-visible, hadi nasıl yapılacağına tekrar bakalım :focus CSS'nizde çalışır. Odaklanma, bir öğenin klavye, fare, izleme dörtgeni veya yardımcı teknoloji aracılığıyla etkileşime girdiğinin görsel göstergesidir. Bağlantılar, düğmeler ve form öğeleri gibi belirli öğeler doğal olarak etkileşimlidir. Kullanıcılarımızın nerede olduklarını ve yaptıkları etkileşimleri bildiklerinden emin olmak istiyoruz.

Unutmayın, bunu CSS'nizde yapmayın!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Odağı kaldırdığınızda, onu kaldırırsınız HERKES! Odak noktamızı koruduğumuzdan emin olmak istiyoruz.

Herhangi bir nedenle odağı kaldırmanız gerekirse, geri dönüş olanağının da olduğundan emin olun. :focus kullanıcılarınız için stiller. Bu yedek, marka renklerinizle eşleşebilir ancak bu renklerin de erişilebilir olduğundan emin olun. Pazarlama, tasarım veya markalama varsayılan odak halkası stillerinden hoşlanmıyorsa, o zaman bu odak halkası stillerini tekrar eklemenin en iyi yolu üzerinde onlarla konuşmaya başlamanın ve işbirliği yapmanın zamanı gelmiştir.

Nedir focus-visible?

Sahte sınıf, :focus-visible, tıpkı varsayılanımız gibi :focus sözde sınıf. Kullanıcıya sayfada bir şeyin odaklandığına dair bir gösterge verir. Yazma şeklin :focus-visible kesilir ve kurutulur:

:focus-visible {
  /* ... */
}

Kullanırken :focus-visible belirli bir öğeyle sözdizimi şuna benzer:

.your-element:focus-visible {
  /*...*/
}

Kullanmanın en güzel yanı :focus-visible öğenizin öne çıkmasını sağlayabilir misiniz? parlak ve cesur! Öğeye tıklanıp dokunulmadığını göstermesi konusunda endişelenmenize gerek yok. Sınıfı uygulamamayı seçerseniz, varsayılan, bazıları için istenmeyen bir durum olan kullanıcı aracısı odak halkası olacaktır.

Geçmişi focus-visible

sahip olmadan önce :focus-visible, kullanıcı aracısı stili geçerli olur :focus sayfadaki çoğu öğeye; düğmeler, bağlantılar vb. Odaklanabilir öğeye bir taslak veya "odaklama halkası" uygular. Bunun çirkin olduğu düşünülüyordu; çoğu kişi tarayıcının sağladığı varsayılan odak halkasını beğenmedi. Odaklama halkasının bakılması sakıncalı olması nedeniyle çoğu yazar, geri dönüş olmadan onu kaldırdı. Unutma, kaldırdığında :focuskullanılabilirliği azaltır ve deneyimi klavye kullanıcıları için erişilemez hale getirir.

Web'in mevcut durumunda, tarayıcı artık çeşitli öğeler odaklandığında, bunların etrafındaki odağı gözle görülür şekilde göstermiyor. Tarayıcı bunun yerine kullanıcıya ne zaman yardımcı olacağını belirlemek için çeşitli buluşsal yöntemler kullanır ve karşılığında bir odak halkası sağlar. Buna göre Khan Academy, bir buluşsal yöntem, "İyi seçimler bulmak için bir algoritmaya rehberlik eden bir teknik."

Bunun anlamı, tarayıcının kullanıcının klavye, fare veya izleme paneli aracılığıyla deneyimle etkileşimde bulunup bulunmadığını tespit edebilmesi ve bu giriş türüne göre odak halkasını eklemesi veya kaldırmasıdır. Bu yazıdaki örnek, giriş etkileşimini vurgulamaktadır.

İlk günlerinde :focus-visible biz bir kullanıyorduk çoklu dolgu Alice Boxhall ve Brian Kardell tarafından oluşturulan odak halkasını yönetmek için Mozilla da kendi sahte sınıfını ortaya çıkardı. :moz-focusring, resmi spesifikasyondan önce. Odaklanma halkasının ilk günleri hakkında daha fazla bilgi edinmek istiyorsanız şuraya göz atın: A11y Oyuncuları Rob Dodson'la birlikte.

Odaklanmanın Önemi

Uygulamanızda odaklanmanın önemli olmasının birçok nedeni vardır. Birincisi, yukarıda belirttiğim gibi, web elçileri olarak elimizden gelen en iyi, erişilebilir deneyimi sağladığımızdan emin olmalıyız. Hiçbir kullanıcımızın deneyimde gezinirken nerede olduklarını tahmin etmesini istemiyoruz.

Her zaman aklıma gelen bir örnek, İki Kör Kardeş web sitesi. Web sitesine gidip sol alt köşedeki kapalı göze tıklarsanız/dokunursanız, gözün açık olduğunu göreceksiniz ve bir simülasyon başlayacaktır. Her iki kardeşe, Bradford ve Bryan Manning'e genç yaşta Stargardt Hastalığı teşhisi konuldu. Stargardt hastalığı, gözün makula dejenerasyonunun bir şeklidir. Zamanla her iki kardeş de tamamen kör olacaktır. Siteyi ziyaret edin ve nasıl gördüklerini görmek için göze tıklayın.

Eğer onların yerinde olsaydınız ve bir sayfada gezinmek zorunda kalsaydınız, tüm deneyim boyunca tam olarak nerede olduğunuzu bildiğinizden emin olmak isterdiniz. Odaklama halkası size bu gücü verir.

Gösteri

Aşağıdaki demo nasıl olduğunu gösteriyor :focus-visible CSS'nize eklendiğinde çalışır. Videonun ilk kısmı fareyle gezinme deneyimini gösteriyor, ikinci kısmı ise yalnızca klavyemle gezinmeyi gösteriyor. Faremi kullanmaktan klavyeme geçiş yaptığımı göstermek için kendimi de kaydettim.

Tarayıcı, girdilerime (klavye/fare) dayanarak odak halkasıyla ne yapılacağını tahmin ediyor ve ardından bu öğelere bir odak halkası ekliyor. Bu durumda, bu örnekte klavyeyle gezindiğimde her şey odaklanıyor. Fareyi kullanırken yalnızca giriş odaklanır, düğmeler odaklanmaz. Eğer kaldırırsan :focus-visibletarayıcı varsayılan odak halkasını uygulayacaktır.

Aşağıdaki kod uygulanıyor :focus-visible odaklanılabilir öğelere.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

belirtmek istiyorsanız label veya almak için düğme :focus-visible sadece sınıfın başına ekle input or button respectivamente.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Destek

Tarayıcı desteklemiyorsa :focus-visible etkileşimi idare etmek için geri çekilebilirsiniz. Aşağıdaki kod şuradan alınmıştır: MDN Oyun Alanı. Kullanabilirsiniz @destekler kurala uygun veya “özellik sorgusu” Desteği kontrol etmek için. Akılda tutulması gereken bir nokta, kuralın kodun en üstüne yerleştirilmesi veya başka bir kural grubunun içine yerleştirilmesi gerektiğidir.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Erişilebilirlikle İlgili Daha Fazla Endişe

Deneyiminizi oluştururken aklınızda bulundurmanız gereken erişilebilirlik sorunları:

• Odaklanma göstergeniz için seçtiğiniz renklerin, eğer varsa, belgede belgelenen bilgilere göre hâlâ erişilebilir olduğundan emin olun. WCAG 2.2 Metin Dışı Kontrast (Seviye AA)
• Bilişsel aşırı yüklenme kullanıcının sıkıntı yaşamasına neden olabilir. Çeşitli etkileşimli öğelerdeki stilleri tutarlı tuttuğunuzdan emin olun

tarayıcı Desteği

Hızlı Linkler

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoData.Network Dikey Üretken Yapay Zeka. Kendine güç ver. Buradan Erişin.
• PlatoAiStream. Web3 Zekası. Bilgi Genişletildi. Buradan Erişin.
• PlatoESG. karbon, temiz teknoloji, Enerji, Çevre, Güneş, Atık Yönetimi. Buradan Erişin.
• PlatoSağlık. Biyoteknoloji ve Klinik Araştırmalar Zekası. Buradan Erişin.
• Kaynak: https://css-tricks.com/managing-user-focus-with-focus-visible/