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

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

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

セミナーのメモ書き ———————————————————————-

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