Issue
法改正に伴うアクセシビリティ対応が急務
2024年4月の障害者差別解消法改正を見据え、アクセシビリティ対応の強化が求められていました。
アクセシビリティ診断の結果、目標とする達成基準レベルAAを満たすために改善可能な点がいくつか見つかりました。
Case
アクセシビリティ強化への取り組み：AA準拠の達成とさらなる改善
損害保険ジャパン株式会社様
View Detail
Case
アクセシビリティの達成基準レベルAAを目標としたコード改善
株式会社リコー様
Solution
アクセシビリティに対応したコードへ修正し、多くの人が使いやすいWebサイトへ
アクセシビリティ対応が必要な箇所の多くは、HTML構造の見直しやJavaScriptの機能修正により改善が可能でした。色のコントラストに関する一部のデザイン修正を除き、元のデザインを最大限維持したまま、アクセシビリティの向上に取り組みました。
これにより、多くの人にとって使いやすいWebサイトを実現しました。
Coding Technique
アイコンをスクリーンリーダーの読み上げに対応させる
ボタンなどに使用されていたアイコンは、CSSで表示されていたため、スクリーンリーダーではその意味が伝わりませんでした。装飾としてのアイコンはCSSでの表示でも問題ありませんが、「外部リンク」や「PDF」など機能を持つアイコンはユーザーに意味を伝える必要があります。そこで、適切なタグと属性を使用することでスクリーンリーダーの読み上げに対応し、アクセシビリティを向上させました。運用上、全てのアイコンを一度に修正することは難しいため、既存のコードと併用して段階的に対応できる方法で調整を行いました。
アコーディオンのセマンティックなマークアップ
既存のアコーディオンは、スクリーンリーダー対応においてはセマンティクスが不十分だったため、再設計が必要でした。HTML構造を正しくし、コードの正確性を保ちながら、見出しかつインタラクティブな要素として読み上げられるように修正を行いました。さらに、適切な属性を使用して、操作状態や関連要素がスクリーンリーダーに認識されるように調整しました。
これにより、スクリーンリーダーを使用しているユーザーにもアコーディオンの操作状況を理解しやすくなり、アクセシビリティが向上しました。
Credit
| SITE URL | https://www.ricoh.co.jp/ |
|---|---|
| INDUSTRY | 製造・販売業 |
| MANAGER | 相原 |
| DIRECTOR | 栗原 |
| DESIGNER | 平田 |
| SYSTEM ENGINEER | 鈴木 西野宮 |
| FRONTEND ENGINEER | 鈴木 |
