こんにちは、エンジニアの中島です。
この記事は2024年7月のLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。
この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されています。
目次
サービス改善
本期間中の改善取り組みのターゲットはLIFULL HOME'S 賃貸・流通マネージャーサイトです。
こちらはLIFULL HOME'Sをご利用いただいている会員様(不動産会社様)が、物件を掲載する際にお使いになる管理画面になります。
諸事情で発表できないものもありますが公開可能な取り組みを紹介させていただきます。
ログイン画面の入力フォームの名前設定
ログイン画面の入力フォームには一部名前が設定されていないコントロールがあり、支援技術ユーザーにとっては何の入力が求められているのかがわかりにくい状況がありました。
これらのコントロールに適切な名前を設定する修正を行いました。
物件登録画面のステップ情報のスクリーンリーダー対応
物件登録画面は入力ページ、確認ページ、登録完了ページの3ステップで構成されています。
そのステップの現在地情報は画面上部に画像で表示されていますが、代替テキストが「進捗状況」とだけ書かれていて、ステップの一覧、現在地情報を支援技術から読み取ることができない状況にありました。
そこで、代替テキストを空にし、スクリーンリーダー用にaria-currentを設定した順序リストで補うように修正しました。
売買物件登録画面のテーブル文脈の排除
売買の物件登録画面はレイアウトのためにテーブルを使っており、また余白のために空白のセルを使っていたりとセマンティクスが不適切であり、スクリーンリーダーでの読み上げが壊滅的であるという問題がありました。
前回賃貸物件登録画面でも同様の問題があり、role設定でテーブル文脈を破棄する対応を行いましたが、売買側にも同様の修正をしました。
物件登録画面内の物件画像編集モーダルのアクセシビリティ対応
賃貸・売買ともに物件登録画面内に登録する物件画像を編集するためのモーダルがあります。
モーダルがモーダルとして認識されない、モーダル内のコントロールにフォーカスが適切に移動しない、フォーカスがトラップされない、モーダル内のコントロールのフォーカスインジケータが見えないなど様々な問題がありました。
これらを解消すべく、求められるrole/stateの設定およびフォーカス管理、フォーカスインジケータの可視化対応などを行いました。
取扱物件の一覧ページにある各コントロールへの名前設定
不動産会社様がLIFULL HOME'Sに掲載しようと登録した物件の一覧ページには、確認したい物件を絞り込むための検索フォームが設定されていますが、これらのコントロールには名前が設定されていないものが多くありました。
それぞれのコントロールに名前を設定し、支援技術ユーザーでもコントロールの目的を理解できるよう修正しました。
育成・啓発の取り組み
アクセシビリティ1on1
本期間中は先月と同じくフロントエンドエンジニア6人、デザイナー1人に対して行いました。
内容はWCAGの解説、APG(aria authoring practices)の解説、coga-usableの解説、実際のアプリケーション開発時でのアクセシビリティ配慮に関する相談などが主なものとなります。
社内表彰
LIFULL社ではクォータに一度、エンジニアがそろうエンジニア総会というものがあり、そこにアクセシビリティへの取り組みを表彰する枠が用意されています。
4Q(2024/07)の表彰はLIFULL HOME'S アーカイブ開発チームと売買開発チームでした。
アーカイブチームはマンションブランドごとの物件一覧ページのリニューアルにおいてフルキーボード操作、及びロストすることのないフォーカスマネージメントを実現した点が評価されました。
また売買開発チームは売買物件の一覧ページ末尾にある不動産会社情報カルーセルのタブストップ数を減らし、キーボード操作をより用意にした点が評価されました。
お知らせ
LIFULLではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。
