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

スポンサードリンク

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

a11yschool-1

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

セミナーのメモ書き

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

セミナーを終えての感想

a11yschool-2

▲ セミナー風景

アクセシビリティーという硬くなりがちなテーマでしたが、講師の植木さまが所々に笑える部分を入れてくれていたため、3時間があっという間でした。 ありがとうございました!

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。