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 ile geliştirilmiş bazı genel erişilebilirlik kalıpları ve JavaScript çerçevelerinin kullanımından kaynaklanan erişilebilirlik sorunlarına yönelik çözümler 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 becerisi engelliler, fare veya dokunmatik yüzeyleri olmayan kişiler ve diğerleri gibi birçok kişi web ile etkileşimde bulunmak için klavye desteğine güvenir. 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 etkinlikleri eklenmesi 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, tek bir index.html dosyasından yüklenen tek sayfalık uygulamalar (SPA'lar) için özellikle önemlidir. Kullanıcılar SPA'da her yeni 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;");

Güç arttıkça sorumluluk da artar. 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 stiller eklemek yerine CSS sınıflarını açın/kapatın. Böylece yeniden kullanılabilirlik ve basitlik sağlanır. 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 içeriğin 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, kalıcı 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 (veya yönlendirme) arasında geçiş yaparken geliştirme ekibinin, sayfa yüklendiğinde odağın nereye gideceğine karar vermesi gerekir.

Bunu başarmak için çeşitli teknikler 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. Bu durum bağlama ya da eyleme bağlı olabilir.

Eyalet 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 özellik 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.

Alternatif olarak, 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 kritik bilgilerin aktarılması gerektiğini anlamak için kullanıcı akışını baştan sona 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'de 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 da bazen aşırı mühendislik çalışması ve dolayısıyla erişilemez kalıplara yol açar. Bu modüldeki JavaScript kalıplarını ve ipuçlarını izleyerek uygulamalarınızı tüm kullanıcılar için daha erişilebilir hale getirebilirsiniz.

Öğrendiklerinizi sınayın

JavaScript bilginizi test edin