Web geliştiricileri için erişilebilirlik

Erişilebilirliği artırmak, sitenizi herkes için daha kullanışlı hale getirir.

Addy Osmani

İpucu: Web geliştirme sürecinizi bir üst seviyeye taşıyabilmek için her zaman hazırladığımız Erişilebilirlik Öğrenimi kursuna ve referansa katılabilirsiniz.

Kapsayıcı ve herkesin erişebileceği siteler oluşturmak önemlidir. Optimize edebileceğiniz en az altı temel engellilik alanı vardır: görsel, işitme, hareketlilik, biliş, konuşma ve nöral. Web erişilebilirliği konusunda hiç deneyiminiz olmasa da pek çok araç ve kaynak size yardımcı olabilir.

Bir milyardan fazla insan bir tür engellilikle yaşıyor.

Sitelerin erişilebilir olması için farklı ekran boyutlarına ve ekran okuyucular gibi farklı giriş türlerine sahip birden fazla cihazda çalışması gerekir. Ayrıca, siteler engelliler de dahil olmak üzere en geniş kullanıcı grubu tarafından kullanılabilmelidir.

Kullanıcılarınızın sahip olabileceği engellerden bazıları şunlardır:

Görsel	İşitme	Hareket
Az görme Körlük Renk körlüğü Katarakt Güneş parlaması	İşitme zorluğu İşitme engeli Gürültü Kulak iltihabı	Omurilik yaralanması Sınırlı el becerisi Eller dolu
Bilişsel	Konuşma	Nöral
Öğrenme güçlüğü Uyku hali veya dikkat dağınıklığı Migren Otizm El koyma	Ortam gürültüsü Boğaz ağrısı Konuşma engeli Konuşamıyor	Depresyon TSSB Bipolar bozukluk Anksiyete

Görsel sorunlar, renkleri ayırt edememekten hiç görmemeye kadar çeşitlilik gösterir.

• Metin içeriğinin minimum kontrast oranı eşiğini karşıladığından emin olun.
• Sadece renk kullanarak bilgileri iletmekten kaçının ve tüm metnin resizable olduğundan emin olun.
• Tüm kullanıcı arayüzü bileşenlerinin ekran okuyucular, büyüteçler ve braille ekranlar gibi yardımcı teknolojilerle kullanılabildiğinden emin olun. Bunun için kullanıcı arayüzü bileşenlerinin, erişilebilirlik API'lerinin herhangi bir öğenin rol, durum, değer ve title özelliklerini programatik olarak belirleyebileceği şekilde işaretlenmesini gerektirir.

İpucu: Tarayıcıdaki öğe inceleme özelliği, renk kontrastı oranı için hızlı bir kontrol içeren CSS özellikleriyle ilgili bir ipucu gösterir.

Ben şahsi olarak az görenlerle yaşıyorum ve kendimi sık sık siteleri, Geliştirici Araçları'nı ve terminali yakınlaştırırken buluyorum. Yakınlaştırma özelliğinin desteklenmesi neredeyse hiçbir zaman geliştiricilerin yapılacaklar listelerinin en üstünde yer almasa da benim gibi kullanıcılar için büyük bir fark yaratabilir.

İşitme sorunları, kullanıcının bir sayfadaki sesi duymada sorun yaşayabileceği anlamına gelir.

• Tümüyle metin olmayan tüm içerik için metin alternatifleri sağlayın.
• Kullanıcı arayüzü bileşenlerinizin ses olmadan hâlâ çalışıp çalışmadığını test edin.

Hareket sorunları fare, klavye veya dokunmatik ekranı kullanamamayı içerebilir.

• Kullanıcı arayüzü bileşenlerinizin içeriğine, normalde fare kullanabileceğiniz tüm işlemler için klavyeden işlevsel olarak erişilebilmesini sağlayın.
• Sayfaların, aynı API'leri kullanma eğiliminde olan ekran okuyucular, sesli kontrol yazılımı ve fiziksel anahtar kontrolleri gibi yardımcı teknolojiler için doğru bir şekilde işaretlendiğinden emin olun.

Bilişsel sorunlar, kullanıcının metin okurken yardımcı olması için yardımcı teknolojilere ihtiyaç duyabileceği anlamına gelir. Bu nedenle, metin alternatiflerinin mevcut olması önemlidir.

• Animasyonları kullanırken dikkatli olun. Bazı kullanıcılar için sorunlara neden olabileceğinden tekrarlanan veya flash video ve animasyonlardan kaçının.

  prefers-reduced-motion CSS medya sorgusu, az hareket etmeyi tercih eden kullanıcılar için animasyonları ve otomatik oynatılan videoları sınırlamanıza olanak tanır:

  /*
  If the user expresses a preference for reduced motion, don't use animations on buttons.
  */
  @media (prefers-reduced-motion: reduce) {
    button {
      animation: none;
    }
  }
  

