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

memo

SEO

サーチエンジンのクローラーがサイトにアクセスしやすくすること（サーチエンジン最適化）

アクセシビリティはサーチエンジンに以下の二つの恩恵を与える

• サーチエンジンのクローラーがコンテンツがアクセスできるようになる
• コンテンツの意味が伝わるようになる

memo

• WCAG 2.0では200％までの拡大が必要 ⇒ ブラウザのズーム機能だけでOK

1.4.4 テキストのサイズ変更

対応内容

• ブラウザのズーム機能を利用して200%までズームしたときに文字が見切れたり、重なっていないか確認する
  • meta要素のviewportにuser-scalable=no, maxinum-scale=1.0を指定しない
• ブラウザの文字サイズ変更機能でフォントサイズ二倍時、文字が見切れたり、重なっていないか確認する
  • rem / rem / %指定
• 位置固定した要素（ヘッダーなど）が画面をズームしたときに画面を覆ってしまわないか確認する

memo

一貫性

• テンプレートを設計する
• ガイドラインにテンプレートの使い方やナビゲーションルールをまとめる

現在地表示を付ける

やり直し手段を提供する

• 共通ヘッダにトップページへのリンクを設置
• 一連のページのすべてに最初のページへのリンクを置く
• 上位階層に移動するためのナビゲーションを定位置に置く
• 関連記事やコンバージョンにかかわるナビゲーションを置く
• 検索結果ページ自体で条件を変更してやり直せるようにする

コンテンツを探す手段を複数用意する

• サイトマップを設ける
• サイト内検索を設ける

memo

デバイスに依存させない

• クリック/マウスオーバーで操作する要素をキーボードでも操作可能にする
  • サブメニュはクリックで開くようにする
  • スワイプUIは切り替えボタンに

標準のスクロール機能をそのまま提供する

• ページ内スクロールを避ける
  • すべて展開する
  • アコーディオン
  • モーダルダイアログ

無限スクロールを避ける

• 「続きを読む」ボタンを設置
• キーボード操作の動作を確認する

新規タブやポップアップを避け、別の方法を使う

• 外部サイトであることを新規タブで示さず、説明を加える
• 行き来するリンクは新規タブにしない
• 画面内ヘルプを出す
  • アコーディオン
  • モーダルダイアログ

ページ移動は直接か、ユーザーの操作に任せる。自動遷移は避ける

ユーザーが動きを制御できるようにする

音はユーザー操作で再生し、自動再生しない

memo

入力時に必要な情報を明示

• フォームの目的(フォームのタイトル)
• 入力の流れ
• 必要となる情報
• 予約の可否など、要求を満たせない場合は先に定時

システム側で自動補完・変換する

• 補完
  • 郵便番号 ⇒ 住所
  • 生年月日 ⇒ 年齢
  • 銀行支店番号 ⇒ 支店名
  • クレジットカード番号 ⇒ ブランド
• 変換
  • ひらがな ⇔ カタカナ
  • 半角 ⇔ 全角
  • 大文字 ⇔ 小文字

見た目に依存せず、明確なラベルや説明を提示

• 「かたかな」「カタカナ」⇒「ふりがな（全角カタカナ）」
• チェックボックスのラベルは肯定文
• ボタンのテキストは「入力内容を確認する」のように、押した後がわかるように
• 入力値の条件を記載
• プレースホルダーをラベルの代わりに使用しない

入力欄は分割しない

適切なUIを使用する

誤操作するようなUI設計は避ける

• リセットボタンは使用しない、使用する際は警告
• 戻る・送信が誤操作ではないか確認する
  状況によるEnter / Backspaceの機能の違い

  状況	Enter	Backspace
  一行入力欄にフォーカスがあるとき	フォーム送信（変換中の時は確定）	一文字削除（変換中のときは変換前に戻す）
  複数行入力欄にフォーカスがあるとき	改行（変換中の時は確定）	一文字削除（変換中の時は変換前に戻す）
  ボタンやリンクにフォーカスがあるとき	そのボタンを押す	ブラウザバック
  それ以外の要素にフォーカスがあるとき	何も起きない	ブラウザバック

• 多重送信に対応する
  送信中にロックをかけて多重送信を防ぐことはできるが、通信エラー時に再送できるように一定時間後はタイムアウトとみなして送信ボタンを押せるようにする必要がある
• 選べない選択肢は無効化する
  • disabled属性
  • aria-disabled属性

