frontendmemo

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

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

スポンサードリンク

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

frontendmemo.hatenablog.com

今回が最終回

  • 実装

です。

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

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

以下を実装前に確認

マークアップ作業の基本的な進め方

HTMLの実装

cssを適用しない状態でHTMLだけを実装する
画像が使用されていればその画像が意味があるものかないのか考え、意味があればimg要素としてHTMLに組み込む
一旦cssなしで作ったところで意味があるものか確認するとよい

CSSの実装

HTMLのマークアップが一通りできたらCSSを実装する

JavaScript

最初にスクリプト無効の状態を作っておき、その後javaScriptを組み込むようにする

検証
  • ツールによる文法チェック
  • ビジュアルブラウザでの確認
  • 画像表示をp譜にした状態での確認
  • スクリーンリーダーでの確認
  • キーボード操作での確認

文法ミスがある

問題

  • 開始タグと終了タグが対応してない
  • 他の要素と同じIDがついている

解決

  • HTMLを書かないようにする
  • オーサリングツールを活用する
  • 文法チェックを行う

セマンティックが不適切

問題

  • 見出しを使っていない
  • 見出しでないものを見出しとしてマークアップしている
  • 別の要素に見せかけている
  • 不適切なメタ情報

解決

  • 要素を適切にマークアップする
    • 見出し
    • リスト dlで使用するdt要素は見出しではないため、見出しジャンプの対象にならない。またdl要素をリストと読み上げる環境もあるため、あくまでdlはリストである。
  • UIには本来の要素を素直に利用する
  • WAI-ARIA
    • JavaScriptなどで本来の意味で使用できないとき、WAI-ARIAを使って要素の意味を変更するという方法もある

コンテンツがCSSに依存している

問題

  • 背景として実装された画像が表示されない
  • 見た目とHTMLが食い違い、意味が伝わらない

解決

  • 意味のある画像は前景に置く
  • 代替テキストが必要な画像は前景に置く
  • HTML上の並び順に配慮する

代替テキストの実装が不適切

問題

  • altそのものが指定されていない
  • 装飾に不適切な代替テキストが指定されている
  • 冗長な代替テキストが指定されている

解決

  • 装飾画像にからのalt属性を指定する
  • 適切な代替えテキストを指定する

リンク先がわからなくなる実装

問題

  • リンクテキストが空になっている
  • ひとつのリンクが複数のリンクとして実装されている

解決

  • 画像のみのリンクには必ず代替テキストを指定する
  • ひとつのリンクはひとつのアンカーにまとめる

ラベルがマークアップされていない

問題

解決

スクリーンリーダー対応が不適切

問題

  • 無効なテキストが読み上げられてしまう
  • 別の場所が変化しても気づかない
  • スクリーンリーダー向けの過剰な機能

解決

  • 無効なテキストが読まれないようにする
  • 変化した部分にフォーカスを移す
  • テキストを隠さずに表示する

WAI-ARIAを活用する

  • 読まれては困る部分にarea-hidden属性をつけると、スクリーンリーダーに無視される
  • 情報が書き換わる個所にarea-live属性をつけると、書き換わった際に読み上げられる
  • role属性を使うとその要素がなんなのか通知される
  • aria-label属性でスクリーンリーダー向けの説明を提供できる

スタイルに一貫性がない

問題

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

解決

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

閃光で発作が起きる

問題

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

解決

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

拡大すると問題が起きる

問題

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

解決

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


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

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

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