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

公開日2018年8月22日更新日

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

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

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

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

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

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

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

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

WAI-ARIA の導入

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

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