LOGzeudon

名古屋で働いているWebデザイナーのブログです

メニューボタンを span だけで実装するのは良くないのでやめた話

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

なぜ良くないのか

<span></span>
<span></span>
<span></span>

例えば、これらの span 要素とCSSだけでハンバーガーアイコンを表示させることができます。
しかし、テキスト要素のない span 要素はデフォルトではフォーカスを受け取ることができません。すなわち、キーボードやスクリーンリーダーなどの方法で操作することができないのです。

解決策

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

button を利用する

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

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

さらにWAI-ARIAを使う

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

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にしています。通常の画像と違い、 role="img" と aria-labelledby を利用することで読み上げに対応させています。
わざわざそうしているのは、アニメーションでアイコンの形を変えたいからです。今のところアニメーション無しなのは、筆者の知識不足のためです…。

ただし、環境によってはスクリーンリーダー側が対応していないらしく、img要素・alt属性を使うのが無難なようです。(参考:日本語スクリーンリーダーにおけるインラインSVG対応状況のツラい話 - 週刊SVG

試してみた

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

バッチリ、キー操作でボタンクリック/メニュー開閉ができるようになりました…!
(変更前は試していないのであしからず)

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

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


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

まとめ

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

ブログのカスタマイズであっても、こうした知識を元に、単にコピペで済ませず適切なマークアップを心がけたいですね。

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

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

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

  • 作者: ヘイドン・ピカリング,Heydon Pickering,伊原力也,太田良典,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2015/03/27
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る

謝辞

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