第4回 D2D アクセシビリティ勉強会：プルダウンメニューとカルーセル

yotigory

10年前

今回のお題は、いつも議論の的「プルダウンメニューとカルーセル」でした！
過去の勉強会で質問があったり議論をしたりするものの、時間切れ～となっていたこのテーマを今回しっかりやりました！

勉強会のツィートまとめ
↑
今回は、誰かがやってくれてて、、、あざます。

最初に気をつけるべきことの説明がありました

マウス操作だけを前提とせず、キーボードやタッチパネルでも操作できるようにしよう。
キーボード用／マウス用のイベントを両方使えるようにしよう。
キーボードだけを使ってアクセスできますか～？
メモ：onClickは機器に依存しないから便利☆
フォーカス順序は、HTMLソースの順序（親子関係）と見た目の順序をあわせよう。
フォーカス順序がイケてない場合はtabindexを使う
css無効時にちゃんと、文書構造が保たれていますか？
フォーカス移動だけで勝手に遷移させないようにしよう。
スクリーンリーダーでの音声読み上げに対応しよう。
画像にalt属性を入れる
将来に向けてキレイなマークアップをしましょう！
WAI-ARIAでUAに役割を伝えましょう

ナビゲーションは、サイトにとって大切なものなのでJavaScript無効時も使用できるようにしましょう。デザインは崩れてもいいけど、情報が取れなくなる（末端ページへの導線がなくなる）のは問題です！

フォーカスの移動で利用者がコンテンツ内（カルーセル）に閉じ込められないようにする
コンテンツを意味のある順序で並べよう
カルーセルで言うと、画像リストのあとにコントロールボタンというカンジ
理解できるだけの十分な時間を与えられること
切り換えられる画像上の情報（特に文字情報）を理解するだけの時間の配慮をしよう
自動で動いているカルーセルなどは一時停止／再開できるようにする
JavaScript無効時でも、カルーセルに含まれる全ての画像を表示され、すべてのリンク先に遷移できるようにする。
上記が満たせない場合は、noscript要素で代替手段を提供するなど。

※本当はもっともっともっと細かくあったんですが、書ききれませんでした。。。
よって～私なりにココは最低抑えておこう！というところをまとめております。

「プルダウンメニューチームB、C」と「カルーセルチームA」に分かれて二時間みっちり手を動かしましたヨ

毎度のことですが、やっぱり手を動かすと時間の進みがスゴイ！！！あっという間です。

「slick」というプラグインが結構デフォルトでイケてる！
slick – the last carousel you’ll ever need

・キーボードのTABキーと矢印キーで操作ができる。
・js無効時には、全ての画像を表示し、遷移も可能。
・css無効時でも、リスト構造が保たれている。

ただし、自動（auto）で使った場合、マウスホバーではカルーセルを停止するが、キーボードのフォーカスでとまらなかったー
オートプレイしなかったら、アクセシブルです。。。

オートプレイで使いたい場合は、他をさがすかカスタマイズ（一時停止ボタン・再生ボタンの追加）が必要です。

イチから作りましたが時間切れのため、マウスアウトで下層が出たまま。。。
WAI-ARIA対応
nav role=”navigation”
li class=”menu-item has-dropdown” role=”menuitem”

イチから作ってナントカできたけど、ソースの整理が、、、
３階層までがんばった！

よくあるcurrent表示の●●○●って、白が現在地表示なんだけど、色だけじゃなく大きさで示したほうが伝わる
カルーセルはやっぱりdivじゃなくてUl要素
左右（）←こういうのもコントラストに気をつける
フォーカス時のアウトラインを目立つようにする
ul要素に「role=”navigation”」、img要素に「role=”menuitem”」を定義することで「ナビゲーション」「メニュー項目」と読み上げることができる。（少しでも役割を伝えるために）

プルダウンメニューの下層があるのかないのかが分るようなアイコンをつける。
下向き▼みたいななやつ。
Tabキーですべてのリンクを移動できるのは確かにアクセシブルだけど、ナビゲーション後方のメニューにサッと行きたいときは、矢印キーで移動できるというのも大変便利です。

@milk54さんが、「みなさん、悲しいお知らせです」。。。から今日のまとめははじまりました。

私は、もしかしてこの勉強会からサヨナラとか！！！と半分涙出そうになってたんですが、そうじゃなかった♪ほっ（*´∇｀*;△

そうじゃなくって！「プルダウンメニューとカルーセル」はアクセシビリティ的に相性が悪い！！っていう話でした。
「だから！使う前に本当にそれが必要なのか考えて～」

(」ﾟﾛﾟ)｣(｣ﾟﾛﾟ)｣(｣ﾟﾛﾟ)｣ｵｵｵｵｵｯｯｯ

今日勉強したばっかなのに～～～ルルル～
一瞬ポカンて私はなったんだけど、@milk54さんと@SawadaStdDesignさんの話を聞いて、確かに。。。って考えさせられました。

プルダウンメニューなのか気づかない。下矢印▼の表示もCSSならスクリーンリーダーで読み上げられない。WindowsのハイコントラストモードではCSSの背景画像は見えない。
最初から中身が見えない。
比較できない（並べてみることができないから）
操作付加が高い、複雑。

そうはいってもまだまだ避けられそうにない現実。でも、使う前によ～く考えることが大切というコトでした。
そして、使うならチャント今日の勉強を活かしてできる限りアクセシブルなもので行こう！

ウェブのテクニカルな内容とデザイン的な内容を横断した、特定のプロダクトや技術に限定しない勉強会。いろんな勉強会やってます！
次回以降のイベントについて通知を受け取りたい方は、DoorKeeperでメンバー登録できます。
D2Dのdoorkeeperページ

3月はGitやるみたいですヨ～☆