Webアクセシビリティ対応：Pawthカレンダー画面の修正記録

はじめに
問題
対策1 – コントラスト比の閾値を調整
対策2 – lang属性を指定
対策3 – リンクに認識可能なテキストを指定
修正後、再実行
さいごに

はじめに

昨日、開発中のWebアプリ Pawth でWebアクセシビリティのチェックを行いました。
結果は15件のエラー。見た目は動いていても、ツールの視点ではまだまだ改善点があることがわかりました。

そこで今日は、カレンダー画面の修正を進めてみました。

問題

問題は合計15件ありましたが、問題の種類は3件です。

コントラスト比の閾値（テキストは 4.5 : 1）
lang属性の未指定
リンクに認識可能なテキストがない

これらを順番に対応します。

対策1 – コントラスト比の閾値を調整

はじめにコントラスト比を修正します。

axe の [強調表示] を選択すると、問題の要素がどこなのかわかりやすくなります。

カレンダーの土曜日（青色）と日曜日（赤色）で指摘を受けています。CSSの色を修正します。

# ❌NG
text-blue-500
text-gray-300
text-red-500
text-yellow-600

# ✅OK
text-blue-600
text-gray-500
text-red-600
text-yellow-700

文字色と背景色でコントラスト比を調整する必要があるため、必ずしもこれらのコードが正解になるとは限りません。場合によってはNGとなります。

対策2 – lang属性を指定

次に、HTMLに lang属性を指定します。

# ❌NG
%html

# ✅OK
%html{ lang: (I18n.locale || I18n.default_locale).to_s }

lang属性をつけることにより、スクリーンリーダの読み上げ言語/発音、辞書・スペルチェック、検索エンジンの解釈などが適切になります。

HTML lang グローバル属性

lang グローバル属性は、要素の言語を定義するために使用します。編集不可能な要素の場合は書かれている言語、または編集可能な要素の場合はユーザーが書くべき言語です。この属性には、単一の BCP 47 言語タグを記述します。

対策3 – リンクに認識可能なテキストを指定

リンクに aria-label（エイリア・ラベル）を指定します。

カレンダーの「前の月へ」「次の月へ」が指摘を受けていたので、修正をします。

# ❌NG
= link_to target_path,
          class: 'xxxxx'

# ✅OK
= link_to target_path,
          class: 'xxxxx',
          aria: { label: t('activities.calendar.prev_month') }

aria-label をつけると、スクリーンリーダーがリンクやボタンを正しく読み上げて、何の要素なのかが分かるようになります。つまり、見た目に文字がなくても、支援技術に名前を与えられます。

aria-label

aria-label 属性は対話型要素にラベル付けする文字列値を定義します。

修正後、再実行

全てを修正後、axe を再実行します。

無事、Webアクセシビリティ基準に準拠できました。

さいごに

デザインの指摘を受けると「この雰囲気が崩れてしまうのでは」と迷うことがあります。

それでも、誰にとっても優しいアプリにしたいので、基準に準拠する形で修正しました。

Pawth = a11y + art