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

「Do」と「Don't」

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

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

• Dos and don'ts on designing for accessibility

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

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

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

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

やるべし

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

やるべからず

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

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

やるべし

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

やるべからず

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

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

やるべし

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

やるべからず

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

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

やるべし

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

やるべからず

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

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

やるべし

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

やるべからず

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

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

やるべし

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

やるべからず

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

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