プロダクトのアクセシビリティチェックリストを作成しました！

こんにちは、まおです。

アクセシビリティの取り組みを始めて、2年が経ちました。これまでシステム開発グループ内での勉強会や、ガイドラインの作成をしてきました。ガイドラインは、デザインや資料作成、コードレビュー時の指針として使用しています。（ガイドライン作成の経緯などについてはこちらをご覧ください）

アクセシビリティチェックリストの作成

次の段階としてアクセシビリティチェックリストを作成して、品質の確認・確保をすることにしました。

チェック対象

対象は主に新規開発や画面リニューアル時です。最近ではアトラスサイトのリニューアルや「発表者動画アップロード機能」をチェックしました。

チェック項目

アトラスのアクセシビリティガイドラインを参考に作成しました。チェックリストを作成するうえで、ガイドラインを見直す良い機会にもなりました。

チェックリストに含まれる達成基準は以下の通りです。

知覚可能

• 1.3.3 感覚的な特徴
• 1.4.1 色の使用
• 1.4.3 コントラスト（最低限）
• 1.4.8 視覚的提示
• 1.4.12 テキストの間隔

操作可能

• 2.4.2 ページタイトル
• 2.4.4 リンクの目的（コンテキスト内）
• 2.4.5 複数の手段
• 2.4.6 見出し及びラベル
• 2.4.7 フォーカスの可視化
• 2.4.8 現在位置
• 2.4.10 セクション見出し

理解可能

• 3.2.1 フォーカス時
• 3.2.3 一貫したナビゲーション
• 3.3.1 エラーの特定
• 3.3.3 エラー修正の提案
• 3.3.4 エラー回避 (法的、金融、データ)
• 3.3.5 ヘルプ

チェックポイント、方法

ポイントは項目と同様に、アクセシビリティガイドラインの達成方法をもとにしています。どんなサービスやサイトでもチェックしやすいよう、なるべく抽象的にしました。チェックは一画面ずつ、手作業で行っています。

開発者ブログをチェックしてみた場合

開発者ブログをチェックリストで確認してみると、サイト内検索に問題が見つかりました（3.3.5 ヘルプ）。プレースホルダー内のみに説明文を記載していると、入力時に内容が見えなくなってしまいます。入力フォームと対になるラベルがあると望ましいです。説明文ももう少し具体的にすると分かりやすいかもしれません。

また、文字がちょっと小さいかな？と感じるところもあるので、引き続き改善が必要と感じました。

今後のアクション

現段階ではアクセシビリティチェックリストだけでは確認しきれない部分もあり、チェックリスト自体を改善していかなければなりません。今後はツールも積極的に導入し、チェック精度を高めてプロダクトの品質を確保していければと思います。

これからもアクセシビリティ向上を続けていきます！