(cache) はてなブログだろうが何だろうがメニューボタンはbuttonタグで実装しましょう

当ブログの画面左上にあるボタン、公開時は button タグを使っておらず、ご指摘いただきまして変更しました。
ということで自分への戒めも含めて書いた記事です。

button タグとは

W3cのHTML仕様書にも記載されている、「ボタン」を表すタグ（要素）です。
4.10.8 The button element — HTML5

なぜ button を使う必要があるのか？

実際のところ div や span などの要素とCSSだけでも、私たちが「ブラウザ」を「目で見て操作する」ために十分な見た目はつくれてしまいます。
ですが、例えばスクリーンリーダー（読み上げ機能）では、読み上げる内容や役割をコード（ html ）から判断します。基本的に「 button 」を使わないと「ボタン」だと認識されないのです。

あらゆる人があらゆる環境でアクセスできるようにするには、そのコンテンツがマシンリーダブルであること…つまりルール（HTML仕様書）に則り正しくマークアップされている必要があります。見た目だけそれっぽくするのではなく、意味のある要素を適切に利用することが大事です。

さらにWAI-AREAを使う

ソースを見ていただければと思いますが、今回はaria-controls ・ aria-expanded ・ aria-labelledby という属性を利用しています。これはWAI-AREAというアクセシビリティに関するリソースの一部です。

ARIAは単なる一連の推奨事項ではなく、HTMLに含めるための属性の集まりです。HTMLに対し、支援技術のユーザー向けに情報を追加したり変更したりする手段を提供しています。

〜 Heydon Pickering. コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション (Kindle の位置No.700-701). 株式会社ボーンデジタル. Kindle 版.

aria-controls は、その要素がどのコンテンツに対して表示切り替えなどの制御をしているのか？を特定します。今回では、button.menuButton の ON/OFF によって #menuBody を操作する、ことを表しています。

aria-expanded は、その要素の開閉の状態を true/false で示します。
false を指定することで、初期状態は閉じているボタンであることを表しています。

アイコンには画像を使う

ボタンのアイコン部分は画像（今回はインラインSVG）にしています。
もし span などを利用した「テキストコンテンツのないCSSスプライト」で実装した場合、キー操作でフォーカスすることができません。また a タグの場合も、「リンク Menu」などのように読み上げられ違和感があります。（参考：スマートフォンサイトの開閉するメニューとアクセシビリティ | Another Sky）)

またインラインSVGの場合は少し特殊で、 role=“img” と aria-labelledby を利用して読み上げに対応させています。ただし、環境によってはスクリーンリーダー側が対応していないらしく、img要素とalt属性にしておくのが無難なようです。（参考：日本語スクリーンリーダーにおけるインラインSVG対応状況のツラい話 - 週刊SVG）

当サイトにてインラインSVG使ってるのはアニメーションをつけたいからなのです。ところが筆者の知識・時間不足により、今のところアニメーション無しとなっています…。

試してみた

私はMacを使っていて、標準でVoiceOverという音声読み上げが備わっていますので試してみました。
システム環境設定/アクセシビリティ/VoiceOver から有効化、利用できます。（ショートカットキーは command + F5 ）音量に注意しましょう。 Apple のアクセシビリティ：VoiceOver スタートアップガイド