ITエンジニア/デザイナ向けにオープンソースを毎日紹介

今回のテーマは可読性です。インターネットがより多くの人に広まっていく中で考えなければならないのは、万人がアクセスしやすく、かつ読みやすいコンテンツの提供です。もちろんオープンソース・ソフトウェアにおいてもその取り組みは多数行われています。

最近では特にWebにおいて可読性/Readabilityを高めるための取り組みが行われています。今回は可読性に求められる主な要件と、関連オープンソース・ソフトウェアを紹介します。

要件

JIS X 8341高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス- によればもっと多くの要件がありますが、取り組みやすい所では以下のような要件があります。

コントラスト/カラーリング

背景色と文字色の組み合わせです。高コントラストであれば視認性は良くなりますが、可読性が良いという訳ではありません。クリーム色と黒と言った具合に背景色の色もまぶしくない程度に抑えると良いようです。

また、白背景ではなく逆に黒系の背景にして文字を白系にすることで眩しさを抑えることもできます。

フォント/フォントサイズ

可読性はフォントに大きく左右されます。何となく格好いいサイト=文字が小さいイメージがありますが、最近では大きな文字で訴えかけるようなサイトが増えてきていますので改善しつつあるのかなと思います。

また、JavaScriptなりでフォントサイズを制御したり、フォントを大きくしたとしてもデザインが崩れないようなコーディングをするといった工夫が必要ではないでしょうか。

スクリーンリーダー対応

テキストコンテンツメインのサイト、例えばメディアやブログサイトはスクリーンリーダーの存在を考えるべきでしょう。最近ではスマートフォンやタブレットの標準機能にスクリーンリーダーが入ってきていますので、動作確認がしやすくなっているかと思います。

非テキストコンテンツの扱い/Flash

画像に対してalt属性を入れるというのは基本として、画像/動画/Flashなどの非テキストコンテンツを扱う際には可読性を殆ど考慮できないので注意が必要です。動画の再生ボタンをリンクでも用意したり、説明を追加するなどといった工夫が良さそうですね。

HTMLタグ

可読性を高める上でHTMLタグの設計はとても大事です。リンクの場所であったり、タグの整合性なども表示の際に大きな影響を与えます。また、上記のようにフォントサイズを変更しても崩れないレイアウト設計など、コーディングする上で注意すべき点がたくさんあります。

適切な要素を入れる、メタタグを適切に設定するなどちょっとした注意で可読性は大きく変わってきますので、そういった点に注意してコーディングすると、これまでとは違うタグ構成になったりするのではないでしょうか。

以下はプレミアムのみです。

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2