アクセシブルなサイト制作手法を学ぶ [ Web アクセシビリティの学校 in 高松 ] に参加してきました〜。

2015年7月17日、有限会社ヘルツ様のセミナールームにて、Web アクセシビリティの学校 in 高松が開催されたので参加しました。講師は、株式会社インフォアクシアの植木真さまです。

▲ 手書き感あふれる入場案内。

この記事の目次非表示

セミナーのメモ書き
セミナーを終えての感想

セミナーのメモ書き

アクセシビリティーとは
- 欧米では、障害のある人が使えること。
- 日本では高齢者と一時的な障害のある人も含む。
- 最近はマルチデバイスで使えることもアクセシビリティーに含まれる。
- ウェブは誰もが使える事を目標に作られた。
- UX のハニカムにアクセシビリティーが含まれる
- アクセシブルは UX の土台。
さまざまな利用環境
- 視覚障害
  - ボイスオーバー
  - 点字ディスプレイ
  - 画面拡大ソフト
  - Windows のハイコントラストテーマ
    - CSS の背景画像のナビゲーションボタンが見えなくなる。
    - IMG 要素は表示される。
- 聴覚障害
  - 動画には字幕を入れる。
  - VIDEO 要素でテキストファイルと動画を関連付ける。
- マウスが操作しづらい
  - ジョイスティック
  - トラックボール
  - 大型キーボード
  - キーボードガード
- 四肢障害のある人
  - 音声入力
  - ドラゴンスピーチというソフト
  - プロレスラー天竜の声は認識率が低い。
- 認知・言語・学習障害
  - 特に支援技術がない
  - 文章を読むのが苦手
  - レイアウトを理解するのが苦手
  - 理解するのが苦手
- スクリーンリーダー
  - NVDA という Windows のフリーソフト
  - 見出しを拾い読みする機能がある。
  - ちゃんと HTML ソースを書けば対応できる。
  - スクリーンリーダーと SEO には共通点が多い。
- マシンリーダブル
  - コンピューターにも処理しやすくすることで何倍にも活用の幅が広がる。
  - ブラウザ・支援技術・クローラーが読み取れるようにすること。
  - テキストが最もアクセシブル
  - マークアップすることで意味を持たせる。
  - テキストは何もしなくてもマシンリーダブル
  - 画像は ALT 属性を加えてマシンリーダブルにする。
  - アクセシビリティーは、テキストが命。
- 高齢者対策
  - 日本はすでに超高齢者（65歳以上）社会
  - 加齢による衰えは65歳からとは限らない。
- モバイル対策
  - 外で見ることもあるのでコントラストを強くする。
  - タッチできる大きさを大きくする。
- 弱視の方のウェブ閲覧ビデオ
  - 画面を拡大するため、一度に見える範囲が狭い。
  - コントラストが大事。
  - 移動する文字は内容が追えない。
- iPad のボイスオーバー
  - 標準装備
基本テクニック：HTML 初級編
- コーディング
  - 完全な開始と終了タグを
  - 仕様に準じた入れ子になっている
  - 重複属性がない
  - ID がユニーク
- ページタイトル
  - ページの内容がわかる主題・目的を説明したタイトル
    - 前後の文脈がなくてもわかる
    - 簡潔
    - 属しているサイトが分かる
    - ユニークなページタイトル
  - おすすめは、ページタイトル：サイト名。
- 見出し
  - マークアップしてマシンリーダブルにする。
  - ナビゲーションなどのコンテンツをスキップできるようにする。
  - 見出しは主題を説明しなければならない。
  - ブロック・セクションごとに見出しをつける。
  - 見出しレベルをスキップしない。
- リストのマークアップ
  - マークアップしてマシンリーダブルにする。
  - 順不同などの種類を使い分ける。
- 画像の代替テキスト
  - 画像と同等の目的を果たす代替テキストを提供。
  - 装飾目的の画像は代替テキストを空にする。
  - グラフなどでデータ量が多い時は、テーブルで書いてそばに置いておく。
  - 地図の場合は、所要時間でなく距離を書く。歩くのが遅い人がいるので。
    - 電話番号や住所を併記すると親切
  - 画像置換は不適合事例になっている。
- ページの領域も HTML5 でマシンリーダブルにする。
  - <header role=”banner”> みたいに role 属性を入れて、要素の役割を説明できる。
  - role 属性は HTML5 より先に実装されている。
- リンクの注意点
  - リンクのテキストでリンク先がわかるようにする。
  - リンクテキストのみを拾って読み上げるスクリーンリーダーがある。
  - テキストリンクの下線は消さないようにする。
  - 下線を取る場合は、フォーカスで見た目に差をつける。
- 色の使い方
  - 色の違いだけで、意味的な違いを表現しない。
  - 色の識別できない方もいる。
  - コントラスト比にも基準がある。
- フォーム作成のポイント
  - マシンリーダブルにする。
  - LABEL 要素でラベルとフォーム・コントロールを関連付ける。
  - 入力例や必須項目もラベルに入れる。
  - ラベルが置けない場合は、TITLE 属性に入れる。
  - エラーの発生箇所を示し、エラーの説明と修正方法を提示する。
- テーブル
  - CAPTION 要素で表題を書く。
  - 見出しセルを TH 要素でマークアップする。
- キーボード操作
  - キーボードだけでも操作できるのが望ましい。
  - フォーカスの順序も適切に処理できているか確認。
  - フォーカスしている状態が見えるように。
- キャプション（動画）
  - キャプションを入れると検索にヒットするのでアクセスが増える。