Klavye Erişilebilirliği Akılda Tutularak Uygulamalar Tasarlamak İçin 5 Adım

"Ortalama" kullanıcıyı düşündüğümüzde, bilgisayar başındayken fare veya izleme dörtgeni kullandıklarını hayal etme eğilimindeyiz. Ancak, ya tercih ettikleri ya da tek seçenekleri klavye kullanmaksa? Uygulamalarınızı klavye erişilebilirliğini göz önünde bulundurarak tasarlamayı düşündünüz mü?

Birinin bilgisayarını kullanmak istememesinin veya fare veya izleme dörtgeni kullanamamasının birçok nedeni olabilir. El becerilerini veya kas kontrolünü sınırlayan, bileklerinde veya ellerinde hassasiyete neden olan veya ekranda fare imlecini takip etmeyi zorlaştıran kalıcı, kronik veya geçici rahatsızlıkları olabilir. Ayrıca iş akışlarını kolaylaştırmak için daha fazla kısayol arayan "uzman kullanıcılar" olabilirler. Bu durumların herhangi birinde, klavyeler, bireyin teknoloji ile etkileşim kurması için tercih ettiği veya gerekli aracı olabilir.

Bu makalede, klavye erişilebilirlik yönergelerinin yanı sıra uygulamaları klavyeyle erişilebilir olduklarından emin olmak için tasarlarken akılda tutulması gereken beş adım hakkında bilgi edineceksiniz.

Klavye erişilebilirliği nasıl çalışır?

Bir uygulamaya klavyeyle erişilebiliyorsa, bu, insanların kontrol öğelerini çalıştırmak için yalnızca bir klavye kullanma seçeneğine sahip olduğu anlamına gelir. Kontrol öğeleri, sayfadaki düğmeler, bağlantılar, form girişleri, videolar ve diğer etkileşimli içerikler gibi etkileşimli bileşenlerdir.

Klavye gezinme temelleri

Klavye gezintisi için kullanılan bazı temel tuşlar şunlardır:

• Bir sonraki kontrol öğesine gitme: Sekme (veya ilgili radyo düğmeleri ve seçim seçenekleri için sağ veya aşağı ok tuşu)
• Önceki kontrol öğesine gitme: Shift + Tab (veya ilgili radyo düğmeleri ve seçim seçenekleri için sol veya yukarı ok tuşu)
• Bir kontrol elemanına tıklamak: Enter ve/veya boşluk çubuğu
• İlgili radyo düğmeleri arasında gezinme veya seçenekleri belirleme: Ok tuşları

Odak sırası

Kontrol öğelerinin klavye olaylarına yanıt verebileceği sıra, odak sırası olarak bilinir. Bir öğe odaklandığında, belirli klavye kontrollerini kullanarak onunla etkileşim kurabilirsiniz. Bir öğe odağını kaybettiğinde bulanıklaşır. Tarayıcılar, kullanıcıların o anda hangi öğenin odakta olduğunu takip etmelerine yardımcı olmak için varsayılan odak durumlarını işler.

Şunlar da hoşunuza gidebilir: Evrensel Tasarım: Sitelerinizi ve Uygulamalarınızı Daha Erişilebilir Hale Getirmek için 11 Pratik İpucu.

Klavye erişilebilirliği ve Web İçeriği Erişilebilirlik Yönergeleri (WCAG)

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), dünya çapında bölgesel veya ulusal web erişilebilirlik yasaları için standartlar olarak kabul edilmiş üç uyumluluk düzeyini (A Düzeyi, AA Düzeyi ve AAA Düzeyi) özetlemektedir.

Klavye erişilebilirliği, A Düzeyi uyumluluk için başarı kriterlerinden biridir. A Düzeyi ölçütleri, tüm web içeriği için sahip olunması gereken özellikleri tanımlar. Ayrıca uygulanması en kolay olarak kabul edilirler.

"Dikkatli olmazsak klavye erişilebilirliği konusunda hata yapmak da kolaydır."

Bununla birlikte, dikkatli olmazsak klavye erişilebilirliği kolayca yanlış anlaşılabilir. Web'de bulunan yaygın klavye erişilebilirlik sorunlarına ilişkin örnekleri burada bulabilirsiniz:

• Algılanamayan odak durumları
• Yanlış odak sırası
• Odaklanamayan etkileşimli öğeler
• Klavye etkileşimlerini algılamayan karmaşık bileşenler