• Zamanlamaya dayalı etkileşimlerden kaçının.

Burada değinilmesi gereken çok fazla nokta varmış gibi görünebilir, ancak kullanıcı arayüzü bileşenlerinizin erişilebilirliğini değerlendirme ve iyileştirme sürecini adım adım açıklayacağız.

GOV.UK erişilebilirlik ekibi, daha fazla görsel destek sağlamak için en iyi uygulamaları ekibinizle paylaşmak üzere kullanabileceğiniz bir dizi erişilebilirlik için yapılması ve yapılmaması gereken dijital posterler hazırlamıştır.

Erişilebilirlikle ilgili en iyi uygulamaları listeleyen altı poster. Tam metni okuyun.

Kullanıcı arayüzü bileşeni erişilebilirliğini ölçme

Sayfanızın kullanıcı arayüzü bileşenlerini erişilebilirlik açısından denetlerken kendinize şunları sorun:

• Kullanıcı arayüzü bileşeninizi yalnızca klavyeyle kullanabiliyor musunuz?

  Bileşen, odağı yönetiyor ve odak noktası tuzaklarından kaçınıyor mu? Uygun klavye etkinliklerine yanıt verebiliyor mu?

• Kullanıcı arayüzü bileşeninizi ekran okuyucuyla kullanabiliyor musunuz?

  Görsel olarak sunulan bilgiler için metin alternatifleri sağladınız mı? ARIA'yı kullanarak semantik bilgi eklediniz mi?

• Kullanıcı arayüzü bileşeniniz ses olmadan çalışabiliyor mu?

  Hoparlörlerinizi kapatın ve kullanım alanlarınızı gözden geçirin.

• Kullanıcı arayüzü bileşeniniz renksiz çalışabiliyor mu?

  Kullanıcı arayüzü bileşeninizin, renkleri göremeyen biri tarafından kullanılabildiğinden emin olun. Colorblindly adlı bir Chrome uzantısı, renk körlüğünü simüle etmek için faydalı bir araç. (Mevcut dört renk körlüğü simülasyonu biçimini de deneyin.) Benzer şekilde kullanışlı olan Daltonize uzantısı da ilginizi çekebilir.

• Kullanıcı arayüzü bileşeniniz yüksek kontrast modu etkinken çalışabilir mi?

  Tüm modern işletim sistemleri, yüksek kontrast modunu destekler. Yüksek Kontrast bu konuda yardımcı olabilecek bir Chrome uzantısıdır.

Standartlaştırılmış kontrollerde (<button> ve <select> gibi) erişilebilirlik özelliği tarayıcıda yerleşik olarak bulunur. Tab tuşu kullanılarak odaklanabilir, klavye etkinliklerine (Enter, Space ve ok tuşları gibi) yanıt verir ve erişilebilirlik araçları tarafından kullanılan semantik rollere, durumlara ve özelliklere sahiptirler. Varsayılan stilleri, listelenen erişilebilirlik gereksinimlerini de karşılamalıdır.

Özel kullanıcı arayüzü bileşenlerinde (<button> gibi standart öğeleri genişleten bileşenler hariç) erişilebilirlik de dahil olmak üzere yerleşik özelliklere sahip olmadıklarından bu bileşenleri sağlamanız gerekir. Erişilebilirliği uygularken iyi bir başlangıç noktası, bileşeninizi analog bir standart öğeyle (veya bileşeninizin ne kadar karmaşık olduğuna bağlı olarak birkaç standart öğenin kombinasyonu) karşılaştırmaktır.

Çoğu tarayıcı geliştirici aracı, bir sayfanın erişilebilirlik ağacını denetlemeyi destekler. Chrome Geliştirici Araçları'nda bu özellik, Öğeler panelindeki Erişilebilirlik sekmesinde kullanılabilir.

Firefox'ta Erişilebilirlik paneli de vardır.

Safari, erişilebilirlik bilgilerini Öğeler panelinin Düğüm sekmesinde gösterir.

Aşağıda, kullanıcı arayüzü bileşenlerinizi daha erişilebilir hale getirmeye çalışırken kendinize sorabileceğiniz soruların bir listesi bulunmaktadır.

Klavye odağını iyileştirin

İdeal olarak, kullanıcı arayüzü bileşeninizdeki tüm işlevlere klavyeyle erişilebildiğinden emin olun. Kullanıcı deneyiminizi tasarlarken, öğenizi yalnızca klavye ile nasıl kullanacağınızı düşünün ve tutarlı bir klavye etkileşimleri grubu bulun.

