サイトの更新、管理を行う際に、アクセシビリティを中心に考え、より利用しやすいウェブサイトを実現するための手順とヒントをまとめています。
更新時、可能な限り次の注意点を守りアクセシビリティの向上に努めてください。
他のページとの重複を避け、簡潔で明瞭なタイトルを使用してください。
見出しは簡潔で明瞭な言葉を選び、h1からh6のタグを文書構造を守って使用してください。
ブラウザの拡張機能等を利用して見出しの順序をチェックできます。
HeadingsMap（Chrome拡張）
タグの閉じ忘れや不要なタグの混入に注意してください。
ブラウザの拡張機能等を利用してタグの閉じ忘れをチェックできます。
HTMLエラーチェッカー（Chrome拡張）
スクリーンリーダーが上から順に読みやすいよう、コンテンツを適切な順序で配置してください。
サイト全体でコンテンツ表記を統一して、利用者が迷わないようにしてください。
文章や見出し内の連続した改行は避けてください。
連続した改行はスクリーンリーダーで正しく読み上げることができません。
単語は『日 時』のよう単語内で空白を使用せず『日時』と表記してください。
空白文字ある単語はスクリーンリーダーで正しく読み上げることができません。
リンク先は具体的な名称を使用し、「こちら」などの曖昧な表記は避けてください。
リンク先名に悩む場合は遷移先のタイトルを使用してください。
リンク切れを引き起こすと利用者が必要とする情報が得られないため注意してください。
装飾文字は使用可能ですが、意味を伝える唯一の方法としては使用しないでください。
脚注は「※1」のような数字だけでなく、「脚注1」など脚注であることを示してください。
数字だけの場合、スクリーンリーダーで位置関係が理解できません。
すべての画像には代替テキストを設定し、「画像です。」という単調な説明は避け、内容を簡潔に説明してください。
画像内の文字は可能な限りHTMLテキストとしても提供してください。
ブラウザの拡張機能等を利用してaltのチェックできます。
Alt & Meta viewer（Chrome拡張）
既存の色を利用し、必要な場合はコントラスト比4.5:1以上を確保してください。
コントラスト比はチェックツールを使用して測ることができます。
Contrast Checker（色のコントラスト）
可能な限りアクセシビリティのチェックを実施して、問題がないことを確認してください。
ブラウザの拡張機能等を利用して簡易的にアクセシビリティのチェックができます。
axe DevTools（Chrome拡張）