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

Spread the love

【聲明】本站任何文章都可能有聯盟行銷連結，當你透過文章內的連結購買產品，我可能獲得分潤，這不會增加你任何成本，並且我分享的都是自己實際使用過的資訊，更多細節請點這裡。 Disclosure: Any post on this site may contain affiliate links, meaning I get commission if you decide to make a purchase through my links, at no cost to you.

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

主要參考兩篇文章完成

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

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

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

依照結構

<div> <!-- Outer wrapper -->
  <ul> <!-- Main navigation bar container -->
    <li> <!-- First-level item without submenu -->
      <a> <!-- Destination URL -->
      </a>
    </li>
    <li> <!-- First-level item with submenu -->
      <a> <!-- Destination URL -->
      </a>
      <ul> <!-- Second-level menu container -->
        <li> <!-- Second-level item -->
          <a>
          </a> <!-- Destination URL -->
        </li>
      </ul>
    </li>
  </ul>
</div>

我在檔案添加了

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把要加的屬性給加上

至此，已經可以使用鍵盤出現焦點了，但應該要彈出的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

<!-- 添加選單鍵盤支援 start -->
<script type="text/javascript">jQuery(document).ready(function(){
jQuery("li.menu-item-has-children").attr({"aria-haspopup":"true","aria-expanded":"false"});

// 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 -->

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

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

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

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

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

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

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

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

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

aria初探（一） https://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

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

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