「ウェブアプリケーションのためのユニバーサルデザイン」読了

book

ウェブアプリケーションのためのユニバーサルデザイン

ウェブアプリケーションのためのユニバーサルデザイン

読みました。
「障害者、高齢者、モバイル、どんなクライアントにも使い易いウェブアプリを作ろうZE☆」って本。
以下適当メモ。

  • 画像にalt属性を設定しているのは7%

93% failed to provide adequate text descriptions for graphics

BBC NEWS | Technology | 'Most websites' failing disabled
  • サイズの指定をCSSではなくHTMLでしてやると、画像をダウンロードする前にブラウザはレイアウトを開始できる(表現のためにHTMLを利用しないという原則よりも携帯ユーザーを優先)
<img width="200" height="100" src="sample.png" alt="..." />
  • タイトルは以下のように設定(モバイルはタイトルを切り詰めてしまう)
<title>固有ページのタイトル | サイト名</title>
  • キーボードで操作可能にする
  • accesskey属性はデスクトップ向けではブラウザ毎に挙動が異なるので推奨しない(JavaScriptで代用)、モバイル向けでは推奨(古い機器のために0〜9の最大10個が理想)
  • :hoverの問題点
    • マウスの移動にしか反応しない(Tabでフォーカスしてもダメ)
    • 通常、非アクティブな要素に関連付けられている
  • :hoverを利用したサブメニューをよりアクセシブルに
    • :focus,:activeでTabフォーカス時もサブメニューが表示されるようにする
    • display:noneでサブメニューを隠し、トップレベルのメニューに全メニューへのリンクを含むサブページへのリンクをつける
    • サブページの表示/非表示にonclick()を利用
  • ARIAでは表示されている全ての要素にtabindexを指定できる
  • ユニバーサルデザイン・チェックリスト(概略)
    1. 代替テキスト用意されてる？
    2. 映像にキャプションやトランススクリプト付いてる？
    3. コントロール(リンク含む)はラベル付けされてる？
    4. コントロールのグループが適切に識別できる？
    5. 意味のある構造(Tabで移動等)になってる？
    6. 色、形状、大きさ、位置、音声が認識できなくても操作可能？
    7. 自動再生される音声は停止・消音可能？
    8. 全ての機能をキーボードで操作できる？
    9. ナビゲーションはスキップ可能？
    10. ページのタイトルは適切？
    11. ユーザーの言語をlang属性で指定してる？
    12. 予測不能な振る舞いは無い？
    13. (入力)エラーの特定と解決は容易？
    14. W3CのHTML,CSSバリデータを使った？
    15. UI変化の告知はされている？
    16. 制限時間(タイムアウト)は調整可能？
    17. 移動、点滅、スクロールする情報は停止可能？
    18. 自動アップデートの頻度は調整可能？
    19. 1秒間に3回以上明滅するようなものある？
    20. 複数のブラウザ、モバイル、支援技術でテストした？