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把要加的屬性給加上
<!– 添加選單鍵盤支援 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
<!-- 添加選單鍵盤支援 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/

分享文章
Chaneswin
Chaneswin

【阿淳】漂流過網路行銷、組織行銷、被創業的光環迷惑過,體驗那些未曾想像的驚奇之後,最終的自由卻是擁有澄澈的雙眼、返璞歸真的看世界,我的冒險不在鎂光燈的絢麗舞台,而在迷宮中。把心路歷程化為故事、把工具筆記在雲端。在瞬息萬變的世界裡,慢慢來。
【阿淳的自由生活工具箱】前身小查的白日夢。從腦中的虛幻到真實世界,這裡記錄著一路上不同階段的想法、課程、工具、實踐、挫折,從此放下權威迷思。如果翻出你需要的工具,歡迎隨喜自取、提問討論 :)

文章: 352

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *