Enter The Dragon (Drop): Erişilebilir Liste Yeniden Sıralama

Erişilebilirliğe odaklanan bir web geliştiricisi olarak yıllar boyunca, çoğunlukla yaygın olarak benimsenen, standartlaştırılmış UI bileşenleriyle uğraştım ve yardımcı teknolojiler (AT) tarafından iyi bir şekilde desteklendim. Bu tür widget'lar için, erişilebilirlik sorunları için web bileşenlerini test etmek için kullanılabilecek axe-core gibi harika araçların yanı sıra kısa ARIA yazma uygulamaları da vardır. Daha az yaygın widget'lar oluşturmak, özellikle de kullanıcı etkileşimi için yaygın olarak benimsenen kuralları olmayanlar çok zor olabilir.

Karşılaştığım en zorlu zorluklardan biri, yeniden sıralanabilir sürükle ve bırak listesi. Yeniden sıralanabilir bir liste, fare kullanıcıları için sezgisel kurallara sahip bir şekilde yaygın olarak kullanılan bir pencere öğesi olsa da, yalnızca klavye kullanan yardımcı teknoloji kullanıcılarının bu basit görevi nasıl gerçekleştirebileceği açık değildir. Desteklenen ARIA özniteliklerinin olmaması nedeniyle Dragon Drop, tüm kullanıcıların bir listeyi yeniden sıralamaları için gereken bilgileri iletmek için canlı bölgeleri kullanır.

Canlı Bölgeler

Canlı bölgeler, içerik değişikliklerini ekran okuyucularına bildirmek için kullanılabilen ARIA öznitelikleriyle donatılmış HTML öğeleridir. Odağı hareket ettirmek zorunda kalmadan tamamen özelleştirilmiş bir ekran okuyucu duyurusu sağlamamıza izin veriyorlar! Canlı bölgeler, sayfanın uzak bölümlerinde gerçek zamanlı güncellemeler, durum güncellemeleri ve zamana duyarlı bilgiler için mükemmeldir.

Sohbet günlüklerinde, ilerleme göstergelerinde, spor puanı güncellemelerinde ve hava durumu uyarılarında yaygın olarak kullanılırlar ancak ekran okuyucu kullanıcıları için kolayca aşırı ayrıntılı bir deneyim oluşturabildikleri için dikkatli kullanılmaları gerekir. Canlı bölgelerde yeniyseniz veya sadece neler yapabileceklerini keşfetmek istiyorsanız, kendi özel canlı bölgenizi yapılandırmanıza izin veren canlı bölge oyun alanıma göz atın.

Uygulamanızda canlı bölgeleri kullanmak istiyorsanız, npm'deki Canlı Bölge modülüne bakın.

 <div aria-live="assertive" role="log" aria-relevant="additions" aria-atomic="true"></div>

Neden Canlı Bölgeler Kullanılmalı?

İdeal bir dünyada, basitçe sürükle ve bırak ARIA özniteliklerine aria-grabbed -grabbed ve aria-dropeffect . Bununla birlikte, gerçekte, bu özniteliklerin desteği nadirdir ve desteklendiğinde, ekran okuyucu kullanıcıları için bu deneyim kafa karıştırıcı ve mantıksız olabilir. Bunun da ötesinde, bu iki özellik ARIA 1.1'den beri kullanımdan kaldırılmıştır, bu da gelecekte bu niteliklere yönelik desteğin artacağını görmeyeceğimiz anlamına gelir.

Bu kullanımdan kaldırmayla ilgili W3C konuşması burada bulunabilir. Bu sorunlardan dolayı Dragon Drop'ta aria-grabbed ve aria-grabbed aria-dropeffect kullanmamaya karar verdim. Çok çeşitli yardımcı teknoloji/tarayıcı eşleştirmeleri içinde ARIA nitelikleri için değişen destek, erişilebilirlik dünyasında oldukça yaygındır. Neyse ki role , aria-live , aria-relevant ve aria-atomic gibi canlı bölge öznitelikleri JAWS, NVDA ve VoiceOver gibi ekran okuyucular tarafından oldukça yaygın şekilde desteklenmektedir.

Optimize Erişilebilirlik

Dragon Drop, fare, klavye ve yardımcı teknoloji kullanıcıları için çalışan, yüksek düzeyde yapılandırılabilir bir liste yeniden sıralama modülüdür. Birkaç yıl önce, yazmaya karar verdiğimde, üzerinde çalıştığım projelerle ilgili erişilebilir yeniden sıralama listeleri birkaç kez gündeme getirilmişti ama henüz işe yarayan bir çözüm görememiştim. Karşılaştığım düzinelerce sürükle ve bırak listesi yeniden sıralama eklentisinden çoğu erişilebilirlik düşünülerek tasarlanmamıştı ve sonuç olarak çok erişilemezdi.