エラー検出のタイミング、表示場所、内容を適切にする

• 送信前のエラーチェック
  • 入力欄からフォーカスが外れたらエラーを出す
• 送信後のエラーチェック
  • 入力された値は入っている状態にする
  • ページ冒頭でエラーメッセージを表示
  • 個々の入力欄付近にもエラーメッセージを表示
• エラーメッセージは理由と修正方法を明示

事前告知の上で、確認ページを設け、「送信」「修正」ができるようにする

ブラウザが提供する「戻る」を自由にできるようにする

• 入力内容が消えないようにする
  • パスワード入力（input type = "password"）は安全性のため復元されない
    • パスワード入力だけ単独ページにするのもあり
  • autocomplete="off"という属性を設定しているときも補完されない

セッションは長めに切れても大丈夫なようにする

WCAG 2.0ではセッション有効時間は20h以上

memo

コンテンツ内容が連想できるタイトルを付ける

• 「コンテンツのタイトル｜サイトのタイトル」
• 簡潔に
  ページタイトルが切られるシチュエーション

  対象	文字数
  Googleの検索結果ページ	30文字強より先は省略
  iPhone Safariでの履歴やブックマーク	10文字強より先は省略
  ブラウザのタブ領域	10文字～15文字※開いているページ数が多いと省略される

難しい言葉はわかりやすいように補足する

• ルビをふる <ruby>
• 脚注を付ける
  対象の言葉の後ろにリンクを置き、コンテンツ末尾の脚注エリアに飛ばす。
  脚注から元のエリアに戻れるようにリンクを張っておく。

表は一種類のデータに絞り、キャプションや見出しを付ける

• セル結合はやめる
  スクリーンリーダーユーザーが表の楮を理解するのが難しくなるため

リンク先が推測できるように、リンク先の内容をリンクテキストにする

memo

色分けや位置など、視覚表現に依存しすぎないように

• ラベルを使用する
• 打消し線は避ける
• 記号やアイコンを使用するときはテキストを併用する

WCAG 2.0のコントラスト基準を確保

• 白と黒の組み合わせを使う
• 文字の下に色を引く、ぼかす
• 文字を大きくする

リンクやボタンなど押せるものを明確に、可能なら標準に沿ったスタイルに

• リンクの標準スタイル
  • 未訪問リンク：青
  • 訪問済み：紫
  • リンクには下線を付ける
• 押せない要素に紛らわしいスタイルを当てない

テキストブロックの行間や行の長さを適切に設定

• 行間や段落間を確保
  WCAG 2.0：文字の高さの半分以上の行間（line-height: 1.5;以上）
• 行の長さを抑える
  WCAG 2.0：半角80時以上、全角40字以内
• 両端揃えをやめて左揃えに

標準フォーカスを使用し、フォーカス個所を強調する

リセットCSSでフォーカス枠が消えることがあるので、キーボード操作をして確認する

タッチ操作を念頭にデザインする

ラベルや要素全体を押せるようにする

• 大きさ
  • 実測で9mm × 9mm
• 間隔
  • 2mm程度

スタイルガイドラインを作成する

• アイコントラベルをセットにする
• 正しい使い方を合わせて、間違った使い方を記載

1.4.3 コントスト（最低限）

テキスト及ぼ文字画像の視覚的定時に少なくとも4.5 : 1のコントラスト比がある

除外

• 付随的なテキストは除く
  • 読ませる意図のない画像に含まれるテキストや、アクティブではないユーザーインターフェースコンポーネント（button[disabled]など）の一部や装飾画像など
• ロゴタイプ
  • ロゴまたは、ブランド名の一部である文字

設計者の注意点

• テキスト＋背景の色両方の設定が必要

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

1. HTML
2. CSS
   スクリプト無効時にOKなように作成
3. JavaScript
4. 検証
   • ツールによる文法チェック
   • ビジュアルブラウザでのチェック
   • 画像表示OFFでのチェック
   • スクリーンリーダーでのチェック
   • キーボード操作でのチェック

memo

フォームコントローラーのラベルをマークアップによって関連付ける

• <label>
• title属性
• WAI-ARIA

CSSスプライト

画像を背景とすることで、高速化できる
background-positionで位置を指定し、目的の部分を表示。画像枚数を減らしHTTPリクエストを減らす。
アイコン＋テキストなど、画像が見えなくても問題ない時に有効