aria-currentはmenuの現在pageだけへ付けリンク先と現在地を分けて伝える

menuやパンくずでは、今読んでいるpageを見た目だけでなくHTMLでも分かるようにします。aria-currentは、同じまとまりの中で現在のitemを示す属性です。global menuなら現在のpage、パンくずなら現在地、paginationなら現在のpage番号へ付けます。全てのlinkへ付けたり、見出しへ付けたりする属性ではありません。

WAI-ARIA 1.1のCandidate Recommendationは、aria-currentを一組のrelated elementsの中で現在のitemを示すstateとして定義しています。page、step、location、date、timeなどの値を使えます。会社siteの通常のmenuでは、現在pageを示すaria-current="page"から考えるとよいでしょう。

link先と現在地は同じ情報ではない

a要素のhrefは、押したときにどこへ移動するかを示します。aria-currentは、そのitemがいまの位置かを示します。menuの見た目で色を変えていても、現在地がHTML上で分かるとは限りません。反対にaria-currentだけを付けても、色、背景、下線などの見た目がなければ、多くの利用者は現在地を見つけにくくなります。

説明用の仮例として、About、Service、Contactを並べたmenuを考えます。Service pageを開いているなら、Serviceだけを現在itemにします。AboutとContactは移動先のlinkです。Serviceをlinkのまま残すか、文字だけにするかはsiteの設計で決められますが、現在pageが三つあるように見せてはいけません。

<nav aria-label="main menu">
  <ul>
    <li><a href="/about/">About</a></li>
    <li><a href="/service/" aria-current="page">Service</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

WordPressでは表示する場所を一つずつ決める

WordPress themeでは、headerのglobal menu、sidebar、footer、パンくずなどで同じpageへのlinkを出すことがあります。それぞれが別のnavigationなら、各まとまりで現在itemを示せます。しかし、一つのulの中へaria-currentを複数付けると、どれが現在なのか分かりません。templateごとに表示されるmenuを確認します。

まず、headerのmain menuから始めます。WordPressが出力するcurrent-menu-itemのclassを使ってCSSの見た目を整えているなら、そのclassが付くitemへaria-current="page"を加える方法を検討します。class名だけを見て一括で置換する前に、top page、固定page、投稿page、archive pageを開き、どのitemがcurrentになるかを見ます。親menuにcurrent classが付く構成では、子pageを開いたときの扱いも別に決めます。

footer menuは、headerと同じlinkを置く場合があります。footerも独立したnavigationとして読ませるなら、そこでの現在pageを示す意味があります。一方で、画像の中に装飾として置かれたlink一覧へ同じ属性を機械的に足す必要はありません。属性を増やすことではなく、利用者が現在地から次のpageへ移れることを目的にします。

見た目とkeyboard操作を一緒に確認する

aria-currentを追加したら、HTMLだけを見て終わりにしません。loginしていないbrowserでpageを開き、現在のmenuが見た目で分かるかを確認します。次にTab keyでmenuへ移動し、focusの位置、linkの順、現在pageの表示を見ます。現在pageをlinkにしない場合でも、keyboard操作が次のlinkへ自然に進むかを確認します。

たとえばService pageでService itemを現在地として見せるなら、AboutとContactへはTab keyで移動できます。Serviceをlinkのままにするなら、同じURLを再度開く操作になることを理解した上で置きます。どちらを選んでも、currentの色だけが薄く、focusが見えない状態にはしません。現在地の表示とkeyboardのfocusは別の役割です。

1. main menu、パンくず、paginationなど、現在地を示すまとまりを一つ選ぶ。
2. そのまとまりで現在itemが一つだけになるpageを決める。
3. aria-currentの値を現在pageならpage、手順ならstepのように選ぶ。
4. CSSで現在itemを見分けられる表示にする。
5. desktopとmobileでpageを開き、Tab keyでlinkの順とfocusを確認する。
6. template、対象page、現在itemの決め方を記録する。

この手順は、ARIA属性を多く入れるためのものではありません。menuのlink先、現在地、keyboardでの位置を同じpageで矛盾させないためのものです。JavaScriptでmenuを開閉する場合は、開閉の状態を伝える属性と現在pageを伝えるaria-currentを混同しません。

最初の一手は、headerのmain menuで現在pageを一つ選び、見た目、HTML、Tab操作を同じ画面で確認することです。現在地を分かるようにしてから、パンくずやpaginationへ範囲を広げます。