Dragon Drop, VoiceOver, JAWS ve NVDA ile test edilmiştir ve AT kullanıcılarının bir listeyi başarıyla yeniden düzenlemesini sağlar.

Yeniden sıralanabilir bir listeyle karşılaştığında herhangi bir kullanıcının sahip olabileceği tüm soruları yanıtlamak için yola çıktım. Bu sorular, gören fare kullanıcıları için ortak kurallar aracılığıyla yanıtlanmıştır, peki ya diğer kullanıcılar?

Bir Ürünü Nasıl Alabilirim?

Bazı üst düzey yardım metinleriyle birlikte bir öğenin yakalanan durumunu ileten bir kontrol sağlayarak bu soruyu yanıtlayabiliriz. Örneğin, erişilebilir metne sahip bir kontrol (adı, rolü ve değeri olsa da AT tarafından toplanır) “Öğe 1'i Yeniden Sırala, geçiş düğmesi” kullanıcıya, etkinleştirildiğinde öğeyi alıp başlatacak bir düğme olduğunu söyler. yeniden sıralama

Dragon Drop, AT kullanıcılarına bir öğenin ne zaman "sürüklenip" sürüklenmediğini bildirmek için aria-pressed özniteliğini kullanır. Tüm bir öğenin sürüklenebilir olmasına izin verecek şekilde yapılandırılabilir veya her iki durumda da role="button" ve tabindex="0" varlığının garanti edildiği yalnızca bir alt "sürükle tutamacı".

Bir sürükleme öğesi etkinleştirildiğinde, öğeye aria-pressed="true" uygulanır ve canlı bölge aracılığıyla ekran okuyuculara “Öğe 1 yakalandı” gibi yapılandırılabilir bir duyuru okunur.

Bir Eşyayı Nasıl Taşıyabilirim?

Kontrolleri "Yeniden sırala düğmesini etkinleştirin ve listeyi yeniden sıralamak için ok tuşlarını kullanın veya sürüklemek/yeniden sıralamak için farenizi kullanın" gibi yararlı yardım metinleriyle ilişkilendirmek için aria-describedby kullanmak. kullanıcıya gerçekten yeniden sıralamayı nasıl yapacağını söyler. Bu, ekran okuyucu kullanıcılarının bir öğeye basıldığında yukarı ve aşağı ok tuşlarının öğeyi sırasıyla yukarı ve aşağı hareket ettireceğini bilmesini sağlar.

Bir Eşyayı Nasıl Düşürebilirim?

aria-pressed özniteliği kullanıldığından, kullanıcılar bir öğeyi nasıl bırakacaklarını kolayca söyleyebilirler. Bir şekilde, şekil veya form, en yaygın kullanılan ekran okuyucuların tümü, bir geçiş düğmesinin basılı durumunu iletir. Bir öğe bırakıldığında ve ekran okuyuculara "Öğe 1 düştü" gibi özelleştirilmiş bir duyuru okunduğunda aria-pressed özniteliği "yanlış" olarak ayarlanır.

Listenin Yeniden Düzenlendiğini Nasıl Anlarım?

Listenin sırasını değiştirmek için yukarı ve aşağı ok tuşları her kullanıldığında, tüm kullanıcıların bu değişiklikten haberdar edilmesini sağlamalıyız. Göremeyen kullanıcılar için bir kez daha canlı bölgelere güvenmeliyiz. “Liste yeniden düzenlendi, Madde 1 şimdi listede 4. sırada” gibi yapılandırılabilir bir duyuru. , yeniden sıralanan listenin güncellenmiş durumunu iletmek için okunur. Bu önemlidir, çünkü gören kullanıcılar değişen düzen hakkında anında görsel geri bildirim alırlar ve aynı bilgilerin AT kullanıcılarına iletilmesi gerekir.

Yeniden Sıralamayı Nasıl İptal Edebilirim?

Bu tür bir etkileşim için yaygın olarak benimsenen bir kurala güvenemeyeceğimiz için, yardım metnine “Yeniden sıralamayı iptal etmek için basın çıkışı” gibi yönergeleri kolayca ekleyebiliriz. Ayrıca, kullanıcıya iptali bildiren özelleştirilmiş bir okuma sağlamak için canlı bölgeyi kullanırız.

Klavye Etkileşimi

Ejderhayı Hareket Halinde Görmek

Birkaç farklı konfigürasyonu deneyimlediğiniz Dragon Drop demosunu kontrol edin.

Uygulamanıza Dragon Drop Bırakmak

Dragon Drop, sıradan listenizi tamamen erişilebilir bir sürükle ve bırak yeniden sıralanabilir listeye dönüştürür:

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> const dragon = document.getElementById('dragon'); // Enter the dragon new DragonDrop(dragon); </script>

Kurulum

Dragon Drop, açık kaynaklı (MIT Lisansı) bir projedir ve npm ile kurulabilir:

 $ npm install drag-on-drop

