frontendmemo

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

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

スポンサードリンク

システム設計

問題

  • リセットボタンを誤って推してしまい、入力内容が消える
  • 意図せず送信したり戻ったりしてしまう
  • 意図せずフォーカスが移動し、誤入力する
  • 無効な選択ができてしまい、エラーになる

解決

  • リセットボタンは使用しない
  • 誤操作しても致命的な問題が出ないようにする
    • 戻ったり送信したりする際に確認する
  • フォーカス移動はユーザーに任せる
  • 選べない選択肢は無効にする

問題

  • エラーメッセージが見つからず、何が起きたかわからない
  • エラー表示と入力欄がわかれており、行き来する必要がある。
  • エラー箇所がわからず、どこを直せばよいかわかならない
  • エラーメッセージが理解できず、どう直せばよいのかわからない

解決

  • 送信前にエラーチェックを行う
  • エラーメッセージと同時に修正フォームを提示する
  • エラー箇所を明示する
  • エラーメッセージで理由と修正方法を明示する
    • 郵便番号を正しく入力してください→郵便番号は7ケタで入力してください。

問題

  • いきなり送信されてしまい、送信内容を確認できない
  • 送信後に訂正やキャンセルを行う手段がない

解決

  • 送信前に確認画面を挟む
  • 送信後に訂正やキャンセルを可能にする

問題

  • 戻ると入力内容が消えてしまう
  • 戻るとエラーになってしまう
  • 戻って再送信するとエラーになってしまう
  • そもそも戻れない

解決

  • 戻ると入力内容が消えてしまう
    • パスワード入力欄は敢えて内容が復元されないようになっている。パスワード入力欄だけを単独のページにする。
  • 戻るとエラーになってしまう
  • 戻って再送信するとエラーになってしまう
  • そもそも戻れない

問題

  • 短時間でセッションが切れてしまう
  • セッションが切れると最初からやり直しになってしまう

解決

  • セッションの有効期限を長くする
    • WCAG 2.0では20時間という基準を採用している
  • 再ログインで続きから作業できるようにする

コンテンツ設計

STEP1

  • テキスト原稿のルール
  • リンクのルール
  • 画像、映像、PDFの使用法
    • 記事コンテンツには打ち出し用画像、サムネイル画像、アイコン画像を用意する必要がある。
    • PDFのあるニュースコンテンツも必ずhtmlを用意する
    • 映像はyoutubeに置き埋め込んで参照。本文中に概要を書く

STEP2

コンテンツは、見出し、本文、リスト、図版、表など、さまざまな要素で構成されており、このコンポーネント(モジュール)のルールを統一する
TOP、ランディングページなどは、他のページと共通点が少なくこの限りではありません。

STEP3

コンポーネントを当てはめ仕様書を作成します。
最近ではこのようなドキュメント化をせず、いきなりプロトタイプを作ることもある。

STEP4

メタ情報の検討

問題

  • ページタイトルがない
  • 他のページと区別ができない
  • 長すぎて肝心な部分が切られてしまう
  • コンテンツの内容が連想しづらい

解決

  • コンテンツのタイトルとサイト名を組み合わせる
  • 簡潔で内容を連想できるものにする
  • 複数ページにまたがるコンテンツを副題で区別する
  • ツールを使ってタイトルを確認する
    • google SERP Snippet Optimization Tool
    • google Search Console

問題

  • コンテンツの見出しがない
  • セクションの見出しがない
  • 見出しから内容を推測できない
  • 見出しの階層が不適切

解決

  • コンテンツとセクションに具体的な見出しをつける
  • セクション見出しを設置する
  • 内容を推測できる見出しをつける
  • 見出しのレベルを明確にする

問題

  • 言葉が読めない
  • 言葉の意味が分からない
  • 言葉の意味が誤解される

解決

  • ルビをつける
  • カッコ書きで捕捉する
  • 脚注で説明する
  • 用語集で説明する

問題

  • 表題やキャプションがない
  • 行や列に見出しがない
  • セルが結合されている
  • 複数の表が合体されている
  • 表が入れ子になっている

解決

  • 表の概要が伝わるようにする
  • セル結合をやめ、それぞれのセルに書く
  • ひとつの票が1種類のデータになるように分割する

画像を含むコンテンツが理解できない

問題

  • 画像だけで情報が提供されている
  • テキスト画像を前提としている
  • 画像の代替テキストが不適切

解決

  • 本文やキャプションで説明する
  • 代替テキストを指定する
  • 代替テキストの検討をワークフローに組み込む

リンク先がわからない

問題

  • ラベルがないリンク
  • こちらリンク
  • もっと読む、詳細リンク
  • バージョン違いのリンク

解決

  • リンクにリンク先のタイトルを加える
  • 文中リンクを外にだして独立する
  • 周辺のテキストをリンクに含める


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

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

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