Skip to content

THE7.2 選單添加無障礙鍵盤支援

只在  inc/template-hooks.php 檔案做修改

主要參考兩篇文章完成

http://stackoverflow.com/questions/12279113/recommended-wai-aria-implementation-for-navigation-bar-menu

https://codeable.io/community/wordpress-accessibility-creating-accessible-dropdown-menus/

參考
http://stackoverflow.com/questions/12279113/recommended-wai-aria-implementation-for-navigation-bar-menu

依照結構

我在檔案添加了

  • role=”navigation” for outer wrapper
  • role=”menubar” for navigation bar container
  • role=”menu” for second-level containers
  • role=”menuitem” for first- and second-level menu items

之後參考
https://codeable.io/community/wordpress-accessibility-creating-accessible-dropdown-menus/
除了role=”navigation”以外,也添加了屬性 aria-label=”<?php _e( ‘Main Menu’, ‘textdomain’ ); ?>”

因為原本的the7.2就已經自己寫了,所以不知道怎麼動  ‘walker’ => new Aria_Walker_Nav_Menu(),
因此沒有下載那個檔案,
看了內容,見到
 in_array( ‘menu-item-has-children’, $item->classes ) ? ‘ aria-haspopup=”true” aria-expanded=”false” tabindex=”0″‘ : ”
於是猜測大約是加上 aria-haspopup=”true” aria-expanded=”false” tabindex=”0″這幾個屬性在menu-item-has-children這個類別的元素上
因此取而代之自己寫了一段jquery把要加的屬性給加上
<!– 添加選單鍵盤支援 start –>
<script type=”text/javascript”>jQuery(document).ready(function(){
jQuery(“li.menu-item-has-children”).attr({“aria-haspopup”:”true”,”aria-expanded”:”false”,tabindex:”0″});
})</script><!– 添加選單鍵盤支援 end –>
至此,已經可以使用鍵盤出現焦點了,但應該要彈出的menu依然是隱形的
由於the7.2太複雜,而且加上CSS的方法是在元素裡面,只好使用JS強制加上去,而非如該文章找到CSS檔案修改
寫JS的同時也把hover時會增加的class一起加上去了
整個JS變成這樣
<!– 添加選單鍵盤支援 start –>
<script type=”text/javascript”>jQuery(document).ready(function(){
jQuery(“li.menu-item-has-children”).attr({“aria-haspopup”:”true”,”aria-expanded”:”false”,”tabindex”:”0″});

// Focus styles for menus when using keyboard navigation
// Properly update the ARIA states on focus (keyboard) and mouse over events
jQuery( ‘[role=”menubar”]’ ).on( ‘focus.aria mouseenter.aria’, ‘[aria-haspopup=”true”]’, function ( ev ) {
jQuery( ev.currentTarget ).attr( ‘aria-expanded’, true );
jQuery( ev.currentTarget ).addClass(“dt-hovered”);
jQuery( ev.currentTarget ).children(“.sub-nav”).css({‘visibility’:’visible’, ‘opacity’:1});
} );

// Properly update the ARIA states on blur (keyboard) and mouse out events
jQuery( ‘[role=”menubar”]’ ).on( ‘blur.aria mouseleave.aria’, ‘[aria-haspopup=”true”]’, function ( ev ) {
jQuery( ev.currentTarget ).attr( ‘aria-expanded’, false );
jQuery( ev.currentTarget ).children(“.sub-nav”).css({‘visibility’:’hidden’, ‘opacity’:0});
jQuery( ev.currentTarget ).removeClass(“dt-hovered”);
} );
})</script><!– 添加選單鍵盤支援 end –>
直到這裡,選單使用鍵盤也可以正常出現
但之後發現tab會多跳一層,這是因為the7.2的選單本身使用a做超鏈接,並不會有只有<li>而無法獲取焦點的問題存在
所以當初為了讓li能獲取焦點而加上的”tabindex”:”0″屬性就變得多此一舉
於是從js去掉之
以下是最終結果的js

 

有時候js讀取不到,因此參考底下這篇文章

http://augus-blog.logdown.com/posts/143398-jquery-event-on

綁定一次函數在第一層第一個選單元素onfocus的時候執行(或綁在導盲磚上)
這樣寫似乎更好 http://expect7.pixnet.net/blog/post/38085270

不過最後還是採用了最普遍的function搬進去,在導盲磚到達這個主選單區域時利用onfocus再叫了一次

上週二就發現的選單問題,開始找資料,然後不斷被打斷,今天週一,,扣掉週六沒管事,花了四天半,不過這五天五常常連晚上都還在工作
中間有兩天給瑣碎事情打斷掉了,我真正找到合適的教學文章,是昨天,算算時間,大概花了兩個工作天,事實上之前會一直被打斷而跑去做雜事,其實是來自覺得自己做不到的恐懼,所以無法完全專注處理選單。

我覺得the7.2的結構不是很好,後台編輯端也不是很穩,會有結構明明存在卻看不見,不過至少還可以使用前台編輯,
雖然輪播圖片無論前後台編輯,加上超鏈接另開視窗都完全無效
太多多餘的結構,卻是為了不會寫程式的使用者方便
選單只能滑鼠操作
整體來說,如果不用無障礙又要美觀,又是程式苦手,其實是可以用這個theme的

一旦找到正確的關鍵字,終於有了中文參考文章,不過多數還是英文

以下是其他參考資料
创建无障碍的对话框 http://www.topcss.org/?p=590

http://oaa-accessibility.org/examples/role/86/

aria初探(一) http://www.cnblogs.com/yilian/archive/2011/05/23/aria.html

使用 aria-label 属性
https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

http://www.w3.org/WAI/GL/wiki/Using_ARIA_menus#Example_Keyboard_Behavior

教學例子 http://www.w3.org/WAI/tutorials/menus/application/

© 2015, Chaneswin. 如發現留有早期非原創作品可以留言回報喔~感謝您的幫忙 🙂


文章如有幫助,先按讚,再分享,歡迎贊助哦!