Neyse ki, klavye kullanıcılarını akılda tutmak ve kendi uygulamalarımızda bu hataları yapmaktan kaçınmak için kullanabileceğimiz birçok teknik var.

Klavyeyle erişilebilen uygulamalar oluşturmak için 5 adım

1. Sezgisel etkileşimler tasarlayın

Basit kontrol öğelerini özelleştirilmiş davranışlar olmadan oluşturduğumuzda, genellikle yerleşik klavye erişilebilirlik özelliklerinden yararlanabiliriz. Ancak düğmeler, bağlantılar veya girişlerle ilgili standart klavye davranışlarını bilmiyorsak, istemeden de olsa klavye kullanıcıları için kafa karıştırıcı deneyimler yaratabiliriz.

"Düğmeler, bağlantılar veya girişlerle ilgili standart klavye davranışlarını bilmiyorsak, istemeden de olsa klavye kullanıcıları için kafa karıştırıcı deneyimler yaratabiliriz."

Örneğin, geliştiriciler bazen daha stilize edilmiş görseller lehine yerel HTML radyo düğmelerini gizlemek için CSS'yi kullanır. Girişlerin perde arkasındaki radyo düğmeleri olduğu açık değildir, bu nedenle klavye kullanıcıları odağı ilgili seçenekler arasında kaydırmak için Sekme tuşunu değil ok tuşlarını kullanmaları gerektiğini fark etmeyebilir.

Bu sorundan kaçınmak için, klavye kullanarak onunla etkileşime geçmek isteyen veya ihtiyaç duyan herkes için görsel ipuçları sağlamak üzere en azından yerel HTML öğesine benzeyen bir şey göstermeliyiz.

2. Uygulamanızı, bir klavyenin bir farenin yapabileceği her şeyi yapabileceği şekilde oluşturun

Yerleşik klavye erişilebilirlik özellikleriyle birlikte gelmeyen öğelere dikkat edin. Mizanpaj öğeleri, listeler, tablolar, başlıklar, paragraflar ve anlamsal olmayan HTML etiketleri varsayılan olarak klavye kısayollarını desteklemez. Yine de sekmeler, sürükle ve bırak listeleri veya kipler gibi daha karmaşık bileşenler oluşturmak için sıklıkla kullanılırlar.

JavaScript, kontrol dışı öğelerin fare tıklamalarına veya hareketlerine yanıt vermesini sağlayan olay dinleyicileri eklememizi sağlar. Örneğin React'te, bir liste öğesi öğesine etkileşim eklemek için onClick prop'u kullanabiliriz.

Kontrol dışı öğelere etkileşim eklediğimizde, tabIndex niteliklerini 0 olarak ayarlamamız gerekir. Bu, Sekme tuşuna basıldığında öğenin doğru odak sırasında odak almasına izin verecektir. Ayrıca Enter tuşu ve/veya Boşluk Çubuğu aracılığıyla "tıklamaları" kaydetmek için tuşa basma veya tuşa basma olay işleyicilerini uygulamamız gerekir (bağlantılar her ikisi kullanılarak da tıklanabilir, düğmeler yalnızca Enter tuşunu destekler).

Bunun yerine bağlantı etiketleri veya düğme öğeleri gibi kontroller kullanarak bu ekstra işin bir kısmından kaçınabiliriz. Varsayılan bağlantı ve düğme stillerini geçersiz kılmak için her zaman CSS kullanabilir ve hedef alanı en üst düzeye çıkarmak için etkileşimli öğenin etkileşimli olmayan ebeveyninin tüm genişliğini kaplamasını sağlayabiliriz.

Yerel olmayan özellikler için kontrol öğeleri kullansak da kullanmasak da, bileşenimizi 100 yapmak için ok tuşları (bir sekme bileşenindeki sekmeler arasında gezinmek için) veya Escape tuşu (bir kaplamayı kapatmak için) için olay dinleyicileri eklememiz gerekebilir. yüzde klavye erişilebilir.

Daha karmaşık bir bileşen için standart dışı klavye davranışları uygularsak, insanların bileşenle etkileşimde bulunmak için kullanabileceği klavye kontrollerini açıklayan görünür talimatlar sağlamak yararlı olur.

3. Varsayılan odak sırasını geçersiz kılarken fazladan çalışın

