読者です 読者をやめる 読者になる 読者になる

frontendmemo

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

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

スポンサードリンク

ビジュアルデザイン

  • デザイン方針の検討
  • 基本デザインの検討
    • カラースキーム
    • グリッドシステム
    • ヘッダ、フッタ
  • コンポーネントデザイン
  • デザイン展開

見た目に頼ってる

問題

  • 色による表現が伝わらない
  • 配置による表現が伝わらない
  • 形や大きさによる表現が伝わらない
  • 文字の装飾による表現が伝わらない

解決

  • 要素を目立たせる際、テキストにも変化をつける
  • 色分けした要素にはラベルを併記する
  • 色や位置だけでなく、ラベルで指し示す
  • 打ち消し線は避ける

コントラストが低い

問題

  • 文字が画像に溶け込んでいて読めない
  • 入力欄の色が薄くて気づかない
  • 画像や図版がはっきりしない

解決

  • 白と黒の組み合わせを使用する
  • 基準に照らしてコントラストを確保する
  • 文字の下に色を敷く、ぼかす
  • 文字を大きくする
  • コントラスト要件を満たしたカラースキムを用意する

どこが押せるかわからない

問題

  • リンクがリンクに見えない
  • リンクではないテキストがリンクに見える
  • 訪問済みリンクが見分けられない
  • ボタンがボタンに見えない
  • ボタンでないものがボタンに見える

解決

  • リンクに標準的なスタイルを適用する
  • リンクに矢印やアイコンをつける
  • ボタンとして表現する
  • 押せない要素の紛らわしいスタイルは避ける
    • 忘れずに訪問済みのリンクの色も決めておきましょう
    • 可能な限りリンクには下線を付けよう
  • リンクに矢印やアイコンをつける
  • ボタンとして表現する
  • 押せない要素の紛らわしいスタイルは避ける

テキストブロックが読みづらい

問題

  • 行間が詰まりすぎている
  • 段落間が行間に比べて狭い
  • 1行が長すぎる
  • 両端揃えされている

解決

  • テキストブロックに適切なスタイル適用する
  • リキッドレイアウトを採用する
  • 行間と段落間を確保する
  • 行の長さを抑える
  • リキッドレイアウトを採用する
  • 両端揃えをやめて左揃えする

文字が画像になっている

問題

  • うまく拡大できない
  • 色やスタイルが変更できない
  • 折り返しを調整できない
  • 機械処理できない

解決

  • テキストを使用しCSSやWebフォントを活用する
  • SVGを利用する

フォーカスが見えない

問題

  • フォーカス表示が見えない
  • フォーカスがわからない

解決

  • フォーカス表示をブラウザに任せる
  • フォーカス箇所を強調する

小さく密集したものが押せない

問題

  • 操作対象が小さい
  • リンクやボタンが密集している
  • リンクやボタンがつながって境目がわからない
  • クリック・タップ可能な範囲が見た目と異なる

解決

  • 操作しやすい大きさにする
  • 要素同士の間隔を空ける
  • ラベルも押せるようにする
  • 要素全体を押せるようにする

スタイルに一貫性がない

問題

  • 同じ見た目が異なる意味でつかわれている
  • 異なる見た目のものが同じ意味でつかわれている
  • 似たような見た目のものが使われている
  • 配置が一貫していない

解決

  • スタイルのルールを明確にする
  • アイコンとラベルをセットする
  • ガイドラインで定義する
  • コンポーネント化する
    • 送信ボタンが右か左かはどっちらでもよいがサイト内で統一させること

閃光で発作が起きる

問題

  • 画面が予告なく閃光を放つ
  • 閃光が警告されスキップや停止ができる
    • ユーザーには判断できない

解決

  • 閃光を取り除く
  • 閃光を控えめにする

拡大すると問題が起きる

問題

  • スクロールできない要素がはみ出す
  • スクロールに追従する要素がコンテンツを覆い隠す
  • 文字サイズを大きくすると読めなくなる
  • 拡大や文字サイズが変更できない

解決

  • 画面からはみ出す場合を検討する
  • スクロール追従は慎重に検討する
  • リキッドデザインやレスポンシブWebデザインを検討する
  • 拡大や文字サイズ変更ができるようにする


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

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

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