株式会社リゾームの開発チーム内勉強会での発表資料です。

1. ウェブアプリケーションのための
ユニバーサルデザイン
を読んだので共有する
2014/06/18 @patorash

2. 先日図書館で借りてきました(2009年の本)

3. メタデータ
● 画像にalt属性を記述する
例）alt=”岡山駅前の桃太郎像”
画像がグラフの場合などは、altに傾向を書くとよいらしい
● titleタグは先にページの詳細を書く
例）会社概要 | 株式会社リゾーム
● リンクは視覚障害者のことを考慮して、説明文
を残しておく
○ PDF<span class=”content”>で書かれたプレスリリース</span>
○ HTML<span class=”content”>で書かれたプレスリリース</span>
○ Word<span class=”content”>で書かれたプレスリリース</span>

4. フォーム
● ラベルを正しく使う
● accesskey属性は使わない
ブラウザ毎の違いが多いから
● tabindexを使おう
tabキーで順序よく移動できるのは重要！！普通に作れば設定しなくても大丈夫
なことが多いが、複雑なフォームの場合は使おう。
● 必須項目には、必須と書く
● スパム対策にキャプチャは使うな

5. テーブル
● captionにはタイトルを記述する
● scope属性で関係性を表現する(row, col)
th scope=”row”
● テーブルレイアウトは絶対に使わない！
シーガルさんがテーブルレイアウトの本を出してしまったのが原因。
後に1997年に「ウェブを台無しにしてしまった」と謝罪している。

6. スクリプティング
● 控えめに使う
● :hover問題
キーボードの場合、hoverできないのでサブメニューが表示できない。
:focusだと移動したらサブメニューが消える…。
そのため、onclickでサブメニューの切り替えにするとよい。
● サブメニューを含んだ専用ページを用意するほ
うが楽な場合もある

7. Ajax, ARIA（アクセシブル リッチ インター
ネット アプリケーション）
● アクセシビリティ用の拡張
● 主要なブラウザでサポートされているので安心
して使える
● 役割(role)や状態(aria-*)を定義して制御
● いっぱいあったので紹介しきれない
● 結構面倒そうだけれど、ECサイトなど、
障害者の方たちも使うところでは要りそう

8. プロセス
● 最後のほうになってから気にするな。最初から
意識しろ。設計が重要。
● ツールでチェックする。
W3Cバリデーションツールなど
● 本の中に書かれている20の質問を意識する
例えば・・・代替テキストはあるか？マルチメディアコンテンツに補助情報をつけ
ているか？HTMLが意味のある構造になっているか？メニューコンテンツをス
キップできるか？キーボードだけで操作できるか？等々