Odak sırası, klavye erişilebilirliği ile yakından ilgili olan başka bir WİEK gereksinimidir. A Düzeyi kriterlerini karşılamak için odak sırası, sayfadaki etkileşimli öğelerin görsel sıralamasıyla tutarlı olmalıdır. Klavye kullanıcıları, ekrandaki kontrol öğeleri arasında yukarıdan aşağıya ve metin içeriğinizle aynı yatay yönde (soldan sağa veya sağdan sola) gezinebilmelidir.

Bu kriteri karşılamanın en kolay yolu, işaretlemede öğelerin düzenlenme sırasına göre belirlenen varsayılan odak sırasını olduğu gibi bırakmaktır. Kontrol öğelerinin görsel düzeni ile kaynak kodunda düzenlenme biçimleri arasında tutarsızlıklar ortaya koyduğumuzda, bu kriteri karşılayamama riskiyle karşı karşıyayız.

Şunlar da hoşunuza gidebilir: Liquid ve Shopify ile Erişilebilir Bir Breadcrumb Navigasyonu Oluşturma.

Yukarıdaki ekran görüntüsünü örnek olarak kullanırsak, "Etiketleri güncelle" kartının, daha dar görünüm alanları için bir araya geldiklerinde "Açıklamayı güncelle" kartıyla konum değiştirmesini istediğimizi varsayalım. Kartlar esnek öğeler olarak işlenirse, sırasını belirli bir kesme noktasında değiştirmek için order CSS özelliğini kullanmayı düşünebiliriz.

order özelliği, esnek öğelerin görsel sırasını etkilerken, bunların kaynak koddaki düzenini güncellemez. Sonuç olarak, bir kullanıcı her düğme arasında gezinmek için Sekme tuşuna bastığında, ekranda ters sırada görüntülenseler bile "Etiketleri güncelle" düğmesi "Açıklamayı güncelle"den önce odaklanmaya devam eder. Bu, odağın beklenmedik bir şekilde sayfada yukarı ve aşağı kaymasına neden olarak kullanıcı için kafa karıştırıcı bir deneyim yaratır.

Bu sorunu önlemenin bir yolu, işaretlemede kartların iki versiyonunu oluşturmaktır: biri daha geniş görüntü alanı genişlikleri için beklenen sırada, diğeri ise daha dar görüntü alanı genişlikleri için istenen sırada. Belirli kesme noktalarında bunlar arasında geçiş yapmak için display özelliğini kullanabiliriz.

İşaretlemede iki sürümü korumak istemiyorsak, sayfada biriktikçe kartların tabIndex özniteliklerini güncellemek için JavaScript kullanmamız gerekir. İşlediğimiz kontrol öğelerinin sayısına bağlı olarak, bu yaklaşımın doğru olması, işaretlemede kartların farklı sürümlerini korumaktan daha zor olabilir.

4. Odak durumlarını özelleştirirken, bunlara en çok ihtiyaç duyan kullanıcılar için tasarım yapın

Tarayıcılar, bir öğenin odakta olduğuna dair bir tür görsel gösterge oluşturmak için outline CSS özelliğini kullanır. Odak durumları, kullanıcıların bir klavyeyle sayfada gezinirken klavye olaylarını hangi öğenin kaydedeceğini belirlemelerine yardımcı olmayı amaçlar.

Tasarımcıların ve geliştiricilerin, tarayıcılar tarafından oluşturulan varsayılan odak durumlarını değiştirmesi çok yaygındır. Bu, varsayılan outline güncellemeyi veya tamamen kaldırmayı ve background , border , box-shadow , color veya transform gibi başka bir CSS özelliğiyle değiştirmeyi içerebilir.

Şunlar da hoşunuza gidebilir: Liquid ile Erişilebilir Sayfalandırma Oluşturma.

Ancak uygulamalarımızda özel odak durumları oluşturmaya karar verirsek, aşağıdaki erişilebilirlik gereksinimlerini karşıladıklarından emin olmalıyız:

