WordPress erişilebilirliği: Erişilebilir açılır menüler oluşturma

WordPress, 3.0 sürümünde gezinme menüleri için yerel destek sunduğundan, bunları hemen hemen her web sitesinde bulabiliriz. Kuşkusuz bunlar popülerdir, sezgiseldir ve web sitenizin ziyaretçilerinin çoğu için kullanımı kolaydır. Ancak aynı zamanda, fareyle üzerine gelindiğinde açılan bir gezinme menüsü, ziyaretçilerinizin ekranın önüne oturacağını ve sitenizle etkileşim kurmak için belirli bir giriş cihazı kullanacağını öngörür: bir fare. Farenin fişini çekin (veya bu şekilde kontrol ediyorsanız izleme dörtgeninizi devre dışı bırakın) ve her web sitesinin en önemli ikinci kısmı (gerçek içerikten sonra) kaybolur. Biz daha iyisini yapabiliriz! Bu makale, WordPress sitenizi minimum çabayla tüm insanlar için daha iyi bir yer haline getiren küçük ama önemli bir adımı açıklayacaktır.

WordPress sitenizdeki davranışı nasıl genişleteceğinize ve açılır menü gezinmesini, kullanılabilirlik açısından ve ziyaretçilerinizin kullanma eğiliminde olan belirli giriş cihazlarından bağımsız olarak nasıl daha zengin hale getireceğinize bir göz atacağız.

Bu makaledeki tarayıcı terimi, şimdiye kadar fark ettiğinizden daha geniş anlamda kullanılmaktadır. Bildiğiniz başlıca masaüstü tarayıcılarına ek olarak, ekran okuyucuları veya HTML belgesini okuyabilen başka herhangi bir cihazı düşünün.

WAI-ARIA

WAI-ARIA, Web Erişilebilirlik Girişimi – Erişilebilir Zengin İnternet Uygulamaları'nın kısaltmasıdır ve birkaç basit kuralı izlerseniz, web'de gezinmek için farklı cihazlar ve yazılımlar kullanan kişiler için çok daha kullanıcı dostu bir site geliştirebilirsiniz. Şu örneği ele alalım: yetişkinlerin yaklaşık %7'si kördür veya görmede ciddi güçlük çeker ve bunun aksine, insanların %3'ünden daha azı web'e erişmek için IE 6-8 kullanır. Birçok geliştirici, daha fazla (yarı) kör insan olmasına ve bir HTML5 sitesini IE'de kusursuz bir şekilde çalışmaya zorlamaktan daha kolay ve daha önemli olmasına rağmen, hala ilkini unutuyor ve ikincisini desteklemek için mücadele ediyor. 6. Bu nedenle WAI-ARIA özelliklerini kullanmayı ciddi olarak düşünmelisiniz.

İşleri netleştirelim. WAI-ARIA öznitelikleri, sayfalarınızın düzenini veya stilini değiştirmez, ancak sitenizi ekran okuyucular ve diğer benzer yardımcı teknolojiler için bilgilerle zenginleştirir.

WAI-ARIA spesifikasyonunun daha yakından inceleyeceğimiz iki bölümü vardır: önemli roller ve ARIA durumları .

Önemli roller

ARIA dönüm noktası rolleri, web sitenizin erişilebilirliğini büyük ölçüde artırabilen HTML'deki özelliklerdir. Ana amaçları, ekran okuyucularına bir sayfanın ana alanlarına hızlı erişim seçeneği sunmaktır. Şu anda mevcut 8 rol var:

• role="banner" – Web sitesinin başlığı için kullanılır. İçeride genellikle logoyu, aramayı, gezinmeyi vb. buluruz. Her sayfada yalnızca bir banner rolü kullanılması önerilir.
• role="navigation" – Sitede gezinmek için bağlantılar ve menüler için kullanılır. Bunu daha sonra kullanacağız.
• role="main" – Bu, ana içerik alanımız içindir.
• role="complementary" – Bu rol bir kenar çubuğunda kullanılır. Bir kereden fazla kullanabilirsiniz.
• role="contentinfo" – Alt bilgi alanı için kullanılır. banner rolü gibi, contentinfo da sayfada sadece bir kez kullanılmalıdır.
• role="search" – WordPress varsayılan olarak bu rolü kullanır ancak özel bir arama formu oluşturursanız bu rolü eklemelisiniz.
• role="form" – Sayfada herhangi bir form varsa bu kullanılmalıdır.
• role="application" – Bir sayfada bir tür benzersiz yazılım varsa, bu rolü kullanın.

ARIA durumları

ARIA durumları, genellikle kullanıcı tarafından bir tür eylem gerçekleştirildikten sonra değişen belirli bilgi parçalarıdır. Aşağıdaki açılır menü örneğinde tüm bunların nasıl çalıştığını göreceğiz.