Browserify veya webpack gibi modüllerle kullanılabilir:

 // if you're not down with ES6, you can require('drag-on-drop') import DragonDrop from 'drag-on-drop';

Dragon Drop, unpkg CDN ile sayfanıza kolayca bırakılabilir:

 <script source="https://unpkg.com/drag-on-drop"></script> <script> var dragonDrop = new DragonDrop(listElement); </script>

Yapılandırma

Çok çeşitli kullanım durumlarını desteklemek için Dragon Drop çok yapılandırılabilir.

Varsayılan yapılandırma aşağıdadır:

 { item: 'li', handle: 'button', activeClass: 'dragon-active', inactiveClass: 'dragon-inactive', announcement: { grabbed: el => `Item ${el.innerText} grabbed`, dropped: el => `Item ${el.innerText} dropped`, reorder: (el, items) => { const pos = items.indexOf(el) + 1; const text = el.innerText; return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`; }, cancel: 'Reordering cancelled' } }

Duyurular

Dragon Drop'un “duyuru” yapılandırma seçeneği en önemlisidir çünkü Dragon Drop'un sağladığı ekran okuyucu deneyiminin bel kemiğidir. Gerçekleşen tüm etkileşimler için özel canlı bölge duyurularına izin veren "grabbed" , "dropped" , "reorder" ve "cancel" işlevlerini içeren bir nesnedir.

Bu işlevlerin her biri, verilen eylem gerçekleştiğinde canlı bölgeye eklenen bir dizi duyuru metni döndürmelidir. Bu işlevleri kullanmanın ek bir yararı, canlı bölge mesajlarının yerelleştirilmesini desteklemesidir.

Duyuruları kolaylaştırmak için, eylemin gerçekleştiği liste öğesi öğesi ve listedeki öğe dizisi sırasıyla argüman olarak iletilir.

 { announcement: { // grabbed is called when an item is picked up grabbed: (targetItem, items) => `${targetItem.innerText} grabbed`, // dropped is called when an item is dropped dropped: (targetItem, items) => `${targetItem.innerText} grabbed`, // reorder is called each time the order of the list is altered reorder: (targetItem, items) => { return `${targetItem.innerText} is now ${items.indexOf(targetItem) + 1} of ${items.length}` }, // cancel is called when a reordering is cancelled (via escape key) cancel: () => 'The initial order has been restored, reordering cancelled' } }

Yardım Metni

Yeniden sıralanabilir listenin nasıl kullanılacağını açıklayan yardım metni sağlamanız kesinlikle çok önemlidir. Bu, bu metnin yardımcı teknolojilere nasıl sunulacağı konusunda daha az fikir sahibi olmanız için Dragon Drop'un sizin için yapmadığı bir şeydir. Önerilen uygulama, yardım metnini aşağıdaki gibi etkileşimli öğelerle ilişkilendirmek için aria-describedby kullanmaktır:

 <p>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</p> <ul> <li> <button>Reorder Item 1</button> <span>Item 1</span> </li> <li> <button>Reorder Item 2</button> <span>Item 2</span> </li> <li> <button>Reorder Item 3</button> <span>Item 3</span> </li> </ul>

GitHub'da Dragon Drop

Dragon Drop'un üçüncü versiyonu yakın zamanda piyasaya çıktı. Kullanmakla ilgileniyorsanız, lütfen GitHub'daki Dragon Drop belgelerine bakın. Dragon Drop'un fare etkileşimi için kullandığı modül olan Dragula'nın yaratıcılarına ve harika logoyu tasarlayan Aaron Pearlman'a özel teşekkürler!

Ejderhanın Geleceği

Gelecekte WAI-ARIA teknik şartnamesine sürükle ve bırak etkileşimi eklenirse, Dragon Drop'un standart dışı etkileşime dayandığı ve canlı bölgeler olduğu gerçeği değişebilir. Mümkün olduğu kadar çok ekran okuyucu tarafından iyi bir şekilde desteklenmesini sağlamak için testler yapmaya ve en son ARIA spesifikasyonu ile güncel kalmaya devam edeceğim. Ek olarak, çok sütunlu listelerin (sprint panoları gibi) yanı sıra dokunmatik ekran/mobil cihazlar desteği de dahil olmak üzere boru hattında epeyce özellik vardır. Gelecekte eklenebilecek bir diğer özellik ise Dragon Drop React bileşenidir.

Şu anda Dragon Drop, aşağıdaki demoda gösterildiği gibi React ile kullanılabilir, ancak ideal değildir çünkü listenin yeniden sıralanmasından kaynaklanan DOM değişiklikleri React tarafından alınmaz ve bu da beklenmedik davranışlara neden olabilir. Dragon Drop'ta hata bulan, hatta özellikler için fikirleri olan herkesi GitHub'da bir sorun yaratmaya davet ediyorum. Tüm geri bildirimler ve katkılar memnuniyetle karşılanır ve çok takdir edilir!