Öncelikle, her bileşen için makul bir odaklanma hedefiniz olduğundan emin olun. Örneğin, menü gibi karmaşık bir bileşen, bir sayfadaki tek bir odak hedefi olabilir, ancak etkin menü öğesinin her zaman odaklanması için odağı kendi içinde yönetmelidir.

Odağı karmaşık bir öğe içinde yönetme.

Sekme dizinini kullan

tabindex özelliğiyle öğeler ve kullanıcı arayüzü bileşenleri için klavye odağı ekleyebilirsiniz. Yalnızca klavye kullanan ve yardımcı teknoloji kullanıcılarının klavyeden öğelerle etkileşimde bulunabilmeleri gerekir.

Yerleşik etkileşimli öğeler (<button> gibi) örtülü olarak odaklanılabilir. Bu nedenle, sekme sırasında konumlarını değiştirmeniz gerekmediği sürece bir tabindex özelliğine ihtiyaç duyulmaz.

Üç tür tabindex değeri vardır:

• tabindex="0" en yaygın olanıdır ve öğeyi doğal sekme sırasına yerleştirir (DOM sırası tarafından tanımlanır).
• 0'dan büyük bir tabindex değeri, öğeyi manuel sekme sırasına yerleştirir. Sayfada pozitif tabindex değerine sahip tüm öğeler, sayısal sırayla, doğal sekme sırasındaki öğelerden önce ziyaret edilir.
• -1'e eşit bir tabindex değeri, öğenin programlanabilir şekilde odaklanabilmesine neden olur ancak sekme sırasına göre konmaz.

Belirli bir sayfadaki öğelerin sırasını önceden belirleyemeyeceğiniz için özel kullanıcı arayüzü bileşenlerinde her zaman 0 veya -1 gibi tabindex değerleri kullanın. tabindex değeri, özellikle karmaşık bileşenlerdeki odağı yönetmek için yararlıdır.

Varsayılan odak halkası stilini kullanarak veya ayırt edilebilir bir özel odak stili uygulayarak odağın her zaman görünür olduğundan emin olun. Klavye kullanıcılarını tuzağa düşürmeyin. Yalnızca klavyeyi kullanarak odağı bir öğeden uzaklaştırabilmelidirler.

Not: MDN'de ele alınan uygun tabindex veya aria-activedescendant yaklaşımlarıyla da ilgilenebilirsiniz.

Otomatik odaklamayı kullanma

HTML otomatik odaklama özelliği, yazarın sayfa yüklendiğinde belirli bir öğeye otomatik olarak odaklanması gerektiğini belirtmesine olanak tanır. autofocus, düğmeler dahil tüm web formu kontrollerinde zaten desteklenmektedir. Kendi özel kullanıcı arayüzü bileşenlerinizdeki öğeleri otomatik odaklamak için odaklanılabilen tüm HTML öğelerinde (ör. document.querySelector('myButton').focus()) desteklenen focus() yöntemini çağırın.

Klavye etkileşimi ekle

Kullanıcı arayüzü bileşeniniz odaklanılabilir hale geldiğinde, bir bileşen uygun klavye etkinliklerini işleyerek odaklandığında iyi bir klavye etkileşimi hikayesi sağlayın. Örneğin, kullanıcının menü seçeneklerini belirlemek için ok tuşlarını ve düğmeleri etkinleştirmek için Space veya Enter tuşlarını kullanmasına izin verin. ARIA tasarım kalıpları kılavuzu bu konuda size yol gösterebilir.

Son olarak, klavye kısayollarınızın bulunabilir olduğundan emin olun. Yaygın bir uygulama, kullanıcıya kısayolların mevcut olduğunu bildirmek için bir klavye kısayolu açıklaması (ekran metni) kullanmaktır. Örneğin, "? için klavye kısayollarını kullanabilirsiniz." Alternatif olarak, kullanıcıyı bir kısayol hakkında bilgilendirmek için ipucu gibi bir ipucu kullanılabilir.

Odaklanmayı yönetmenin önemi yadsınamaz. Önemli bir örnek, gezinme çekmecesidir. Sayfaya bir kullanıcı arayüzü bileşeni eklerseniz, odağı içindeki bir öğeye yönlendirmeniz gerekir. Aksi takdirde, kullanıcıların buraya ulaşmak için sayfanın tamamında sekmeyle ilerlemesi gerekebilir. Bu can sıkıcı bir deneyim olabilir. Bu nedenle, sayfanızda klavyeyle gezilebilen tüm bileşenler için odağı test ettiğinizden emin olun.