• Yeterli renk kontrastı: Odak durumumuz ile çevresindeki renkler arasında, görme engelli kullanıcıların o anda hangi öğenin odakta olduğunu kolayca takip edebilmesi için yeterli kontrast olmalıdır.
• Renkteki değişiklikler, diğer görsel göstergelerle eşleştirilir: Bir öğenin kenarlığının, yazı tipinin veya arka planının rengini değiştirmek, renk körlüğü olan kullanıcılar tarafından fark edilmeyebilir. Kullanıcıların renkleri ayırt edebilmesini gerektirmeyen diğer görsel değişikliklerle eşleştirilmelidir. Bu, renk değişikliklerini içeren üzerine gelme ve hata durumları için de geçerlidir.
• Yüksek kontrastlı temalarda görünür: Windows cihazlarda yüksek kontrast modu etkinleştirildiğinde, background ve box-shadow dahil olmak üzere bazı CSS özellikleri yoksayılır. Renk değişiklikleri de kaydedilemeyebilir, bu nedenle arka plan ve ön plan renkleri arasında daha fazla kontrasta ihtiyaç duyan kişiler tarafından algılanabilen ek göstergelere güvenmek iki kat önemlidir.

Varsayılan outline özelliğini geçersiz kılmak kabul edilebilir olsa da, bir değiştirme sağlamadan varsayılan odak durumlarını asla kaldırmayın.

5. Klavye kullanıcıları için kısayollar sağlayın

Birisi bir web sayfasında gezinmek için fare kullanırsa, aradıkları bilgiye ulaşmak için sayfa yüklendiğinde konu dışı başlık içeriğini kaydırarak geçebilir. İşlem, birden fazla gezinme bağlantısını veya sayfanın birincil içeriğinden önce gelen diğer kontrol öğelerini sekmeye ihtiyaç duyabilecek klavye kullanıcıları için kolaylaştırılmış değildir.

Geliştiriciler olarak, klavye kullanıcılarının sayfanın ana içeriğinden önce gelen kontrol öğelerini atlamasına izin vermek için uygulamamızdaki her sayfanın üst kısmına bir "bağlantıyı atla" sağlayabiliriz. Atlama bağlantısı, odaklanılana kadar tipik olarak görünümden gizlenir. Uygulamanızla etkileşim kurmak için fare kullanan kişiler tarafından görülmez, ancak klavye kullananlar için odaklanılan ilk öğe olacaktır.

Bağlantı tıklandığında, odak birincil içerik kapsayıcısına kayar ve klavye kullanıcıları bir sayfadaki ana kontrol öğeleri arasında hemen sekmeye başlayabilir.

Bağlantıları atla, kullanışlı kısayollardan daha fazlasıdır. Bunlar, A Düzeyi WCAG standartlarını karşılamak için gerekli olan baypas bloklarına bir örnektir.

Klavye kullanıcısı olarak uygulamanızı sık sık test edin

Klavye erişilebilirliğini test etme, yardımcı teknolojileri veya cihazları kullanmaya alışık olmayan kişiler için nispeten daha düşük bir öğrenme eğrisine sahiptir. İhtiyacınız olan tek şey bir klavyeye erişim, standart klavye davranışlarına aşinalık ve Windows yüksek karşıtlık moduna erişimdir (bir Windows cihazı edinerek veya bir sanal makine kurarak).

Uygulamamızı klavye erişilebilirliği açısından test ederken akılda tutulması gereken bazı sorular şunlardır:

• Fare tıklamalarına ve hareketlerine yanıt veren herhangi bir şeyle etkileşim kurmak için klavyemi kullanabilir miyim?
• Odaklandığında bu öğeyle nasıl etkileşim kurulacağını bilen var mı?
• Odak sırası, sayfadaki etkileşimli öğelerin görsel sıralamasıyla eşleşiyor mu?
• Renkler arasında daha yüksek kontrasta ihtiyaç duysam bile o anda hangi öğenin odakta olduğunu takip edebilir miyim?
• Sayfanın ana içeriğine kolayca ulaşabilir miyim?

Bu soruların tümüne "evet" yanıtı vermek çok fazla çaba gerektirmez ve kullanıcılar için her koşulda olumlu etkiler yaratabilir: ister fiziksel bir engelleri olsun, ister zamandan tasarruf etmenin yollarını arıyor veya kullanmaya ihtiyaç duysun. bilgisayarlarını tek elle.

Erişilebilirlik testi, uygulama geliştirmenin çok önemli bir bileşenidir. Spesifik olarak, klavye erişilebilirliği, ekran okuyucu kullanan kişiler için alternatif metin veya sesli içeriği duyamayan kişiler için altyazı sağlamak kadar önemlidir. Günün sonunda, uygulamanızın tamamen erişilebilir olmasını istiyorsanız, bir uygulamayı kullanmak için fare kullanabilmeniz gerekmez.