アクセシブルなサイトにするための26のステップ

Webmaster World.comのエントリー「アクセシブルなサイトにするための26のステップ」の意訳です。

26 Steps to a More Accessible Website

スキップリンクは、キーボード操作をしている人のために目に見えるように設置する、というのにはなるほど、と思いました。

  1. Altのテキストと代替の内容
    画像にはAltを記述し、代替の内容を記す。
  2. 動画のキャプションや概要
    動画の内容・概要・サマリーなどを記す。
  3. 「ここをクリック」は使用しない
    リンクには的確な情報を含める。
  4. リンクの間のスペース
    隣接したリンクには、区切りを設置する。
  5. JavaScriptで記述したリンク
    リンクの記述は、JavaScriptに依存させない。
  6. lang属性の使用
    lang属性を使用して、使用言語を明示する。
  7. アニメーションは使用しない
    ユーザーの気を散らせない。
  8. 色に依存しない
    グラフなど、色盲の人やモノクロでプリントした場合でも情報を入手できるように。
  9. Captchaシステム
    言語依存や認知障害でも可能な代替を用意する。
  10. フォームには、labelを
    フォームには、labelを使用しましょう。
  11. アクセシブルなテーブル
    レイアウトのために、複雑なネストされたtableを使用しない。
  12. ページの構造:意味を持つ見出し
    ユーザーにも、検索エンジンにも効果があります。
  13. ページの構造:情報をブロックごとに分ける
    情報はブロックごとに分け、レイアウトする。
  14. シンプルな言葉
    流行語・専門用語などは避ける。
  15. acronym, abbr, cite, p, li
    これらをテキストに意味を与えるために使用する。
  16. meta refresh
    明確なリンクを提示する。
  17. noscript
    スクリプトに依存している場合は、noscriptを使用する。
  18. フォントのサイズは、相対指定で
    ユーザーがサイズを変更できるように指定する。
  19. フォントのサイズは、大きめに
    可読性を高くするため、より大きいフォントのサイズを使用する。
  20. 代替スタイルシート
    フォントサイズを変更できる代替スタイルシートなど効果的。
  21. スキップリンク
    ナビゲーションやコンテンツなどへのスキップリンクを設置する。
    キーボード操作をしている人のために、目に見えるように設置するのも効果的。
  22. ページのサイズ・容量
    軽い方がアクセシブル、より減らすようにする。
  23. サイトマップの設置
    HTML、XMLのサイトマップを設置する。
  24. Lynxでチェックする
    テキストブラウザ「Lynx」でも情報が入手可能かチェックする。
    Lynx for Win32
  25. ユーザーテストとフィードバック
    想定するユーザーでテストを行う。
    目標設定を行い、意見や感想は全てメモする。
  26. アクセシビリティのリスト
    改善したサイトに、実施したアクセシビリティのリストを掲載する。
    それを元に、議論やユーザーからのフィードバックをもらうことが可能。

sponsors

top of page

©2018 coliss