アクセシビリティに対応jQueryプラグイン「Accessible Mega Menu」

らら
らら

はじめに

今回は、アクセシビリティに対応したMega Menuの紹介です。

ラインセンスは、Apache License 2.0のようです。

こちらはAdobeが開発した、Mega MenujQueryプラグインです

ソースは下記から・・

https://github.com/adobe-accessibility/Accessible-Mega-Menu/

2022年に変更があるのである程度保守されていると思います

下記は機械語翻訳・・・

キーボードのアクセシビリティ

アクセシブルなメガメニューは、WAI-ARIA メニューまたはメニューバー (ウィジェット) デザインパターンで説明されている動作をモデルにしたキーボード操作をサポートしますが、

グローバルナビゲーションでのリンクの動作に対するユーザーの一般的な期待も尊重するように努めています。

この目的のために、アクセス可能なメガメニューの実装では、6つのトップレベルメニュー項目のそれぞれにタブフォーカスが許可されます。

メニュー項目の 1 つにフォーカスがある場合、Enter キー、Space キー、または下方向キーを押すとサブメニュー パネルが開き、左方向キーまたは右方向キーを押すと、フォーカスが隣接するメニュー項目に移動します。

サブメニューパネル内のリンクは、パネルが開いているときにタブオーダーに含まれます。また、矢印キーを使用するか、リンク名の最初の文字を入力してナビゲートすることもでき、キーボードナビゲーションが大幅に高速化されます。

Esc キーを押すと、サブメニューが閉じ、親メニュー項目にフォーカスが戻ります。

スクリーンリーダーのアクセシビリティ

アクセシブルなメガメニューは、WAI-ARIA のロール、状態、プロパティの使用を、いくつかの注目すべき例外を除いて、WAI-ARIAのメニューまたはメニューバー (ウィジェット) のデザインパターンで説明されているものの後にモデル化しているため、スクリーンリーダーのグローバルナビゲーションに対するユーザーの期待により適切に動作します。

メニュー コンテナーとその中の各リンクには使用しません。使用すると、支援技術がリンクをリンクとして解釈するのではなく、メニュー項目として解釈し、スクリーン リーダー ユーザーがショートカット コマンドを実行してページ内のリンクの一覧を表示すると、グローバル ナビゲーション内のリンクが表示されなくなるためです。

role="menu"role="menuitem"

また、メガメニューのサブメニューパネルのセマンティック構造を維持したいと考えています。

リンクはリストに整理され、見出しで区切られています。省略してグローバルナビゲーションを行う方が安全な方法のようです。

role="menu"role="menuitem"

使用方法

JavaScript


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery-accessibleMegaMenu.js"></script


<script>
    $("nav:first").accessibleMegaMenu({
        /* prefix for generated unique id attributes, which are required 
           to indicate aria-owns, aria-controls and aria-labelledby */
        uuidPrefix: "accessible-megamenu",
        /* css class used to define the megamenu styling */
        menuClass: "nav-menu",
        /* css class for a top-level navigation item in the megamenu */
        topNavItemClass: "nav-item",
        /* css class for a megamenu panel */
        panelClass: "sub-nav",
        /* css class for a group of items within a megamenu panel */
        panelGroupClass: "sub-nav-group",
        /* css class for the hover state */
        hoverClass: "hover",
        /* css class for the focus state */
        focusClass: "focus",
        /* css class for the open state */
        openClass: "open"
    });
</script>

HTMLナビゲーション部分

WAI-ARIAの付加はJSの方でやってます。


    <nav>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="?movie">Movies</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=0">Action &amp; Adventure</a></li>
                        <li><a href="?movie&genre=2">Children &amp; Family</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=7">Dramas</a></li>
                        <li><a href="?movie&genre=9">Foreign</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=14">Musicals</a></li>
                        <li><a href="?movie&genre=15">Romance</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a href="?tv">TV Shows</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=20">Classic TV</a></li>
                        <li><a href="?tv&genre=21">Crime TV</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=27">Reality TV</a></li>
                        <li><a href="?tv&genre=30">TV Action</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=33">TV Dramas</a></li>
                        <li><a href="?tv&genre=34">TV Horror</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

