Erişilebilir Geçişler

Geçenlerde bazı harika tavsiyeler aldım Scott O’Hara erişilebilirliğin iyileştirilmesi konusunda demo azaltılmış hareket geçişine sahip (için Bu makale). Demo, kullanıcının hareket tercihlerine bağlı olarak animasyonun oynatma durumunu ayarlar ( prefers-reduced-motion medya sorgusu). Kullanıcılar ayrıca hareketi açmak ve kapatmak için düğmeyi tıklayabilir, bu da düğmenin metnini “Hareketi aç” veya “Hareketi kapat” olarak değiştirir. İşte orijinal versiyon:

Kalemi Gör
Azaltılmış hareket geçişi Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Scott, bazı ekran okuyucuların, düğmeye tıklandığında düğme metnindeki değişikliği duyurmayacağına dikkat çekti.

Yine de, geçiş kontrolünün erişilebilirliğine göre bir önerim var. Düğmenin erişilebilir adının değiştirilmesi, ekran okuyucular tarafından sürekli olarak duyurulmayacaktır. Özellikle NVDA ve JAWS isim değişikliğini duyurmuyor – Geçiş kontrolünü kodlamanın alternatif bir yolunu göstermek için kaleminizden bir çatal yaptım.

Kodu gözden geçirelim ve demonun daha basit bir sürümüyle Scott’ın önerdiği iyileştirmeleri ekleyelim, böylece erişilebilirlik açısından neler olup bittiğini daha net anlayabiliriz. Bu makalenin amacı doğrultusunda, orijinalin ek karmaşıklığıyla ilgilenmeden, kullanıcının sistem düzeyinde hareket tercihlerini kontrol etmeyi ve tıklatıldığında animasyonu duraklatan bir düğmeye odaklanacağız. localStorage. (Eğer ilgileniyorsanız, her zaman geri dönebilir ve son demo ve beraberindeki makale.)

Başlangıç ​​noktası olarak kullanacağımız demo bu:

Kalemi Gör
Azaltılmış hareket geçişi (temel) Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

İşte HTML’mizdeki düğme:

<button data-toggle hidden>Turn off motion</button>

şunları içerir: hidden öznitelik, JS olmadan düğme hiçbir şey yapmaz ve JS’yi etkinleştirmeyen veya JS’nin yüklenmediği kullanıcıların kafasını karıştırmak istemeyiz. Bu yüzden başlangıçta onu saklayacağız, ardından bu niteliği JS ile kaldıracağız.

JS kodumuzda, ilk önce animasyonun şu anda duraklatılıp duraklatılmaması için bir başlangıç ​​değeri ile bir değişken belirledik. false (animasyon başlamak üzere oynayacağı için). Kaldırarak düğmemizi görüntüleyeceğiz. hidden bağlanmak.

Düğmeye tıklandığında, geçiş yapacağız shouldPauseAnimation değişken. Ardından özel bir özellik ayarlayacağız (animasyonun CSS’deki oynatma durumunu değiştirmek için) ve düğme metnini güncelleyeceğiz:

const toggle = document.querySelector('[data-toggle]')

let shouldPauseAnimation = false

// The button is hidden initially, as it won't work without JS. We need to make it visible
toggle.hidden = false

toggle.addEventListener('click', () => {
  shouldPauseAnimation = !shouldPauseAnimation

  if (shouldPauseAnimation) {
    // Pause animation
    toggle.innerText = 'Turn on motion'
    document.body.style.setProperty('--playState', 'paused')
  } else {
    // Play animation
    toggle.innerText = 'Turn off motion'
    document.body.style.setProperty('--playState', 'running')
  }
})

Bu, CSS’de kullanılan özel özelliği orijinal varsayılan değeriyle şu şekilde değiştirir:

.circle {
  animation-play-state: var(--playState, running);
}

Artık çalışan bir hareket geçişimiz var (Yaşasın!). Ne yazık ki, Scott’ın açıkladığı gibi, bazı ekran okuyucular güncellenmiş düğme metnini tıklama anında duyurmayacak. Scott’ın iyileştirmelerini ekleyelim.

İlk olarak, düğmenin HTML’sini güncelleyeceğiz, böylece kullanıcıyı mevcut “açık/kapalı” durumu hakkında bilgilendiren metin bir <span> ile aria-hidden bağlanmak:

<button data-toggle hidden>
  Toggle motion
  <span aria-hidden="true" data-btn-text>: Off</span>
</button>

Bir ekran okuyucuya, düğme artık durumu belirtmeden “Hareketi değiştir” diyecektir. Düğmeye bir rol vereceğiz switchve ekleyin aria-checked değeri olan nitelik truebir “açık” durumunu belirtmek için:

<button data-toggle hidden role="switch" aria-checked="true">
	Toggle motion
	<span aria-hidden="true" data-btn-text>: On</span></span>
</button>

JS kodumuzda, hem içindeki metni güncelleyeceğiz <span>ve aria-checked öznitelik (değiştirmeye ek olarak --playState özel mülk:

const toggle = document.querySelector('[data-toggle]')
const buttonText = document.querySelector('[data-btn-text]')

let shouldPauseAnimation = false

toggle.hidden = false

toggle.addEventListener('click', () => {
  shouldPauseAnimation = !shouldPauseAnimation

  if (shouldPauseAnimation) {
    // Pause animation
    buttonText.innerText = ': Off'
    toggle.setAttribute('aria-checked', 'false')
    document.body.style.setProperty('--playState', 'paused')
  } else {
    // Play animation
    buttonText.innerText = ': On'
    toggle.setAttribute('aria-checked', 'true')
    document.body.style.setProperty('--playState', 'running')
  }
})

Sonuç, daha erişilebilir bir demodur:

Kalemi Gör
Erişilebilirlik iyileştirmeleri ile hareket (temel) için geçiş anahtarı Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Aynı ilkeler, karanlık/ışık modu geçişi gibi birçok farklı türde geçişe uygulanabilir.

hakkında daha fazla bilgi edinin aria-switch rol.