メルマガ第98号を発行しました!

こんにちは!2016年9月28日(水)にメルマガ第98号を発行しました!

[連載]植木 真の「こんなブログ記事見つけました!」
第53回:Dos and don'ts on designing for accessibility
[不定期連載]辻 勝利の「Life with 支援技術 Returns」
オーディオゲームの進め

[連載]植木 真の「こんなブログ記事見つけました!」
第53回:Dos and don'ts on designing for accessibility

「Do」と「Don't」

「Dos」と「Don'ts」、日本語で言うと「べし」と「べからず」とか、「やるべきこと」と「やってはいけないこと」とか、「良い例」と「悪い例」という感じでしょうか。

イギリス政府のWebサイトなどを担当する「政府デジタルサービス」という部署のブログで、この「べし・べからず集」が公開されました。イラストの入ったポスターとしてまとめられていて、アクセシビリティを確保、向上するための一般的なデザイン・ガイドラインになっています。

公開されたのは、次の6つのユーザーグループを想定したガイドラインのポスターです。

  • ロービジョン
  • 聴覚障害
  • ディスレクシア
  • 運動障害
  • 自閉症スペクトラム
  • スクリーンリーダー利用者

ポスターはGitHubで入手可能です。今回は、この6つのポスターに書かれているガイドラインを一緒に見ていきましょう。とりあえず、一気に日本語に訳してみます。強引に意訳しているところもあるので、微妙なニュアンスはポスターの英文から直接感じとってください(苦笑)

自閉症スペクトラムの利用者のためのデザイン(ポスター画像)

やるべし

  • シンプルな色使いにする
  • 平易な言葉遣いにする
  • シンプルな文章にして、箇条書きを使う
  • 意味の分かるボタンにする、例えば「ファイルを添付」
  • シンプルで一貫性のあるレイアウトにする

やるべからず

  • 鮮やかなコントラストの色を使う
  • 言葉の「あや」や慣用句を用いる
  • テキストを壁のように羅列する
  • ボタンを曖昧で予測不可能にする、例えば「ここをクリック」
  • 複雑かつ乱雑なレイアウトにする

スクリーンリーダー利用者のためのデザイン(ポスター画像)

やるべし

  • 画像には代替テキスト、動画にはトランスクリプト(テキストに書き起こした代替コンテンツ)を提供する
  • 意味が通じる順序で、ロジカルなレイアウトにする
  • HTML5を使ってコンテンツを構造化する
  • キーボードだけでも操作できるようにする
  • 意味の分かるリンクや見出しにする、例えば「お問い合わせ」

やるべからず

  • 情報を画像や動画だけで提示する
  • コンテンツをページ中に散らばす
  • 構造を文字サイズや配置だけで示す
  • マウス操作や画面を見ることを前提にする
  • 意味不明なリンクや見出しにする、例えば「ここをクリック」

ロービジョンの利用者のためのデザイン(ポスター画像)

やるべし

  • 十分なコントラストと読みやすい文字サイズにする
  • 全ての情報をHTMLのWebページで提供する
  • 色、カタチ、文字を組み合わせる
  • 意味が通じる順序で、ロジカルなレイアウトにする。そして、文字サイズを200%にしたときも閲覧できるようにする
  • ボタンや通知を閲覧の流れの中に置く

やるべからず

  • 弱いコントラストと小さい文字サイズにする
  • 情報をダウンロードさせる
  • 色だけを使って意味を伝える
  • コンテンツをページ中に散らばす。そして、文字サイズを200%にしたときに横スクロールを強いる
  • アクションを閲覧の流れと分断する

運動障害の利用者のためのデザイン(ポスター画像)

やるべし

  • クリック可能領域を大きくする
  • フォーム・コントロール間のスペースを空ける
  • キーボード操作や音声認識での操作に対応する
  • モバイルやタッチスクリーンに対応する
  • ショートカットキーを提供する

やるべからず

  • 細かな操作を要求する
  • フォーム・コントロールをぎゅっとまとめる
  • マウス操作を多く要求する動的なコンテンツにする
  • 短い制限時間を設ける
  • 入力やスクロールを多く強いる

聴覚障害の利用者のためのデザイン(ポスター画像)

やるべし

  • 平易な言葉遣いにする
  • 動画には字幕やトランスクリプトを提供する
  • 意味が通じる順序で、ロジカルなレイアウトにする
  • コンテンツを小見出しや画像、動画で小分けにする
  • 手話通訳を利用できるようにする

やるべからず

  • 難解な文言や言葉の「あや」を使う
  • コンテンツを音声や動画だけで伝える
  • レイアウトやメニューを複雑にする
  • 長い文章を読ませる
  • 連絡手段が電話しかない

ディスレクシアの利用者のためのデザイン(ポスター画像)

やるべし

  • 文字だけでなく、画像やダイアグラムを使う
  • 文字を左寄せにして、一貫性のあるレイアウトにする
  • コンテンツを他のフォーマットでも提供する(例えば、音声版や動画版)
  • コンテンツを短く、明解で、シンプルにする
  • 背景色とい文字色のコントラストを変更できるようにする

やるべからず

  • 大量の文字を敷き詰める
  • 下線を引く、イタリックにする、大文字だけで書く
  • 前のページの内容を覚えさせる
  • 正確なスペリングを要求する
  • 1か所に情報を詰め込み過ぎる

つづきはメルマガで……。

comments powered by Disqus