Webアクセシビリティを考えたレイアウトとは

最終更新日:

Webアクセシビリティとは簡単に言うと、誰にでも使いやすいサイトという事でしょうか。
Webサイトを構成する上で見るだけでは無く、Webサイトから情報を聴くという事を意識する必要が有ります。

スクリーンリーダーでのサイトアクセス

視覚に障害が有る方、ロービジョンの方でも音声読み上げソフトのスクリーンリーダーを使ってサイトにアクセスして情報を集める事が出来ます。
そして、スクリーンリーダーユーザーは、Webサイトを巡回する際にキーボードの Tab キーを押して移動したり、見出しタグを探しながら情報にアクセスします。

しかし、サイトにボタンやリンクが多過ぎたり、見出しタグが配置されていない、またはサイドバーに大量の見出しが置かれている様な構成では、サイドバーを延々と巡回させられた上に結局本文にたどり着けないという事が起きます。

サイトの構造をシンプルに

当サイトではシンプルなデザインにし、ボタンやリンクは極力無くす。そして、1文・1段落を短過ぎず長過ぎない様にする事を心掛けています。

1文・1段落の長さと言うのは、スクリーンリーダーが1度に読み上げる範囲で、長過ぎると聞き取れなかった時に読み返させると、また文の最初から聞き直さなければならないという事があります。
逆に短過ぎるとキーボード操作が多くなり、iPhone の VoiceOver 等を使っていると、フリック操作で指が痛くなったりします。

又、記事中に主題とは関係無い画像やテキストが挟まっていたりすると、スクリーンリーダーはそれらも読み上げてしまい、本文の内容を上手く追えなくなる可能性が有ります。

WAI-ARIA の導入

WAI-ARIA を導入する事でサイトのデザインを変える事無くスクリーンリーダーでは理解出来ない記号やコンテンツの情報を渡す事が出来る様になります。

WAI-ARIA の対応はスクリーンリーダーやブラウザ毎に異なるので
aria-label 属性の動作検証
でも検証しつつ、当サイトにも積極的に実装して行こうと考えています。
Webアクセシビリティに詳しい方、実際にスクリーンリーダーを利用している方のご意見など御座いましたら是非お聞かせ下さい。