Webアクセシビリティ対策について

Webアクセシビリティとは、年齢や障がいの有無、利用環境にかかわらず、すべての人がWebサイトやWebサービスを支障なく利用できる状態を実現することを指します。

具体的には、視覚・聴覚・身体・認知などに何らかの制約がある方だけでなく、
・スマートフォンで片手操作している人
・一時的に音が出せない環境にいる人
・目が不自由な方
・手先が不自由な方
など、あらゆるユーザーが「情報を取得でき、操作でき、理解できる」ことを目指す考え方です。

アクセシビリティを意識した設計・実装を行うことで、ユーザー満足度の向上だけでなく、SEOやCVR改善、ブランド価値の向上にもつながります。

flipdeskでは画像バナー、テキスト+画像バナーに画像を設定した時に任意のaria-label属性を設定できます

キーボードナビゲーションとは

マウスを使わず、Tabキーなどのキーボード操作だけでWebサイト内を移動・操作できるようにすることを指します。
これは視覚障がいのある方や、マウス操作が難しいユーザーにとって重要なアクセシビリティ要素です。

Flipdeskでは、キーボード操作による利用を想定し、以下の対応を行っています。

キーボード操作でフォーカスを移動した際に、
通常のWebページ要素だけでなく、Flipdeskの表示要素もフォーカス対象として拾うように設計されています。

これにより、バナー・ポップアップ、もマウスを使わずに操作することが可能です。

Flipdeskのポップアップが表示された際には、
ポップアップ内の要素へフォーカスが移動するよう制御されています。

これにより、
・どこに操作対象があるのか分からなくなる
・裏のページにフォーカスが残ってしまう
といった問題を防ぎ、直感的かつ安全に操作できる状態を保ちます。

aria属性とは

Webページ上の要素に対して、その役割や状態を支援技術に正しく伝えるための属性です。
スクリーンリーダーなどを利用しているユーザーにとって、「その要素が何なのか」「何ができるのか」を理解するための重要な情報となります。

Flipdeskでは、スクリーンリーダーなどでFlipdesk要素が読み込まれた際に、
どんな役割を持つ要素なのかが分かるよう、aria属性を適切に付与しています。

例えば、見た目はボタンでもHTML上はdivやspanで構成されている要素に対して、

role="button"

のようなARIA属性を設定することで、
支援技術には「これはボタンである」と正しく伝えることができます。

flipdeskのWebアクセシビリティ対策について記載します