やらねば.com

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

Webアクセシビリティとは簡単に言うと、どんな利用者の環境であっても使い易いサイト、情報へのアクセスのし易さという事でしょうか。
定義を検索してみても、何だか難しい文書へのリンクが張られたサイトばかりが見つかります。
そんなものを見て考え込むよりも、実際に自分で試して、使い易ければそれはWebアクセシビリティの高いサイトなのだと私は思います。

勿論、自分をあらゆる環境に置く事は出来ませんが、それを再現する為のいくつかのツールは無料で提供されています。
1つは音声ソフトのスクリーンリーダーで「NVDA」といった無料のソフトも公開されています。
又、OS にも Windows なら「ナレーター」、Mac・iOS なら「VoiceOver」といったスクリーンリーダーが標準で搭載されており、簡単に試す事が出来ます。
これらのツールを使えば、スクリーンリーダーユーザーの目線からWebアクセシビリティを考える事が出来ます。

見出しタグを適切に配置する

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

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

理想の見出し配置は、ページ最初の見出しに<h1>を置き、本文にすぐにアクセス出来る様にし、他の主要なコンテンツにも見出しタグを付けてアクセスし易くする様にするといった所でしょうか。

聞き取りやすい文章にする

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

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

又、記事中に主題とは関係無い画像やテキストが挟まっていると、スクリーンリーダーはそれらも読み上げてしまい、本文の内容を上手く追えなくなる可能性が有ります。
必要な画像には alt 属性を付けて、スクリーンリーダーでも読み上げる説明文を挿入する。読み上げる必要の無い要素には aria-hidden="true" を付加して読み飛ばす様に対応します。

アイコンフォントについては
アイコンフォントのウェブアクセシビリティを向上する

幸いにも無料でスクリーンリーダーを試せる環境は充実してきていますし、まずは実際に経験してみる事が重要かと思います。