7

最近、ARIA を Web アプリケーションに実装していますが、この質問はナビゲーション部分の改善に非常に役立つことがわかりました。

これをすべてのモジュールに実装した後、次の HTML 検証エラーを発見しました。

この時点aria-selectedで要素に属性を使用できません。a

ARIA の仕様を見ると、これaria-selectedはロール gridcell、option、row、および tab でのみ使用されていることがわかります。私の場合、リンクの役割はmenuitem.

これは、HTML コードの代表的なサンプルです。

<nav role=navigation>
    <ul role=menubar>
        <li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
        <li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
        <li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
        <li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
    </ul>
</nav>

ご覧のとおり、これは「ページ 3」で撮影されています。

ここで使用する正しい ARIA ロールは何ですか?

4

3 に答える 3

2

aria-selected は、矢印を使って選択する一連のタブのように、1 つのタブで停止する「ウィジェット」用だと思います。選択された側面は、あなたがどのページにいるかではなく、どの側面に焦点が合っているかに関するものです。

十分にテストされた例として、これを確認します: http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizo​​ntal%20 (Internal%20Content)/demo.htm

から: http://whatsock.com/tsg/

現在のページを表示するには、おそらくもっと伝統的な方法を使用するでしょう。つまり、リンクではありません。例えば：

<li><a href='page2.php'>Page 2</a></li>
<li><strong>Page 3</strong></li>

これにより、ユーザーが誤って同じページのリンクをクリックすることも防止されます (これは、ユーザビリティ テストでよく見られます)。に同じ CSS を適用してから、strong のスタイリングをオーバーライドできnav ul aますnav ul strong。

于 2013-10-26T12:37:31.937 に答える