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

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

• オートプレイOFF。
• 無限ループOFF。
• キーボードのTABキーと矢印キーで操作ができる。
• js無効時には、全ての画像を表示し、遷移も可能。
• css無効時でも、リスト構造が保たれている。
• ul要素に「role="navigation"」、img要素に「role="menuitem"」を定義することで「ナビゲーション」「メニュー項目」と読み上げることができる。 （少しでも役割を伝えるために）
• 「タブ」「タブ項目」とする方法も考案されている。(参考：About Carousels and ARIA Tabs (Web Axe)）

  
  <div>
  <ul>
  <li id="img1" role="tabpanel" aria-labelledby="tab1"><img src="img1.png" alt="img-No.1"></li>
  <li id="img2" role="tabpanel" aria-labelledby="tab2"><img src="img2.png" alt="img-No.2"></li>
  <li id="img3" role="tabpanel" aria-labelledby="tab3"><img src="img3.png" alt="img-No.3"></li>
  </ul>
  <ul role="tablist">
  <li id="tab1" role="tab" aria-controls="img1" aria-selected="true"><button type="button"><img src="btn.png" alt="No.1"></button></li>
  <li id="tab2" role="tab" aria-controls="img2" aria-selected="false"><button type="button"><img src="btn.png" alt="No.2"></button></li>
  <li id="tab3" role="tab" aria-controls="img3" aria-selected="false"><button type="button"><img src="btn.png" alt="No.3"></button></li>
  </ul>
  </div>
  
  

  • ※ role="tab"、"tabpanel"はPC-Talker、VoiceOver、NVDA未対応

変更したポイント

• div要素（サンプル）からul要素に変更。（WAI-ARIA未対応スクリーンリーダーにも◯）
• 左右（< >）ボタン色を濃い#666に変更。（コントラスト比 5.7：1）
• ボタンdisabled時の透明度を0に変更。（操作できないことを分かりやすく）
• カレントのドットサイズを拡大。（色だけの区別にならないように）
• フォーカス時のアウトラインを目立つように変更。