JavaScript, daha küçük dinamik bileşenlerden React veya Angular gibi bir JavaScript çerçevesinde çalışan tam ürünlere kadar oluşturduğumuz neredeyse her şeyde önemli bir rol oynar.
JavaScript'in bu şekilde kullanılması (veya aşırı kullanılması), çok sayıda kod nedeniyle uzun yükleme süreleri, anlamsal olmayan HTML öğelerinin kullanılması ve JavaScript aracılığıyla HTML ve CSS'nin yerleştirilmesi gibi birçok endişe verici trendi ortaya çıkardı. Ayrıca, erişilebilirliğin bu parçaların her birine nasıl uyduğunu da merak ediyor olabilirsiniz.
JavaScript, sitenizin erişilebilirliği üzerinde büyük bir etkiye sahip olabilir. Bu modülde, JavaScript ile geliştirilen erişilebilirlikle ilgili bazı genel kalıpların yanı sıra JavaScript çerçevelerinin kullanılması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şlemi gerçekleştirmesine olanak tanır. Ekran okuyucu kullanıcıları, ince motor becerileriyle ilgili engelleri olan kişiler, fare veya dokunmatik yüzey olmayan kişiler gibi birçok kullanıcı, web ile etkileşim kurmak için klavye desteğine ihtiyaç duyar. Bu kullanıcıların tümünü etkilediği için JavaScript işlemlerinize klavye desteği eklemeniz çok önemlidir.
Şimdi bir tıklama etkinliğine bakalım.
<button> veya <a> gibi bir semantik HTML öğesinde onClick() etkinliği kullanılıyorsa hem fare hem de klavye işlevlerini doğal olarak içerir. Ancak, klavye işlevselliği, onClick() etkinliği
anlamsal olmayan bir öğeye (ör. genel bir <div>) eklendiğinde 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 önizleyin.
Tetikleyici etkinlik için anlamsal olmayan bir öğe kullanılıyorsa Enter veya boşluk tuşuna basıldığını algılamak için keydown/keyup etkinliği eklenmelidir. Tetikleyici etkinliklerin anlamsal olmayan öğelere eklenmesi genellikle unutulur. Ancak bu unutulduğunda sonuç, yalnızca fareyle erişilebilen bir bileşen olur. Yalnızca klavye kullananlar, ilişkili işlemlere erişemez.
Sayfa başlıkları
Doküman 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.
Bir JavaScript çerçevesi kullanıyorsanız sayfa başlıklarını nasıl işlediğinizi göz önünde bulundurmanız gerekir. Bu durum, özellikle tek bir index.html dosyasından yüklenen tek sayfalık uygulamalar (SPA'lar) için önemlidir. Çünkü geçişler veya rotalar (sayfa değişiklikleri) sayfanın yeniden yüklenmesini gerektirmez. Bir kullanıcı, tek sayfa uygulamasında yeni bir sayfa yüklediğinde başlık varsayılan olarak değişmez.
Tek sayfa uygulamalarında document.title değeri manuel olarak veya yardımcı bir paketle (JavaScript çerçevesine bağlı olarak) eklenebilir. Ekran okuyucu kullanan bir kullanıcıya güncellenen sayfa başlıklarını duyurmak biraz daha fazla çalışma gerektirebilir ancak iyi haber şu ki dinamik içerik gibi seçenekleriniz var.
Dinamik içerik
En güçlü JavaScript işlevlerinden biri, sayfadaki herhangi bir öğeye HTML ve CSS ekleme özelliğidir. Geliştiriciler, kullanıcıların işlemlerine veya davranışlarına göre dinamik uygulamalar oluşturabilir.
Kullanıcılar web sitenize veya uygulamanıza giriş yaptığında onlara bir mesaj göndermeniz gerektiğini varsayalım. Mesajın beyaz arka plandan ayrılmasını ve "Oturumunuz açıldı." mesajını iletmesini istiyorsunuz.
İçeriği ayarlamak için şu öğeyi kullanabilirsiniz:
innerHTML
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
CSS'yi benzer şekilde uygulayabilirsiniz. Bunun için
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Büyük güç, büyük sorumluluk getirir. Maalesef, HTML ve CSS'nin JavaScript ile yerleştirilmesi, geçmişte erişilemeyen içerikler oluşturmak için kötüye kullanılmıştır. Yaygın olarak yapılan bazı hatalı kullanımlar aşağıda listelenmiştir:
| Olası kötüye kullanım | Doğru kullanım |
|---|---|
| Semantik olmayan HTML'nin büyük bölümlerini oluşturma | Daha küçük semantik HTML parçaları oluşturma |
| Dinamik içeriğin yardımcı teknoloji tarafından tanınması için yeterli süre tanınmaması | Kullanıcıların mesajın tamamını duymasına izin vermek için setTimeout() zaman gecikmesi kullanma |
onFocus() için stil özelliklerini dinamik olarak uygulama |
CSS stil sayfanızdaki ilgili öğeler için :focus kullanın. |
| Satır içi stillerin uygulanması, kullanıcı stil sayfalarının düzgün şekilde okunmamasına neden olabilir. | Temanın tutarlılığını korumak için stillerinizi CSS dosyalarında tutun. |
| Genel site performansını yavaşlatan çok büyük JavaScript dosyaları oluşturma | Daha az JavaScript kullanın. CSS'de benzer işlevleri (ör. animasyonlar veya sabit gezinme) daha hızlı ayrıştırılan ve daha iyi performans gösteren şekilde gerçekleştirebilirsiniz. |
CSS için satır içi stiller eklemek yerine CSS sınıflarını değiştirin. Bu, yeniden kullanılabilirliği ve basitliği sağlar. Sayfada gizli içerik kullanın ve dinamik HTML'de içeriği gizlemek ve göstermek için sınıfları değiştirin. Sayfanıza dinamik olarak içerik eklemek için JavaScript kullanmanız gerekiyorsa kodun basit ve kısa olduğundan, ayrıca erişilebilir olduğundan emin olun.
Odak yönetimi
Klavye odağı modülünde odak sırası ve gösterge stillerini ele aldık. Odak yönetimi, odağın ne zaman ve nerede yakalanacağını, ne zaman yakalanmaması gerektiğini bilmektir.
Yalnızca klavye kullananlar için odak yönetimi çok önemlidir.
Bileşen düzeyi
Bir bileşenin odağı düzgün şekilde yönetilmediğinde klavye tuzakları oluşturabilirsiniz. Yalnızca klavye kullanan bir kullanıcı bir bileşene takıldığında veya odak korunması gerektiği halde 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ı, bir modal ile karşılaştığında modalın üzerinde işlem yapılabilir öğeler arasında sekme tuşuyla geçiş yapabilmelidir. Ancak modal açıkça kapatılmadan modalın dışına çıkmasına asla izin verilmemelidir. Bu odağın düzgün şekilde yakalanması için JavaScript gereklidir.
Sayfa düzeyi
Kullanıcı sayfalar arasında gezinirken de odak korunmalıdır. Bu durum, tarayıcı yenileme işleminin olmadığı ve tüm içeriğin dinamik olarak değiştiği tek sayfa uygulamalarında özellikle geçerlidir. Bir kullanıcı uygulamanızda başka bir sayfaya gitmek için bir bağlantıyı tıkladığında odak aynı yerde kalır veya tamamen başka bir yere yerleştirilebilir.
Sayfalar arasında geçiş yapılırken (veya yönlendirme yapılırken) geliştirme ekibi, sayfa yüklendiğinde odağın nereye gideceğine karar vermelidir.
Bunu sağlamanın çeşitli yolları vardır:
aria-liveduyurusuyla odağı ana kapsayıcıya yerleştirin.- Odağı tekrar ana içeriğe atlama bağlantısına taşıyın.
- Odağı yeni sayfanın en üst düzey başlığına taşıyın.
Nereye odaklanacağınıza karar verirken kullandığınız çerçeveye ve kullanıcılarınıza sunmak istediğiniz içeriğe bağlı olursunuz. Bağlama veya işleme bağlı olabilir.
Durum yönetimi
JavaScript'in erişilebilirlik açısından kritik öneme sahip olduğu bir diğer alan ise durum yönetimidir. Bu, bir bileşenin veya sayfanın mevcut görsel durumunun az gören, görme engelli ya da hem görme hem işitme engelli yardımcı teknoloji kullanıcısına aktarılmasıdır.
Genellikle bir bileşenin veya sayfanın durumu, ARIA ve HTML modülünde tanıtıldığı 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 bazılarını inceleyelim.
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 almanız gereken birçok ARIA durumu vardır.
Örneğin, kullanıcılara açılır menünün veya listenin genişletilmiş ya da daraltılmış olup olmadığını bildirmek için aria-expanded özelliğini kullanabilirsiniz.
Alternatif olarak, bir düğmeye basıldığını belirtmek için aria-pressed kullanabilirsiniz.
ARIA özelliklerini uygularken seçici davranmak önemlidir. Kullanıcıya hangi önemli bilgilerin iletilmesi gerektiğini anlamak için kullanıcı akışını gözden geçirin.
Sayfa düzeyi
Geliştiriciler, ekrandaki değişiklikleri duyurmak ve uyarı mesajlarını yardımcı teknoloji (AT) kullanıcılarına bildirmek için genellikle ARIA canlı bölgesi adı verilen görsel olarak gizli bir alan kullanır. Bu alan, sayfanın tamamının yeniden yüklenmesini gerektirmeden kullanıcılara sayfadaki dinamik değişiklikleri bildirmek için JavaScript ile eşleştirilebilir.
JavaScript, dinamik yapısı nedeniyle geçmişte aria-live ve uyarı bölgelerindeki içerikleri duyurmakta zorlanıyordu. İçeriğin DOM'a eşzamansız olarak eklenmesi, 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. Ardından metin dinamik olarak değiştirilebilir.
JavaScript çerçevesi kullanıyorsanız iyi haber şu: Neredeyse hepsinde, tüm işi sizin için yapan ve tamamen erişilebilir olan bir "canlı duyuru" paketi bulunur. Canlı bölge oluşturma ve önceki bölümde açıklanan sorunlarla uğraşma konusunda endişelenmenize gerek yoktur.
Sık kullanılan JavaScript çerçeveleri için bazı canlı paketler:
- React: react-aria-live ve react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
Modern JavaScript, web geliştiricilerin sağlam web uygulamaları oluşturmasına olanak tanıyan güçlü bir dildir. Bu durum bazen aşırı mühendisliğe ve dolayısıyla erişilemeyen desenlere 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.