カルーセルとWAI-ARIA

Webアクセシビリティに関する情報発信を行っているWeb Axeのエントリー、About Carousels and ARIA Tabsでは、ページ内でカルーセルを使用する際にアクセシビリティの観点から注意すべき事柄が紹介されています。

記事を執筆したDennis氏は、カルーセルはそれほどひどいものではないとしながらも、彼が目にしたものにはアクセシビリティやユーザビリティを考慮せずに作成された物が多く、加えてモバイルデバイスで利用する際にも問題があるとしています。そのうえで、どうしてもカルーセルを使用しなければならない場合には、以下のようなことに注意したほうが良いと述べています。

• カルーセルのアニメーションは利用者が開始できるようにする
• 利用者がカルーセルを一時停止できるようにする
• コントロールにはテキストによるラベルがあることを保証する
• 表示中のパネルとそのコントロールが、視覚的にも機械的にも紐付けられていることを保証する
• （モバイル環境や運動障害者のために）コントロールに十分なヒット領域があることを保証する

また、開発者側にとって最も大変なのは、スクリーン・リーダー利用者にとってカルーセルをアクセシブルにすることであるとしたうえで、ストレートな対応方法はWAI-ARIAを用いることではないかと述べています。マークアップする際に何をすればよいかについて、次のように紹介しています。

• カルーセルコンテンツのコンテナ（以下「タブパネル」と呼称）には、それぞれ role 属性値 tabpanel を指定する
• 小さな点としてデザインされることの多いコントロールには、それぞれ role 属性値 tab を指定する
• コントロールやタブのコンテナには role 属性値 tablist を指定する
• タブパネルには aria-labelledby 属性を指定し、関連付けられるコントロールやタブの id 属性値を指定する
• 個々のコントロールやタブには、aria-controls 属性（どのタブパネルが関連付けられているかを示す id 属性値を指定）と aria-selected 属性（真偽値属性）を追加する

ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up

• アクセシビリティ

  Webサイトのアクセシビリティ対応状況の診断から構築・運用支援まで幅広く対応、障害者差別解消法への対応が気になるかたにも