JavaScript

JavaScript, daha küçük dinamik bileşenlerden React veya Angular gibi bir JavaScript çerçevesi üzerinde çalışan tam ürünlere kadar, oluşturduğumuz hemen hemen her şeyde önemli bir rol oynar.

JavaScript'in bu kullanımı (veya aşırı kullanımı), büyük miktarda kod nedeniyle uzun yükleme süreleri, anlamsız HTML öğelerinin kullanımı ve JavaScript yoluyla HTML ve CSS yerleştirilmesi gibi endişe verici birçok trendi beraberinde getirmiştir. Erişilebilirliğin bu parçaların her birine nasıl sığacağından emin olamayabilirsiniz.

JavaScript'in, sitenizin erişilebilirliği üzerinde büyük bir etkisi olabilir. Bu modülde, JavaScript tarafından iyileştirilmiş erişilebilirlikle ilgili bazı genel kalıpları ve JavaScript çerçevelerinin kullanılmasından kaynaklanan erişilebilirlik sorunlarının çözümlerini paylaşacağız.

Tetikleyici etkinlikler

JavaScript etkinlikleri, kullanıcıların web içeriğiyle etkileşim kurmasına ve belirli bir işlemi gerçekleştirmesine olanak tanır. Ekran okuyucu kullanıcıları, ince motor becerisi engelli kişiler, faresi veya dokunmatik yüzeyi olmayan kişiler gibi pek çok kişi web ile etkileşimde bulunmak için klavye desteğine ihtiyaç duyar. Tüm bu kullanıcıları etkilediğinden, JavaScript işlemlerinize klavye desteği eklemeniz çok önemlidir.

Bir tıklama etkinliğine göz atalım. onClick() etkinliği, <button> veya <a> gibi anlamsal bir HTML öğesinde kullanılıyorsa bu etkinlik doğal olarak hem fare hem de klavye işlevlerini içerir. Bununla birlikte, genel <div> gibi anlamsız 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 etkinlik için anlamsal olmayan bir öğe kullanılırsa 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. Ne yazık ki, unutulduğunda ortaya çıkan sonuç, yalnızca fare ile erişilebilen bir bileşendir. 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 gereklidir. Kullanıcılara hangi sayfada olduklarını ve yeni bir sayfaya gidip gitmediklerini bildirir.

Bir JavaScript çerçevesi kullanıyorsanız sayfa başlıklarını nasıl ele aldığınızı göz önünde bulundurmanız gerekir. Bu, özellikle geçişler veya rotalar (sayfa değişiklikleri) bir sayfanın yeniden yüklenmesini gerektirmeyeceğinden 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 bir yardımcı paketle (JavaScript çerçevesine bağlı olarak) eklenebilir. Güncellenen sayfa başlıklarını ekran okuyucu kullanıcılarına duyurmak için ek çalışma gerekebilir. Ancak dinamik içerik gibi seçenekleriniz mevcuttur.

Dinamik içerik

En güçlü JavaScript işlevlerinden biri, sayfadaki herhangi bir öğeye HTML ve CSS eklenebilmesidir. Geliştiriciler, kullanıcıların eylemlerini veya davranışlarını temel alarak dinamik uygulamalar oluşturabilir.

Kullanıcılar web sitenize veya uygulamanıza giriş yaptıklarında onlara bir mesaj göndermeniz gerektiğini varsayalım. Mesajın beyaz arka plan üzerinde öne çıkmasını ve "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 logged in</p>';

CSS'yi setAttribute ile benzer bir şekilde uygulayabilirsiniz:

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

Büyük güç, büyük sorumluluğu da beraberinde getirir. Ne yazık ki, HTML ve CSS'ye JavaScript yerleştirme işlevi, geçmişte erişilemeyen içerik oluşturmak için kötüye kullanılıyordu. Yaygın hatalı kullanımlardan bazıları aşağıda listelenmiştir:

CSS için satır içi stiller eklemek yerine CSS sınıflarını açıp kapatın. Bu, yeniden kullanılabilirlik ve basitliğe olanak tanır. Sayfadaki gizli içeriği kullanın ve dinamik HTML için içeriği gizlemek ve göstermek üzere sınıfları açıp kapatın. Sayfanıza dinamik olarak içerik eklemek için JavaScript'i kullanmanız gerekiyorsa içeriğin basit, kısa ve elbette erişilebilir olduğundan emin olun.

Odak yönetimi

Klavye odak modülünde odak sırası ve gösterge stillerini ele aldık. Odak yönetimi, odak noktasının ne zaman ve nerede kapanacağını ve ne zaman sıkışmayacağını bilmektir.

Odak yönetimi, yalnızca klavye kullanan kullanıcılar için kritik öneme sahiptir.

Bileşen düzeyi

Bir bileşenin odağı düzgün yönetilmediğinde klavye tuzakları oluşturabilirsiniz. Yalnızca klavye kullanıcısı bir bileşende sıkışıp kaldığında veya odak noktası olması gereken zamanda korunamadığında klavye tuzağı oluşur.

Kullanıcıların odak yönetimi sorunları yaşadığı en yaygın kalıplardan biri kalıcı bileşenlerdedir. Yalnızca klavye kullanan bir kullanıcı bir modla karşılaştığında, kalıcı iletişim öğeleri arasında sekme seçebilmelidir. Ancak, özel olarak kapatılmadan kalıcı iletişimin dışında kalmalarına asla izin verilmemelidir. Bu odağın düzgün şekilde yakalanması için JavaScript gereklidir.

Sayfa düzeyi

Kullanıcı sayfadan sayfaya gezinirken de odak korunmalıdır. Bu, özellikle tarayıcının yenilenmediği ve tüm içeriğin dinamik olarak değiştiği SPA'larda geçerlidir. Bir kullanıcı, uygulamanızdaki başka bir sayfaya gitmek için bir bağlantıyı her 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 ekibi sayfa yüklendiğinde odağın nereye gideceğine karar vermelidir.

Bunu başarmak için çeşitli teknikler vardır:

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

Nerede odaklanmaya karar vereceğiniz, kullandığınız çerçeveye ve kullanıcılarınıza sunmak istediğiniz içeriğe bağlıdır. Bağlama veya eyleme bağlı olabilir.

Eyalet yönetimi

JavaScript'in erişilebilirlik açısından kritik öneme sahip olduğu bir başka alan da durum yönetimi veya bir bileşenin ya da sayfanın mevcut görsel durumunun az gören, kör veya sağduyulu yardımcı teknoloji kullanıcılarına aktarıldığı bir alandır.

Genellikle bir bileşenin veya sayfanın durumu, ARIA ve HTML modülünde tanıtıldığı gibi ARIA özellikleriyle 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

Sayfanızın içeriğine ve kullanıcılarınızın ihtiyaç duyduğu bilgilere bağlı olarak, bir bileşen hakkında kullanıcıya bilgi aktarırken göz önünde bulundurulması gereken birçok ARIA durumu vardır.

Örneğin, kullanıcıya bir açılır menünün veya listenin genişletilip daraltıldığını belirtmek için aria-expanded özelliğini kullanabilirsiniz.

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

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

Sayfa düzeyi

Geliştiriciler genellikle ekrandaki değişiklikleri duyurmak ve yardımcı teknoloji (AT) kullanıcılarına uyarı mesajlarını vermek için ARIA canlı bölgesi adı verilen, görsel olarak gizli bir alanı kullanırlar. Bu alan, tüm sayfanın yeniden yüklenmesine gerek kalmadan, kullanıcılara sayfadaki dinamik değişiklikleri bildirmek için JavaScript ile eşlenebilir.

JavaScript, dinamik yapısı nedeniyle geçmişte aria-live'teki içerikleri duyurmak ve bölgelerde uyarı vermekte zorlanıyordu. DOM'ye eşzamansız olarak içerik eklemek, AT'nin bölgeyi alıp duyurmasını zorlaştırır. İçeriğin düzgün şekilde okunabilmesi için canlı veya uyarı bölgesinin yükleme sırasında DOM'da olması gerekir. Daha sonra, metin dinamik olarak değiştirilebilir.

Bir JavaScript çerçevesi kullanıyorsanız, neredeyse hepsi sizin için tüm işleri yapan ve tamamen erişebileceğiniz bir "canlı duyurucı" paketine sahiptir. Canlı bölge oluşturma ve önceki bölümde açıklanan sorunlarla ilgilenme konusunda endişelenmenize gerek yoktur.

Yaygın JavaScript çerçeveleri için bazı canlı paketleri burada bulabilirsiniz:

• Tepki: react-aria-live ve react-a11y-anuncer
• Açı: LiveAnnouncer
• Vue: vue-a11y-utils

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

Öğrendiklerinizi sınayın

JavaScript bilginizi test edin