HTMLすべて


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Simple Accessible Mega Menu Example</title>
    <style>
        /* Rudimentary mega menu CSS for demonstration */    
        /* mega menu list */
        .nav-menu {
            display: block;
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
            z-index: 15;
        }
        /* a top level navigation item in the mega menu */
        .nav-item {
            list-style: none;
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        /* first descendant link within a top level navigation item */
        .nav-item > a {
            position: relative;
            display: inline-block;
            padding: 0.5em 1em;
            margin: 0 0 -1px 0;
            border: 1px solid transparent;
        }
        /* focus/open states of first descendant link within a top level 
           navigation item */
        .nav-item > a:focus,
        .nav-item > a.open {
            border: 1px solid #dedede;
        }
        /* open state of first descendant link within a top level 
           navigation item */
        .nav-item > a.open {
            background-color: #fff;
            border-bottom: none;
            z-index: 1;
        }
        /* sub-navigation panel */
        .sub-nav {
            position: absolute;
            display: none;
            top: 2.2em;
            margin-top: -1px;
            padding: 0.5em 1em;
            border: 1px solid #dedede;
            background-color: #fff;
        }
        /* sub-navigation panel open state */
        .sub-nav.open {
            display: block;
        }
        /* list of items within sub-navigation panel */
        .sub-nav ul {
            display: inline-block;
            vertical-align: top;
            margin: 0 1em 0 0;
            padding: 0;
        }
        /* list item within sub-navigation panel */
        .sub-nav li {
            display: block;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }     
    </style>
    </head>
    <body>
    <nav>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="?movie">Movies</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=0">Action &amp; Adventure</a></li>
                        <li><a href="?movie&genre=2">Children &amp; Family</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=7">Dramas</a></li>
                        <li><a href="?movie&genre=9">Foreign</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?movie&genre=14">Musicals</a></li>
                        <li><a href="?movie&genre=15">Romance</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
            <li class="nav-item">
                <a href="?tv">TV Shows</a>
                <div class="sub-nav">
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=20">Classic TV</a></li>
                        <li><a href="?tv&genre=21">Crime TV</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=27">Reality TV</a></li>
                        <li><a href="?tv&genre=30">TV Action</a></li>
                        <li>&#8230;</li>
                    </ul>
                    <ul class="sub-nav-group">
                        <li><a href="?tv&genre=33">TV Dramas</a></li>
                        <li><a href="?tv&genre=34">TV Horror</a></li>
                        <li>&#8230;</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
    <!-- include jquery -->
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <!-- include the jquery-accessibleMegaMenu plugin script -->
    <script src="js/jquery-accessibleMegaMenu.js"></script>
    <!-- initialize a selector as an accessibleMegaMenu -->
    <script>
        $("nav:first").accessibleMegaMenu({
            /* prefix for generated unique id attributes, which are required 
               to indicate aria-owns, aria-controls and aria-labelledby */
            uuidPrefix: "accessible-megamenu",
            /* css class used to define the megamenu styling */
            menuClass: "nav-menu",
            /* css class for a top-level navigation item in the megamenu */
            topNavItemClass: "nav-item",
            /* css class for a megamenu panel */
            panelClass: "sub-nav",
            /* css class for a group of items within a megamenu panel */
            panelGroupClass: "sub-nav-group",
            /* css class for the hover state */
            hoverClass: "hover",
            /* css class for the focus state */
            focusClass: "focus",
            /* css class for the open state */
            openClass: "open"
        });
    </script>
    </body>
    </html>

サンプル

実際に、ここのページで使用されています。

http://adobe-accessibility.github.io/Accessible-Mega-Menu/

関連

WebアクセシビリティJIS X 8341-3

記事
https://www.omakase.net/blog/2023/04/webjis-x-8341-3.html

アクセシビリティに配慮したクロスブラウザHTML5メディアプレーヤー Able Player

記事
https://www.omakase.net/blog/2023/04/html5-able-player.html

ARIAに対応したjQuery input validation

記事
https://www.omakase.net/blog/2023/05/ariajquery-input-validation.html

アクセシビリティに対応jQueryプラグイン「Accessible Mega Menu」

記事
https://www.omakase.net/blog/2023/07/accessible-mega-menu.html

アクセシビリティに対応したSlickの紹介

記事
https://www.omakase.net/blog/2023/07/accessible-slick.html

関連記事