JavaScript

JavaScript, küçük çaplı veya küçük boyutlu üretim sistemleri dahil, JavaScript çerçevesi üzerinde çalışan tam ürünlere Tepki veya açılı.

JavaScript'in bu şekilde (veya aşırı kullanımı) ortaya çıkan birçok endişe verici trend, büyük miktarda kod nedeniyle uzun yükleme süreleri, anlamsal olmayan HTML kullanımı öğeleri ve JavaScript aracılığıyla HTML ve CSS yerleştirme. Siz de en azından her bir parçada erişilebilir olup olmadığından emin olamıyorsunuz.

JavaScript'in, sitenizin erişilebilirliği üzerinde büyük bir etkisi olabilir. Burada modülünde, erişilebilirlikle ilgili bazı genel kalıpları paylaşacağız. ve Chrome ya da JavaScript'ten kaynaklanan erişilebilirlik sorunlarının çözümlerini yardımcı olur.

Tetikleyici etkinlikler

JavaScript etkinlikleri, kullanıcıların web içeriğiyle etkileşimde bulunmasına ve eyleme dökülebilir. Ekran okuyucu kullanıcıları gibi birçok kişi fare veya dokunmatik yüzey sahibi olmayan kişiler, ve diğerleri, web ile etkileşimde bulunmak için klavye desteğini kullanıyor. JavaScript işlemlerinize klavye desteği eklemeniz son derece önemlidir. tüm bu kullanıcıları etkiler.

Bir tıklama etkinliğine bakalım. <button> gibi semantik bir HTML öğesinde bir onClick() etkinliği kullanılırsa ya da <a> kullanıyorsanız doğal olarak hem fare hem de klavye işlevselliği içerir. Ancak, onClick() etkinliği olduğunda klavye işlevi otomatik olarak uygulanmaz değeri, anlamsal olmayan bir öğeye (ör. genel <div>) eklenir.

<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ırsa keydown/keyup etkinliği Enter veya boşluk tuşuna basıldığını algılamak için eklenmelidir. Tetikleyici etkinlikleri ekleme anlamsız öğeler genellikle unutulur. Maalesef unutulduğunda sadece fare ile erişilebilen bir bileşen olur. Yalnızca klavye kullanıcıların ilişkilendirilmiş işlemlere erişimi kaldırılır.

Sayfa başlıkları

Belge modülünde öğrendiğimiz gibi, Sayfa başlığı, ekran okuyucu kullanıcıları için son derece önemlidir. Kullanıcılara hangi sayfanın açık olup olmadıklarını ve yeni bir sayfaya gidip gitmediklerini gösterir.

JavaScript çerçevesi kullanıyorsanız sayfayı nasıl işlediğiniz başlıklar. Bu, özellikle paydaşların Tek sayfalık uygulamalar (SPA'lar) tek bir index.html dosyasından geçiş veya rota olarak yüklenen (sayfa yapılan değişiklikler) sayfanın yeniden yüklenmesini içermez. Bir kullanıcı şurada yeni bir sayfa yüklediğinde: bir SPA varsa başlık varsayılan olarak değişmez.

SPA'lar için document.title değeri manuel olarak veya bir yardımcı paketle eklenebilir (bağımsız olarak JavaScript çerçevesi) belirtin. Karşınızda güncellenmiş sayfa başlıkları kullanıcıya ek işlem gerekebilir ancak iyi bir haberimiz var. dinamik içerik gibi seçeneklerden yararlanabilirsiniz.

Dinamik içerik

En güçlü JavaScript fonksiyonlarından biri HTML kodu ekleme imkanıdır. CSS'yi de dahil edebilirsiniz. Geliştiriciler dinamik uygulamalar oluşturabilir (kullanıcının eylem veya davranışlarına göre)

Web sitenize giriş yapan kullanıcılara mesaj göndermeniz gerektiğini varsayalım veya uygulama. Mesajın beyaz arka planda ve geçiş sırasında öne çıkmasını istiyorsanız "Şu an giriş yapmış durumdasınız." mesajı gösteriliyor.

innerHTML öğesini kullanabilirsiniz kullanın:

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

CSS'yi de benzer bir şekilde uygulayabilirsiniz: setAttribute:

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

Güç arttıkça sorumluluk da artar. Maalesef JavaScript HTML ve CSS yerleştirme hizmeti, geçmişte içerik. Yaygın olarak karşılaşılan bazı hatalı kullanımlar aşağıda listelenmiştir:

CSS için satır içi stiller eklemek yerine CSS sınıflarını açın/kapatın tekrar kullanılabilirlik ve basitlik sağlar. Sayfada gizli içerik kullanın ve dinamik HTML içeriğini gizlemek ve göstermek için sınıfları arasında geçiş yapın. Herhangi bir JavaScript'i kullanarak sayfanıza dinamik olarak içerik ekleyin, içeriğin basit ve anlaşılır olmasını sağlayın ve elbette erişilebilir olmalıdır.

Odak yönetimi

Klavye odağı modülünde odak noktasının sipariş ve gösterge stillerine bakalım. Odak yönetimi, ne zaman ve nereye kapanacağını bilmektir. ne zaman sıkıştığını gösterir.

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

Bileşen seviyesi

Bir bileşenin odağı düzgün yönetilmediğinde klavye kilitleri oluşturabilirsiniz. Yalnızca klavyeyi kullanan bir kullanıcı bir bileşende sıkıştığında veya olması gerektiği halde odaklanmaz.

Kullanıcıların odak yönetimi sorunları yaşadığı en yaygın kalıplardan biri kalıcı bileşende bulunuyor. Yalnızca klavye kullanan bir kullanıcı bir kalıcı pencereyle karşılaştığında kalıcı öğeler arasında geçiş yapabilmelisiniz, ancak açıkça kapatılmadan kalıcı olarak dışında bırakılmamalıdır. Bu odağı düzgün şekilde yakalamak için JavaScript büyük önem taşır.

Sayfa düzeyi

Odak, kullanıcı sayfalar arasında gezinirken de korunmalıdır. Bu özellikle de SPA'larda tarayıcı yenilenmez, ve tüm içerik dinamik olarak değişir. Bir kullanıcı gitmek üzere bir bağlantıyı her tıkladığında başka bir sayfaya yönlendirirseniz odak noktası aynı tamamen başka bir yere yerleştirilemez.

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

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

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

Odaklanacağınız yer, kullandığınız çerçeveye bağlıdır. ve kullanıcılarınıza sunmak istediğiniz içeriği anlamasına yardımcı olur. Bağlam veya deneyime bağlıdır.

Eyalet yönetimi

Erişilebilirlik için JavaScript'in kritik öneme sahip olduğu bir başka alan da durum yönetimidir. veya bir bileşenin ya da sayfanın mevcut görsel durumu az gören, görme engelli veya işitme engelli yardımcı teknoloji kullanıcısına bildirilir.

Genellikle bir bileşenin veya sayfanın durumu ARIA özellikleri aracılığıyla yönetilir. ARIA ve HTML modülünde kullanıma sunuldu. Proje hedeflerinizin hayata geçirilmesine yardımcı olmak için kullanılan bir öğenin durumunu yönetir.

Bileşen seviyesi

Sayfanızın içeriğine ve kullanıcılarınızın ihtiyaç duyduğu bilgilere bağlı olarak, birçok ARIA eyaleti hakkında daha fazla bilgi edinin.

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

Alternatif olarak aria-pressed da kullanılabilir bir düğmeye basıldığını gösterir.

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

Sayfa düzeyi

Geliştiriciler genellikle ARIA canlı bölgesi Ekranda değişiklikleri duyurmak ve yardımcı teknolojilere uyarı mesajları göndermek için (AT) kullanıcıları. Bu alan, kullanıcılara dinamik reklamlar hakkında bilgi vermek için JavaScript ile eşlenebilir. tüm sayfanın yeniden yüklenmesine gerek kalmadan sayfada değişiklik yapılır.

Bugüne kadar JavaScript, belirli bir dildeki içerikleri aria-live ve uyarı bölgelerine göz atın. Şuraya eşzamansız olarak içerik ekleyerek: DOM, AT'nin bölgeyi alıp duyurmasını zorlaştırıyor. İçeriğin düzgün bir şekilde okunabilmesi için canlı veya uyarı bölgesinin DOM yüklendikten sonra metin dinamik olarak değiştirilebilir.

JavaScript çerçevesi kullanıyorsanız hemen hemen hepsinde bir "canlı anonslu" tüm işleri sizin yerinize yapan ve erişilebilir. Canlı bölge oluşturma ve sorunu çözme konusunda endişelenmenize önceki bölümde açıklanan sorunlarla uyumlu hale getirin.

Yaygın kullanılan JavaScript çerçeveleri için bazı canlı paketleri aşağıda bulabilirsiniz:

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

Modern JavaScript, web geliştiricilerinin farklı platformlarda güçlü web uygulamaları. Bu da bazen aşırı mühendislike neden oluyor ve erişilemeyen kalıplar vardır. 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