frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Webを仕事にするなら覚えておくべきアクセシビリティ~デザイニングWebアクセシビリティまとめ②~

スポンサードリンク

デザイニングWebアクセシビリティのまとめ②です

frontendmemo.hatenablog.com

今回は

  • ナビゲーション設計
  • システム設計

です。
ナビゲーション設計は、ブログにおいても大変ためになる内容でした。
いかに、ユーザーの目的を達成しやすくナビ構成を考えるかという話です。
システム設計は、アクセシビリティに関わることだらけなんですよね笑

最後の最後で裏切られる

とかあるあるで笑ってしまいました。


デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

目次

ナビゲーション設計

  • 似たような機能が複数ある場合できる限り一つにします。
  • できる限り複数のナビゲーションを置く
  • サイト全体を通じて一貫したルールを作る

問題

  • 分類がユーザーのニーズに合ってない
  • 分類が1種類に限定されている
  • サイト内でコンテンツや機能が分散している

解決

  • ペルソナの行動を時系列で可視化したカスタマージャーニーマップを作成しておくと参照しやすくなる
  • 競合のサイトや検索ワードを調査する
  • コンテンツ目録を作成する

問題

  • カテゴリ名がわかりにくい

解決

内容を推測できるカテゴリ名にする

問題

  • ナビゲーションに一貫性がない

解決

  • ナビゲーションルールを設計
    • フォームではユーザーの作業に集中させるためナビゲーションを消す
    • ガイドラインを定義

問題

  • 現在地を把握する手段がない
  • 現在地と間違えそうな表現がある

解決

問題

解決

システム設計

入出力項目の検討

  • ユーザーの負担ができるだけ少なくなるよう心掛ける
  • パスワードを入力させるような画面は独立させ、他の項目と一緒に入力させないようにする

問題

  • フォームの文脈がわからない
  • フォームの全体像がつかめない
  • 準備が必要なことがわからない
  • 最後の最後で裏切られる

解決

  • フォームのタイトルを明示し、説明する
    • フォームに必要なことを記入してくださいは不要
  • フォームの全体像が所要時間を示す
    • ステップを表すインジケーターを配置
  • 準備や判断が必要な場合は冒頭で示す
    • 特定の書類に情報の記載がある場合、あらかじめガイドすると良いでしょう。
  • ユーザーの要求を満たせない場合。そのことを示す

問題

  • 一度に大量の入力を求められ、入力しきれない
  • 任意で良い項目を必須にしているため、入力が増える
  • 補完できるはずの内容を手入力させられる
  • メールアドレスを2回入力させられる

解決

  • 入力項目を可能な限り減らす
  • 可能な限り、任意に設定し、明示する
  • 機械的に補完できる内容「はシステム側で補う
  • 操作を増やさずにメールアドレスの確認を行う

問題

  • ラベルがなく、入力欄が何なのかわからない
  • 必要な説明がなく、入力の条件がわからない
  • ラベルや説明が見つからない
  • ラベルや説明とコントロールとの対応がわからない
  • ラベルや説明があいまいで混乱する
  • 必須か任意かがわからない

解決

問題

  • 入力文字種が限定され、入力できない
    • 全角での入力を強制される
    • 区切りの文字の入力を強制される
    • カタカナでの入力を強制される
  • セレクトボックスの使い方が不適切
    • 選択肢が多く一画面で収まりきらない
    • 一般的な並び方とは異なる
  • 選択肢のUI部品が不適切で入力しづらい

解決

  • 入力を柔軟に受け入れシステム側で変換する
  • 分割された入力欄をひとつに統合する
  • 選択肢のUIを適切に選択する

詳しく内容が知りたい方はこちら↓

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