JavaScript

JavaScript, küçük dinamik bileşenlerden React veya Angular gibi bir JavaScript çerçevesinde çalışan tam ürünlere kadar neredeyse her şeyde önemli bir rol oynar.

JavaScript'in bu şekilde kullanılması (veya aşırı kullanılması), büyük miktarda kod nedeniyle uzun yükleme süreleri, anlamsal olmayan HTML öğelerinin kullanılması ve JavaScript aracılığıyla HTML ve CSS'nin eklenmesi gibi birçok endişe verici eğilimi ortaya çıkardı. Ayrıca erişilebilirliğin bu parçaların her birine nasıl uyduğundan emin olmayabilirsiniz.

JavaScript, sitenizin erişilebilirliği üzerinde büyük bir etkiye sahip olabilir. Bu modülde, JavaScript tarafından geliştirilen erişilebilirlik ile ilgili bazı genel kalıpların yanı sıra JavaScript çerçevelerinin kullanılmasından kaynaklanan erişilebilirlik sorunlarına yönelik çözümleri paylaşacağız.

Tetikleyici etkinlikler

JavaScript etkinlikleri, kullanıcıların web içeriğiyle etkileşime geçmesine ve belirli bir işlem gerçekleştirmesine olanak tanır. Ekran okuyucu kullanıcıları, ince motor becerileriyle ilgili sorunları olan kişiler, fare veya dokunmatik yüzeyi olmayan kişiler gibi pek çok kullanıcı web'le etkileşimde bulunmak için klavye desteğinden yararlanır. Bu kullanıcıların tümünü etkilediği için JavaScript işlemlerinize klavye desteği eklemeniz önemlidir.

Bir tıklama etkinliğine bakalım. <button> veya <a> gibi semantik bir HTML öğesinde onClick() etkinliği kullanılıyorsa bu etkinlik doğal olarak hem fare hem de klavye işlevini içerir. Ancak, genel bir <div> gibi anlamsal olmayan bir öğeye onClick() etkinliği eklendiğinde klavye işlevi otomatik olarak uygulanmaz.

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

Bu karşılaştırmayı CodePen'de önizleyebilirsiniz.

Bir tetikleyici etkinliği için anlamsal olmayan bir öğe kullanılıyorsa enter veya boşluk tuşuna basıldığını algılamak için bir keydown/keyup etkinliği eklenmelidir. Anlamsal olmayan öğelere tetikleyici etkinlikler eklemek genellikle unutulur. Maalesef bu işlem unutulduğunda, yalnızca fareyle erişilebilen bir bileşen ortaya çıkar. Yalnızca klavye kullanan kullanıcılar, ilişkili işlemlere erişemez.

Sayfa başlıkları

Belge modülünde öğrendiğimiz gibi, sayfa başlığı ekran okuyucu kullanıcıları için çok önemlidir. Kullanıcılara hangi sayfada olduklarını ve yeni bir sayfaya gidip gitmediklerini bildirir.

