こんにちは、エンジニアの中島です。
この記事は2024年2月〜3月のLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。
この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されています。
さっそく2月と3月の合算記事となりました。
目次
サービス改善
本期間中の改善取り組みのターゲットはLIFULL HOME'S 不動産アーカイブのPCページです。
諸事情で発表できないものもありますが公開可能な取り組みを紹介させていただきます。
トップのフリーワード検索の入力欄に設定された誤ったroleの除去
アーカイブサイトのトップページにはフリーワードで物件を検索できる入力欄があります。
現在の仕様を確認したところ、comboboxではないただの入力フィールドなのですがcombobox風のroleが誤って設定されていました。
不要なroleを除去し、普通のtextboxとして扱う修正をしました。
物件情報の編集画面のフォームのアクセシビリティ対応
アーカイブサイトでは物件の所有者や詳しい方などが物件情報を編集リクエストするための投稿フォームが存在しています。
そちらのフォームを確認したところ、いくつかのアクセシビリティ要件上の問題が発見されました。
- いくつかのフォームコントロールに適切な名前が設定されていない
- いくつかのフォームコントロールのフォーカスインジケータが見えない(あるいは見づらい)
- 入力エラーと項目の関連付け
- 全体エラーの読み上げ
- 入力ステップ表示に適切な現在地を示すマークアップがされていない
これらの問題を解消する修正を実装しました。
※仕様の調整がつかず全体エラーは現在のところ読み上げのみの対応となります。
駅選択ページ内の絞り込み機能のフォーカス改善
路線・駅から物件を絞り込む検索フロー中の駅を選ぶステップで、駅が所属する都道府県ごとに表示を切り替えるUIがあります。
そちらのUIのトリガとなるボタンにフォーカスが当たらない不具合がありました。
こちらもフォーカスがあたるよう、またそのフォーカスインジケータが視認できるよう修正を加えました。
物件一覧(ブランド名による検索)ページ内の絞り込み機能のフォーカス改善
ブランド名から物件を絞り込んだ際の検索結果ページに、表示された物件を都道府県で絞り込むためのUIがあります。
そのUIのトリガとなるボタンにフォーカスが当たらなかったり、開閉状態を正しく支援技術に伝えられたない等の問題の対応を行いました。
物件画像一覧ページ内の「画像をもっと見る」ボタンのアクセシビリティ対応
物件の画像をギャラリー形式で一覧表示できるページ内に存在する「画像をもっと見る」という表示ボタンがあるのですが、そちらがフォーカス不能・押下時にボタンが消滅するにもかかわらずフォーカスが表示されたコンテンツに移動しないといった問題がありました。
フォーカスを可能にし、フォーカス管理を行う修正をしました。
売却査定フォームのバリデーションを改善
物件の詳細画面内に、その物件を売却査定するフォーム(所有者向け)が存在します。
入力に不備がある際に、入力エラーについて記載がでるよう実装されていますが、支援技術でそれを検知することが難しい実装になっていました。
また、入力エラー時にボタンがdisabledになり、フォーカスができなくなるといった問題も合わせて確認できました。
これらを修正し、フォーカスは可能にしたまま、ボタンが有効でないことを伝え、押下時にエラー内容をフィードバックするように修正しました。
また個別のコントロールにも入力エラーの内容を関連付けるようにしました。
育成・啓発の取り組み
アクセシビリティ1on1
本期間中は先月と同じくフロントエンドエンジニア6人、デザイナー1人に対して行いました。
内容はWCAGの解説、APG(aria authoring practices)の解説、coga-usableの解説、実際のアプリケーション開発時でのアクセシビリティ配慮に関する相談などが主なものとなります。
WCAG解説書 輪読会
アクセシビリティやっていき勢向けにWCAGの輪読会を隔週で行っています。
本期間中は別イベントとバッティングが何度かあったため、2024/02/05, 同03/18の2回のみ開催でした。
外部発表および発信
以前の月報記事でも触れましたが、昨年12月8日に行われた「アクセシビリティチームの立ち上げと成長する組織づくり」という勉強会で弊社嶌田が登壇しました。
その際の発表が記事になりました。
お知らせ
LIFULLではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。