Tüm küresel durumlar ve özellikler bu bağlantıda bulunabilir.

WP navigasyon menünüzü erişilebilir hale getirme

Ellerini kirletme zamanı. WordPress'teki açılır menüler için WAI-ARIA dönüm noktası rollerinin ve durumlarının nasıl uygulanacağına bir göz atalım.

Menüler, wp_nav_menu() işlevi kullanılarak tema şablonlarına eklenir. Uyumluluk için WordPress çekirdeğinde bulunan yerel işlevlere güvenmek her zaman en iyisidir. Neyse ki, wp_nav_menu() kolayca yapılandırılabilir, bu nedenle, açılır menü navigasyonumuzu yardımcı teknolojiler ve klavye navigasyonu için kolay hale getirmek için işleve doğru parametreleri sağlayabiliriz.

PHP, HTML ve WordPress

Şimdi temalarımızdan birindeki header.php dosyasındaki bu kod örneğine bir göz atalım:

 <nav class="collapse navbar-collapse" role="navigation" aria-label="<?php _e( 'Main Menu', 'textdomain' ); ?>"> <?php if ( has_nav_menu( 'main-menu' ) ) { wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => false, 'menu_class' => 'main-navigation', 'walker' => new Aria_Walker_Nav_Menu(), 'items_wrap' => '<ul class="%2$s" role="menubar">%3$s</ul>', ) ); } ?> </nav>

İlk olarak, işlev çağrısının etrafında bir <nav> sarmalayıcımız var. <nav> , gezinme bağlantılarını birlikte gruplamak için bir HTML5 öğesidir, ancak biraz daha bağlama, yani şu iki ek özniteliğe ihtiyacı vardır:

• role="navigation" , tarayıcıya içinde bir menü olacağını söyleyen dönüm noktası rolüdür, böylece kullanıcı karar verirse ekran okuyucu doğrudan sayfanın bu bölümüne atlayabilir.
• aria-label="<?php _e( 'Main Menu', 'textdomain' ); ?>" tarayıcıya geçerli menünün başlığını söyler. Diğer etiket örnekleri, Kenar Çubuğu menüsü , Altbilgi menüsü ve hatta İçindekiler'dir . Asıl metnin çıktısını almak için burada _e() i18n işlevini kullandım, böylece menü etiketi İngilizce dışındaki dillere çevrilebilir – erişilebilirlik için bir başka önemli unsur.

wp_nav_menu() yapılandırma parametreleri ne olacak?

• 'container' => false , menümüzün ek bir <div> ile kaydırılmasını önler.
• 'walker' => new Aria_Walker_Nav_Menu() en önemli parametredir. Menü öğelerini yinelerken menüye varsayılanı değil, özel menü yürüteçümüzü kullanmasını söyler. Aria_Walker_Nav_Menu() yürüteç, WAI-ARIA öznitelikleri düzgün bir şekilde uygulanmış, biraz değiştirilmiş HTML işaretlemesi çıkardığı için bu önemlidir. Büyü!
• 'items_wrap' => '<ul class="%2$s" role="menubar">%3$s</ul>' , menümüzün en dıştaki <ul> kabıdır. Varsayılan olarak bu parametrede yatay menüyü temsil eden role="menubar" özniteliği yoktur, bu nedenle bunu özel kodla düzeltiriz ( %1$s gibi garip dizelere aldırmayın, PHP yürütülürken dinamik olarak değiştirilirler).

Elbette, wp_nav_menu() çağrıldığında, Aria_Walker_Nav_Menu sınıfı zaten global alanda mevcut olmalıdır. Bu dosyayı indirin ve tema klasörünüzde bir yere koyun ve ardından functions.php dosyanıza ekleyin:

 require_once "path/to/aria-walker-nav-menu.php";

Bu yürüteç, varsayılan WP nav yürüteçlerine mümkün olduğunca benzemeyi amaçlamaktadır, tek fark erişilebilirlik iyileştirmeleridir; start_lvl yönteminin çıktısına role="menu" eklenir ve start_el diğer bazı nitelikler eklenir: tüm <li> öğeleri için role="menuitem" ve aria-haspopup="true" aria-expanded="false" tabindex="0" Alt menülerle <li> s için aria-haspopup="true" aria-expanded="false" tabindex="0" .

Açıklama? aria-haspopup , <li> 'nin soyundan gelenlerin açılır pencere benzeri davranışını kontrol edip etmediğini gösterir – ki bu bir açılır menüdür. aria-expanded , "açılır pencerenin" durumunu açıklar ve varsayılan olarak false (görünmez/kapalı açılır menü) olur. Son olarak tabindex="0" , site bir klavye ile gezildiğinde öğenin odağa ulaşmasına izin verir – varsayılan olarak yalnızca bağlantılar ve form öğeleri odağa ulaşabilir.

