アクセシビリティとレスポンシブ？！_memo

schooで太田良典さんの「Webアクセシビリティ入門-ビジュアルデザイン-」を受講（最後の20分だけ…）して、これは…と思ったものを、取り急ぎ。

「アクセシビリティを確保するための、ビジュアルデザインのポイント」という内容で、以下の5つのポイントを挙げていました。なかでも”拡大できるようにする”の項についてのメモです。

1. 視覚に依存せずテキストで示す
2. 文字は画像にせずテキストにする
3. フォーカス表示を消さない
4. 閃光を使わない
5. 拡大できるようにする

拡大表示の工夫

拡大というと、「小・中・大」ボタンで表示を切り替えるものをイメージするかもしれないけど、そうではない。ブラウザの拡大表示をしたときのレイアウトがどうなるのかを考えることが求められる。

ex)

• NG：スクロールできない要素がはみでる。

  OK：モダールウィンドウなどで、画面（ブラウザ幅）からはみ出す場合、スクロールの設定をしておく

• NG：スクロールして、ナビなどが追従してくるビジュアルを、拡大表示していくとナビの要素がコンテンツを覆い隠してしまうことがある。

  OK：拡大して画面が狭くなると、スクロール追従しないように設定する。（jsを用いて150%を越えるとヘッダ、フッタの追従が消えるなど…）

• NG：文字サイズを大きくすると、文字が重なって読めなくなることがある。

  OK：拡大しても破綻しないようにする。
  例えば…レスポンシブを使うことによって、拡大表示の際に、文字が重ならないのはもちろん、要素がはみ出ないような工夫をする。

• NG：拡大や文字サイズ変更ができない。（スマートフォンのピンチアウト）

  OK：拡大を禁止していないか確認する。

文字サイズを大きくした時の可読性について、レスポンシブを用いることで解決することもできるという発想が新鮮…というか盲点でした。確かに、拡大表示することは、ブラウザの幅を狭めることと同じ解釈になるのですが、そんなつもりで実装していなかった。あくまでスマホサイトとPCサイトの一仕様として考えていました。
講義で触れていたのは、”拡大しても表示が破綻しないようにする”ということ。拡大してデザインが崩れるかどうかではなくて、可読性、視認性が損なわれていないかということです。例えば、拡大表示にすると文字が重なって読めなくなるサイトがあります（line-heightやfont-sizeの設定もろもろが原因）。また、これは講義で触れていたかわからないですが、要素がブラウザからはみ出てしまうのはよくあることです。レスポンシブデザインを採用することは、ブラウザ幅に対しての可読性を得られる…本当、そのまますぎて納得せざるおえない。
アクセシブルな観点でレスポンシブデザインを実装したことがないので、今回の記事は本当に覚書きです。

別にアクセシブルな観点はなくても、たまたまレスポンシブならOKってことでもないと思うんですよね。目的が変われば設計も実装手段も変わってくるはず。どこかのタミングで、要件を想定して、設計と実装のシュミレーションをしてみようと思います。面白い、と思いつつも実際にどんな場面で活用できるのかは、実感としてはまだ未知です。でもたぶん大きな収穫です。