İpucu: Kullanıcı arayüzü durumlarını açıp kapatmak için klavye erişilebilirlik testleri çalıştırmayı otomatik hale getirmek amacıyla Puppeteer aracını kullanabilirsiniz. WalkMe Engineering ile ilgili harika bir rehber okumanızı öneririm.

// Example for expanding and collapsing a category with the Space key
const category = await page.$(`.category`);

// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);

// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);

// toggle category by pressing Space
await page.keyboard.press('Space');

// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

Ekran okuyucunun başarılı şekilde kullanılmasını sağlama

Kullanıcıların yaklaşık% 1 ila% 2'si ekran okuyucu kullanıyor. Yalnızca ekran okuyucuyu ve klavyeyi kullanarak tüm önemli bilgileri anlayabiliyor ve bileşenle etkileşimde bulunabiliyor musunuz?

Aşağıdaki sorular, ekran okuyucu erişilebilirliğini ele almanıza yardımcı olacaktır.

Tüm bileşenlerin ve resimlerin anlamlı metin alternatifleri var mı?

Etkileşimli bir bileşenin adı veya amacı ile ilgili bilgilerin görsel olarak iletildiği her durumda, erişilebilir bir metin alternatifi sağlayın.

Örneğin, <fancy-menu> kullanıcı arayüzü bileşeniniz yalnızca bunun bir ayarlar menüsü olduğunu belirten bir dişli simgesi görüntülüyorsa aynı bilgileri ileten, erişilebilir bir metin alternatifine (ör. "ayarlar") ihtiyacı vardır. Bağlama bağlı olarak, alt özelliği, aria-label özelliği, aria-labelledby özelliği veya Gölge DOM'de düz metin kullanarak bir metin alternatifi sağlayabilirsiniz. Genel teknik ipuçlarını WebAIM Hızlı Başvuru bölümünde bulabilirsiniz.

Bir resim görüntüleyen kullanıcı arayüzü bileşenleri, söz konusu resim için alt özelliğine benzer şekilde alternatif metin sağlayan bir mekanizma sağlamalıdır.

Bileşenleriniz anlamsal bilgi sağlıyor mu?

Yardımcı teknoloji, görme engelli kullanıcılara biçimlendirme, imleç stili veya konum gibi görsel ipuçlarıyla ifade edilen anlamsal bilgileri iletir. Standartlaştırılmış öğeler bu anlamsal bilgileri tarayıcıda yerleşik olarak içerir, ancak özel bileşenlerde bilgi eklemek için ARIA'yı kullanmanız gerekir.

Genel olarak, fareyle tıklama veya fareyle üzerine gelme etkinliğini dinleyen tüm bileşenlerin bir tür klavye etkinliği işleyicisi ve bir ARIA rolü (muhtemelen ARIA durumları ve özellikleri) olmalıdır.

Örneğin, özel bir <fancy-slider> kullanıcı arayüzü bileşeni, bazı ilgili ARIA özelliklerine sahip olan kaydırma çubuğu ARIA rolünü alabilir: aria-valuenow, aria-valuemin ve aria-valuemax. Bu özellikleri özel bileşeninizdeki ilgili özelliklere bağlayarak yardımcı teknoloji kullanıcılarının öğeyle etkileşimde bulunmasına, değerini değiştirmesine ve hatta öğenin görsel sunumunun buna göre değişmesine olanak tanıyabilirsiniz.

Aralık kaydırma çubuğu bileşeni.

<fancy-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</fancy-slider>

Kullanıcılar renge güvenmeden her şeyi anlayabiliyor mu?

Renk; durum belirtme, kullanıcıdan yanıt isteme veya verileri görselleştirme gibi bilgi aktarmanın tek yolu olarak kullanılmamalıdır. Örneğin, pasta grafiğiniz varsa her bir dilim için etiketler ve değerler sağlayın. Böylece, görme bozukluğu olan kullanıcılar, dilimlerin nerede başlayıp nerede biteceğini göremeseler bile bilgileri anlayabilirler:

Erişilebilir bir pasta grafik. (W3C Web Accessibility Initiative'den (W3C Web Erişilebilirlik Girişimi) tıklayın.)

Yeterli kontrast var mı?

Bileşeninizde görüntülenen tüm metin içerikleri, minimum WCAG AA seviyesi kontrast eşiğini karşılamalıdır. Daha yüksek AAA eşiğini karşılayan yüksek kontrastlı bir tema sağlamayı düşünün ve kullanıcılar özel kontrast veya farklı renkler gerektiriyorsa kullanıcı aracısı stil sayfalarının uygulanabildiğinden emin olun. Bileşeninizi tasarlarken bu Renk Kontrast Denetleyicisi'ni yardımcı olarak kullanabilirsiniz.

Hareketli veya yanıp sönen içerik durdurulabilir ve güvenli mi?

Kullanıcılar beş saniyeden uzun süre hareket eden, kaydıran veya yanıp sönen içerikleri duraklatabilmeli, durdurabilmeli veya gizleyebilmelidir. Genel olarak, yanıp sönen içerik kullanmaktan kaçının.

Bir şeyin yanıp sönmesi gerekiyorsa saniyede üç defadan fazla yanıp sönmediğinden emin olun.

Erişilebilirlik araçları ve testleri

Sitenizin ve bileşenlerini değerlendirmenizi sağlayan 100'den fazla araç mevcuttur. Bazı araçlar otomatikken, bazıları manuel test gerektirir.

Dikkate almanız için birkaç örneği aşağıda bulabilirsiniz:

• Axe, seçtiğiniz çerçeve veya tarayıcı için otomatik erişilebilirlik testi sunar. Axe Puppeteer, otomatik erişilebilirlik testleri yazmak için kullanılabilir.

• Lighthouse Erişilebilirlik denetimi, yaygın erişilebilirlik sorunlarının keşfedilmesi için yararlı bilgiler sağlar. Erişilebilirlik puanı, Axe kullanıcı etkisi değerlendirmelerine dayalı tüm erişilebilirlik denetimlerinin ağırlıklı ortalamasıdır. Sürekli entegrasyonla erişilebilirliği izlemek için Lighthouse CI'ya bakın.

  

• Tenon.io, yaygın erişilebilirlik sorunlarını test etmek için kullanışlıdır. Tenon; derleme araçları, tarayıcılar (uzantılar aracılığıyla) ve hatta metin düzenleyiciler genelinde güçlü entegrasyon desteğine sahiptir.

• Bileşenlerdeki erişilebilirlik sorunlarını vurgulamak için çok sayıda kitaplığa ve çerçeveye özel araç bulunur. Örneğin, düzenleyicinizde React bileşenleriyle ilgili erişilebilirlik sorunlarını vurgulamak için eslint-plugin-jsx-a11y kullanabilirsiniz.

  

  Angular kullanıyorsanız codelyzer, düzenleyici içi erişilebilirlik denetimleri de sağlar:

  

Yardımcı teknolojilerle çalışma

İpucu: Yardımcı Teknoloji testinin nasıl yapılacağını öğrenin.

• Accessibility Inspector (Mac) veya Windows Automation API Test Araçları ve AccProbe'yu (Windows) kullanarak yardımcı teknolojilerin web içeriğini görme şeklini inceleyebilirsiniz. about://accessibility sayfasına giderek Chrome'un oluşturduğu erişilebilirlik ağacının tamamını da görebilirsiniz.
• Mac'te ekran okuyucu desteğini test etmenin en iyi yolu VoiceOver yardımcı programını kullanmaktır. Bunu etkinleştirmek veya devre dışı bırakmak için ⌘F5, sayfada ilerlemek için Ctrl+Option ←→ ve erişilebilirlik ağacında yukarı ve aşağı gitmek için Ctrl+Shift+Option + ↑↓ tuşlarını kullanın. Daha ayrıntılı talimatlar için VoiceOver komutlarının tam listesine ve VoiceOver Web komutlarının listesine bakın.

• NVDA ücretsiz ve açık kaynaklı bir ekran okuyucudur. Windows'da Ancak, gören kullanıcılar için zorlu bir öğrenme eğrisine sahiptir.

  

• ChromeOS'te yerleşik bir ekran okuyucu vardır.

Web'de erişilebilirliği iyileştirmek için alacağımız çok yol var. Web Almanağı'na göre:

• Her 5 siteden 4'ünde, arka planla uyumlu metinler bulunduğu için okunamaz hale gelir.
• Sayfaların% 49,91'i bazı resimleri için hâlâ alt özelliklerini sağlayamıyor.
• Düğme veya bağlantı kullanan sayfaların yalnızca% 24'ünde etiket vardır.
• Sayfaların yalnızca% 22,33'ünde tüm form girişleri için etiket sağlanır.

Herkes için daha erişilebilir deneyimler oluşturmak için yapabileceğimiz çok şey var.

İpucu: Erişilebilirlikle ilgili temel bilgiler hakkında daha fazla bilgi edinmek ve bu istatistikleri iyileştirmeye yardımcı olmak için Herkes için erişilebilir ve Erişilebilirlik hakkında bilgi edinme başlıklı makaleleri inceleyin.