旧ブログの画面左上にあるボタンをbuttonではなくspanで書いており、アクセシビリティの観点から問題があるとアドバイスいただき変更しました。ということで、自分への戒めも込め、経緯と改善内容をまとめた記事です。

なぜ良くないのか

例えば、これらの span 要素とCSSだけでハンバーガーアイコンを表示させることができます。

しかしテキスト要素のない span 要素はデフォルトではフォーカスを受け取ることができません。すなわち、キーボードやスクリーンリーダーなどの方法で操作することができないのです。

解決策

状況に応じた様々な解決手段があるそうですが、今回は以下の３つの対策をしています。

button を利用する

「ボタン」を表す要素、 button を使いました。W3CのHTML仕様書にも記載されている要素です。
4.10.8 The button element — HTML5

これにより、ブラウザやスクリーンリーダーも「ボタン」だと認識してくれます。

さらにWAI-ARIAを使う

aria-controls / aria-expanded / aria-labelledby という属性を利用しています。これはWAI-ARIAというアクセシビリティに関するリソースの一部です。

ARIAは単なる一連の推奨事項ではなく、HTMLに含めるための属性の集まりです。HTMLに対し、支援技術のユーザー向けに情報を追加したり変更したりする手段を提供しています。
Heydon Pickering. コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション (Kindle の位置No.700-701).

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

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

アイコンには画像を使う

ボタンのアイコン部分はインラインSVGにしています。通常の画像と違い、 role="img" と aria-labelledby を利用することで読み上げに対応させています。 わざわざそうしているのは、アニメーションでアイコンの形を変えたいからです。

ただし、環境によってはスクリーンリーダー側が対応していないらしく、img要素・alt属性を使うのが無難なようです。

試してみた

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

Apple のアクセシビリティ：VoiceOver スタートアップガイド

バッチリ、キー操作でボタンクリック/メニュー開閉ができるようになりました…！

ちなみに別の旧ブログ（WordPress、テーマはmodernize）でもVoiceOverを試してみたら、問題なくメニュー開閉できました。テーマ作者の▲さん@misumi_takumaさんさすが。

ちなみに、GitHubさんはちゃんとメニューの内側にある項目にアクセスできました。

一方、できないサイトもやっぱりたくさんありました…。ﾌﾞﾙﾌﾞﾙ

まとめ

今回の button に限らず、正直あとまわし・ないがしろになりがちなアクセシビリティへの配慮。利用者側のメリットは当然ですが、コンテンツをつくる側としても、コードが原因で読んでもらえない（読めない）という状況は悲しいですよね。

ブログのカスタマイズであっても、こうした知識を元に、単にコピペで済ませず適切なマークアップを心がけたいですね。ちなみに教えていただいたことを試してみただけで、自分自身もまだまだ知識はありません。

というかアクセシビリティのイベントに以前参加してたんですが全然活かせてない…。とりあえずこの本も買ったので、少なくとも基本的な考え方はしっかり理解に落とし込みたいと思っています。

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

謝辞

ご指摘と、そこから改善例まで作成してくださったますぴーさん@masuP9、 すごく勉強になりました！ますぴーさんに発見いただくきっかけのツイートをしてくださったシマさん@shima_x_oさんもありがとうございました！！