［連載］植木 真の「こんなブログ記事見つけました！」
第57回: Using the aria-current attribute！

aria-current属性、コレいいかもしんない！

このメルマガの読者の皆さんなら「WAI-ARIA」のことは既にご存知のことでしょう。そして、実際の案件で aria-*属性やrole属性を使っていることもあるのではないでしょうか。

ワタクシも「WAI-ARIA」を何らかの形で使うことが、ここ最近かなり増えてきました。今年は「WAI-ARIA」の実装がますます進んでいくのではないかと感じています。そう、スクリーンリーダーによるサポート向上にも期待しています。

さて、皆さんは "aria-current属性" というのをご存知ですか？

今日はこちらのエントリーをご紹介します。

• Using the aria-current attribute

Common patterns

WebサイトやWebアプリなどでは、次のようなアイテムを示すために、見た目には文字色と背景色を反転させたり、他と区別できるようにアイコンを変えたりしていますよね。

• ナビゲーションのブロックにある現在のページやリンク
• プロセス表示やプログレスバーでの現在のステップ
• カレンダー内での本日
• タイムテーブルやスケジュール表での現在の時間
• パンくずリストや地図での現在位置

並列に並んでいる他のアイテムと見た目を変えることによって、今どこにいるのかを分かりやすく示しているのですが、例えばスクリーンリーダーの読み上げでも同じようにそのことを伝えるにはどうしたらよいか？

見出しならh1～h6要素、リストならul要素とli要素でマークアップすることによって、その文書構造を見た目ではなく、いわばマシンリーダブルにすることができます。

でも、このいわゆる「今ココ！」的な見た目には、コレといった解決策がなかったように思います。

例えば、ローカルナビゲーションの場合、ずらりと並んだリンクの中で、そのページを表示しているときは「自分リンク」にならないように、リンクのa要素を外すとか。

あるいは、少しでも何らかの違いを明示したいということで、em要素やstrong要素でマークアップしておくとか。

前者の場合、リンクがずらりと並んでいる中でリンクではないテキストがあることによって、たしかに他とは違うことは示せるかもしれません。また、後者の場合、ほとんどのスクリーンリーダーでは特に読み上げ方が変わるわけでもなく、どちらも「今ココ！」という情報がマシンリーダブルにはなっていません。

いろいろなコードをチェックしていてよくあるのは、エントリーにある最初のコード例にあるように、CSSで異なる見た目のスタイルを設定して、HTMLではclass属性を付与しているだけというものです。筆者も指摘しているように、これはスクリーンリーダーには解釈できないため、見た目だけでしか「今ココ！」というのが分かりません。

他にも筆者は、画像を使って、その代替テキストに「現在のページ」と記述して、スクリーンリーダーでも読み上げられるようにするという方法も挙げていますが、なんかこうハック感が拭えないと述べています。

「HTML5」でこの「今ココ！」を明示できる新しい要素か属性が定義されないかなと、実はひそかに期待していたんですけどね。あと、パンくずリストをマークアップする要素や属性とかも。

The aria-current attribute

とまあ、そんなモヤモヤがずーっと内心くすぶっていたんですが、それを解決してくれそうな属性が登場しました。それが "aria-current属性" です！

つづきはメルマガで……。