JavaScript çerçevesi kullanıyorsanız sayfa başlıklarını nasıl işlediğinizi göz önünde bulundurmanız gerekir. Geçişler veya yollar (sayfa değişiklikleri) sayfayı yeniden yüklemeyi içermediğinden bu, özellikle tek bir index.html dosyasından yüklenen tek sayfalık uygulamalar (SPA'lar) için önemlidir. Bir kullanıcı SPA'da yeni bir sayfa yüklediğinde başlık varsayılan olarak değişmez.

SPA'lar için document.title değeri manuel olarak veya yardımcı paketle (JavaScript çerçevesine bağlı olarak) eklenebilir. Güncellenen sayfa başlıklarını ekran okuyucu kullanıcılarına duyurmak biraz daha fazla çalışma gerektirebilir. Ancak dinamik içerik gibi seçenekleriniz de var.

Dinamik içerik

JavaScript'in en güçlü işlevlerinden biri, sayfadaki herhangi bir öğeye HTML ve CSS ekleme olanağıdır. Geliştiriciler, kullanıcıların işlemlerine veya davranışlarına göre dinamik uygulamalar oluşturabilir.

Web sitenizde veya uygulamanızda oturum açtıklarında kullanıcılara bir mesaj göndermeniz gerektiğini varsayalım. Mesajın beyaz arka plandan öne çıkmasını ve "Artık oturum açtınız" mesajını iletmesini istiyorsunuz.

İçeriği ayarlamak için innerHTML öğesini kullanabilirsiniz:

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

CSS'yi setAttribute ile benzer şekilde uygulayabilirsiniz:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Büyük güç büyük sorumluluk getirir. Maalesef HTML ve CSS'ye JavaScript ekleme özelliği, erişilemeyen içerikler oluşturmak için geçmişte kötüye kullanılmıştır. Yaygın olarak yanlış kullanılan bazı yöntemler aşağıda listelenmiştir:

CSS için satır içi stil eklemek yerine CSS sınıflarını değiştirin. Bu, yeniden kullanılabilirlik ve basitlik sağlar. Sayfadaki gizli içeriği kullanın ve dinamik HTML için içeriği gizlemek ve göstermek üzere sınıfları değiştirin. Sayfanıza dinamik olarak içerik eklemek için JavaScript kullanmanız gerekiyorsa basit, öz ve tabii ki erişilebilir olduğundan emin olun.

Odak yönetimi

Klavye odak modülünde, odak sırasını ve gösterge stillerini ele aldık. Odak yönetimi, odağı ne zaman ve nerede kilitlemeniz gerektiğini ve ne zaman kilitlememenizi gerektiğini bilmektir.

Odak yönetimi, yalnızca klavye kullanan kullanıcılar için çok önemlidir.

Bileşen düzeyi

Bir bileşenin odağı düzgün şekilde yönetilmediğinde klavye tuşlarına takılmalar oluşturabilirsiniz. Klavye tuşlarını kullanan bir kullanıcı bir bileşende takıldığında veya odak olması gerektiğinde korunmadığında klavye tuzağı oluşur.

Kullanıcıların odak yönetimi sorunları yaşadığı en yaygın kalıplardan biri modal bileşendir. Yalnızca klavye kullanan bir kullanıcı modal pencereyle karşılaştığında, modal pencerenin işlevsel öğeleri arasında Sekme tuşuyla geçiş yapabilmelidir ancak modal pencereyi açıkça kapatmadan hiçbir zaman modal pencerenin dışına çıkmasına izin verilmemelidir. Bu odağı düzgün bir şekilde yakalamak için JavaScript gereklidir.

Sayfa düzeyi

Kullanıcı sayfalar arasında gezinirken de odak korunmalıdır. Bu durum özellikle tarayıcının yenilenmediği ve tüm içeriğin dinamik olarak değiştiği SPA'larda geçerlidir. Kullanıcılar uygulamanızdaki başka bir sayfaya gitmek için bir bağlantıyı tıkladığında odak ya aynı yerde tutulur ya da tamamen başka bir yere yerleştirilir.

Sayfalar arasında geçiş yaparken (veya yönlendirme yaparken) geliştirme ekibi, sayfa yüklendiğinde odağın nereye gideceğine karar vermelidir.

Bunu yapmanın birden çok yolu vardır:

• Odağı, aria-live duyurusu içeren ana kapsayıcıya yerleştirin.
• Ana içeriğe atlamak için odağı bir bağlantıya geri getirin.
• Odağı yeni sayfanın üst düzey başlığına taşıyın.

Odak noktanızı nereye koyacağınız, kullandığınız çerçeveye ve kullanıcılarınıza sunmak istediğiniz içeriğe bağlıdır. Bağlama veya işleme bağlı olabilir.

Durum yönetimi

JavaScript'in erişilebilirlik açısından kritik olduğu bir diğer alan da durum yönetimidir. Bu durum, bir bileşenin veya sayfanın mevcut görsel durumunun az gören, görme engelli veya sağır ve kör yardımcı teknoloji kullanıcısına aktarılmasında ortaya çıkar.

Bir bileşenin veya sayfanın durumu genellikle ARIA ve HTML modülünde açıklandığı gibi ARIA özellikleri aracılığıyla yönetilir. Bir öğenin durumunu yönetmeye yardımcı olmak için kullanılan en yaygın ARIA özelliği türlerinden birkaçına göz atalım.

Bileşen düzeyi

Sayfa içeriğinize ve kullanıcılarınızın ihtiyaç duyduğu bilgilere bağlı olarak, bir bileşenle ilgili bilgileri kullanıcıya aktarırken dikkate alınması gereken birçok ARIA durumu vardır.

Örneğin, kullanıcıya bir açılır menünün veya listenin genişletilmiş mi yoksa daraltılmış mı olduğunu bildirmek için bir aria-expanded özelliği kullanabilirsiniz.

Bir düğmeye basıldığını belirtmek için aria-pressed simgesini de kullanabilirsiniz.

ARIA özelliklerini uygularken seçici olmak önemlidir. Kullanıcıya hangi önemli bilgilerin iletilmesi gerektiğini anlamak için kullanıcı akışını düşünün.

Sayfa düzeyi

Geliştiriciler, ekrandaki değişiklikleri ve uyarı mesajlarını yardımcı teknoloji (AT) kullanıcılarına duyurmak için genellikle ARIA canlı bölgesi adlı görsel olarak gizli bir alanı kullanır. Bu alan, sayfanın tamamının yeniden yüklenmesi gerekmeden kullanıcıları sayfada yapılan dinamik değişikliklerden haberdar etmek için JavaScript ile birlikte kullanılabilir.

JavaScript, dinamik yapısı nedeniyle geçmişte aria-live ve uyarı bölgelerinde içerik yayınlamakta zorlandı. DOM'e içerik ekleme işleminin eşzamanlı olmaması, AT'nin bölgeyi algılamasını ve duyurmasını zorlaştırır. İçeriğin düzgün bir şekilde okunabilmesi için canlı veya uyarı bölgesi, yükleme sırasında DOM'da olmalıdır. Ardından metin dinamik olarak değiştirilebilir.

JavaScript çerçevesi kullanıyorsanız iyi haber şudur: Çerçevelerin neredeyse tamamında, tüm işi sizin yerinize yapan ve tamamen erişilebilir bir "canlı spiker" paketi bulunur. Canlı bir bölge oluşturma ve önceki bölümde açıklanan sorunlarla uğraşma konusunda endişelenmenize gerek yoktur.

Yaygın JavaScript çerçeveleri için bazı canlı paketler aşağıda verilmiştir:

• React: react-aria-live ve react-a11y-announcer
• Açısal: LiveAnnouncer
• Vue: vue-a11y-utils

Modern JavaScript, web geliştiricilerin güçlü web uygulamaları oluşturmasına olanak tanıyan güçlü bir dildir. Bu durum bazen aşırı mühendislik ve dolayısıyla erişilemeyen kalıplara yol açar. Bu modüldeki JavaScript kalıplarını ve ipuçlarını uygulayarak uygulamalarınızı tüm kullanıcılar için daha erişilebilir hale getirebilirsiniz.

Öğrendiklerinizi test etme

JavaScript bilginizi test edin