第4回 D2D アクセシビリティ勉強会 準備資料カルーセル サンプル2

jQueryプラグインSlickのカスタマイズ例

• オートプレイON。
• 無限ループON。
• TABキーで操作可能。
• キーボードのTABキーと矢印キーで操作ができる。（ドットによるコントロールはVoiceOver未対応ぽい）
• js無効時には、全ての画像を表示し、遷移も可能。
• css無効時でも、リスト構造が保たれている。
• ul要素に「role="navigation"」、img要素に「role="menuitem"」を定義することで「ナビゲーション」「メニュー項目」と読み上げることができる。 （少しでも役割を伝えるために）

変更したポイント

• 一時停止／再生ボタンを追加。
• div要素（サンプル）からul要素に変更。（WAI-ARIA未対応スクリーンリーダーにも◯）
• role属性「navigation」の追加。（少しでも役割を伝えるために）（role="tab"はVoiceOver未対応）
• 左右（< >）ボタン色を濃い#666に変更。（コントラスト比 5.7：1）
• ボタンdisabled時の透明度を0に変更。（操作できないことを分かりやすく）
• カレントのドットサイズを拡大。（色だけの区別にならないように）
• フォーカス時のアウトラインを目立つように変更。