JavaScript

Erişilebilirlik her web sitesinin temel bir parçası olması gerektiğinden, JS'yi mümkün olduğunca kullanmaktan kaçınmak istiyoruz. Yukarıda bahsedilen nitelikleri JS aracılığıyla eklemek aslında daha kolay olurdu, ancak bu aynı zamanda onları kaynak HTML'de bulundurmaktan daha fazla hataya açık olurdu – JS bozulabilir, HTML ve CSS yapamaz.

Ancak yine de ARIA durumlarını güncellememiz gerektiğinde JS kullanmaktan kaçınamayız. Bu nedenle, aşağıdaki JavaScript kodu parçasını kuyruğa almamız gerekiyor:

 jQuery( function ( $ ) { // Focus styles for menus when using keyboard navigation // Properly update the ARIA states on focus (keyboard) and mouse over events $( '[role="menubar"]' ).on( 'focus.aria mouseenter.aria', '[aria-haspopup="true"]', function ( ev ) { $( ev.currentTarget ).attr( 'aria-expanded', true ); } ); // Properly update the ARIA states on blur (keyboard) and mouse out events $( '[role="menubar"]' ).on( 'blur.aria mouseleave.aria', '[aria-haspopup="true"]', function ( ev ) { $( ev.currentTarget ).attr( 'aria-expanded', false ); } ); } );

Tüm bunlar, aria-haspopup="true" özniteliğine sahip herhangi bir öğe, odak veya bulanıklık olaylarını tetiklediğinde, karşılık gelen aria-expanded durum, sırasıyla true veya false olarak güncellenir.

Bu dosyayı function.php içinde aşağıdaki PHP koduyla sıraya alın:

 add_action( 'wp_enqueue_scripts', function() { wp_enqueue_script( 'textdomain-wai-aria', get_template_directory_uri() . '/path/to/wai-aria.js', array( 'jquery' ), null ); } );

Ve işin bitti! Site gezintiniz artık ekran okuyucular ve diğer benzer cihazlar için çok daha mantıklı. Ama henüz tamamen bitirmedik.

CSS

Yapmamız gereken son şey, navigasyon menülerini klavyeyle erişilebilir hale getirmek. Birisi TAB tuşunu kullanırken, alt menülerde gezinebilmelidir. Varsayılan olarak durum böyle değildir, ancak bunu kolayca düzeltebiliriz.

Fareyle üzerine gelindiğinde açılan menüler için muhtemelen SCSS'nizde buna benzer bir şey vardır:

 ul.main-menu { li.menu-item-has-children { ul.dropdown-menu { position: absolute; left: -9999px; ... } } li.menu-item-has-children:hover { ul.dropdown-menu { left: 0; top: 100%; ... } } }

Tek yapmanız gereken [aria-expanded="true"] CSS seçicisini :hover durumu önceden tanımlanmış tüm seçicilerin yanına eklemek. Yukarıdan değiştirilmiş bir örnek daha sonra şöyle görünür:

 ul.main-menu { li.menu-item-has-children { ul.dropdown-menu { position: absolute; left: -9999px; ... } } li.menu-item-has-children:hover, li.menu-item-has-children[aria-expanded="true"] { ul.dropdown-menu { left: 0; top: 100%; ... } } }

Çözüm

WAI-ARIA'da ustalaşmak çok kolay değil ve web'in her yerine dağılmış resmi özellikleri, önerileri ve kullanım örneklerini incelemek birkaç günümüzü aldı. Doğru bilgiyi bulmak zordur, ancak ne kullanacağınızı öğrendikten sonra uygulamanın kendisi hiç de zor değildir.

Bu yüzden genel bir çözüm oluşturmaya ve bunu açık kaynak yapmaya karar verdik. Yukarıdaki kod GitHub'da bir Composer paketi olarak mevcuttur ve GPLv2 altında lisanslanmıştır, böylece herkes onu ücretsiz veya ücretli herhangi bir WP projesine kolayca dahil edebilir.

Bu makaleyi A List Apart'tan erişilebilirlik konusundaki görüşümü değiştiren bir alıntıyla bitirmeme izin verin:

Erişilebilirlik hakkında konuşma şeklimizi değiştirmemiz gerekiyor. Çoğu kişiye, W3C'nin resmi tanımı olan "web erişilebilirliğinin, engelli kişilerin Web'i kullanabileceği anlamına geldiği" öğretilir. Bu yanlış. Web erişilebilirliği, insanların web'i kullanabilmesi anlamına gelir.

— Anne Gibson