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

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

ウェブアクセシビリティとは簡単に言うと、誰にでも使いやすいサイトという事でしょうか。
ウェブサイトを見るという事だけで無く、ウェブサイトから情報を聴くという事を考えなければいけません。

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

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

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

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

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

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

ですが、閲覧者さんの大半は全く問題にはしていないでしょうし、シンプルにし過ぎる事で欲しい情報が得られなくなってしまうのではないかという心配が有ります。

WAI-ARIA の導入

WAI-ARIA の詳しい説明はしません、というか出来ないのですが、この機能を組み込む事でサイトのデザインを変える事無くスクリーンリーダーに情報を渡す事が出来る様になります。

WAI-ARIA の対応はスクリーンリーダーやブラウザ毎に異なるので検証も難しく、発展途上の技術だと思いますが今後に期待出来るものだと思います。

まだまだ勉強しながらの実装なのですが、積極的に導入して行こうと思っています。
ウェブアクセシビリティに詳しい方、実際にスクリーンリーダーを利用している方のご意見など御座いましたら是非お聞かせ下さい。