こんにちは、エンジニアの中島です。
この記事は2024年4月〜6月のLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。
この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されています。
目次
サービス改善
本期間中の改善取り組みのターゲットはLIFULL HOME'S 賃貸・流通マネージャーサイトです。
こちらはLIFULL HOME'Sをご利用いただいている会員様(不動産会社様)が、物件を掲載する際にお使いになる管理画面になります。
諸事情で発表できないものもありますが公開可能な取り組みを紹介させていただきます。
取扱物件検索の検索方法選択タブのボタン化
マネージャーにログイン後に表示されるページの取扱物件検索の検索方法選択タブはdivで実装されており、フォーカス不能・選択不能であるという問題がありました。
いったんそれをボタン化し、キーボード操作を可能にしました。
またタブ内に表示される各フィールドに適切な名前を設定しました。
物件登録画面(賃貸のみ)のタブのボタン化とテーブル文脈の破棄
物件情報を登録する画面では、多岐にわたる入力をする必要があり、そのためタブを使って情報を分割しています。
しかしながらこのタブもdivで実装されており、フォーカス不能・選択不能であるという問題があったため、こちらも同様にボタン化する対応を行いました。
また、この物件登録画面はレイアウトのためにテーブルを使っており、また余白のために空白のセルを使っていたりとセマンティクスが不適切であり、スクリーンリーダーでの読み上げが壊滅的であるという問題がありました。
こちらは組み直しが大規模改修となり困難なためrole設定でテーブル文脈を破棄する対応を行いました。
物件登録画面(賃貸のみ)内のダイアログのキーボード操作を可能に
物件登録画面内にはダイアログが表示されるボタンが随所に設置されています。
しかし、多くはclickではなくmousedownイベントによって起動するように実装されており、キーボード操作でのダイアログ表示ができないという問題がありました。
これらをクリックに変更し、キーボードでのダイアログ開閉を可能にしました。
またダイアログのrole設定不備・および名前設定の不備・キャンセル、送信ボタンのフォーカス不能不備などの問題も合わせて修正しました。
物件登録画面(賃貸のみ)内の郵便番号からの住所入力補完機能をキーボード操作可能に
物件登録画面内に住所入力を簡単に行うために郵便場号から住所入力を行う機能があります。
しかしこちらも機能を呼び出すボタンにフォーカスが当たらないといった問題ありました。
こちらも適切なrole、振る舞いの設定を行い、キーボード操作での利用を可能にしました。
物件登録画面(賃貸のみ)内の画像登録UIをキーボード操作可能に
物件登録画面には物件の画像を登録するUIがありますが、こちらも画像の選択ボタン、削除ボタンなどいくつかのボタンがキーボード操作不能という問題がありました。
他と同様に適切なrole、振る舞いの設定を行い、キーボード操作での利用を可能にしました。
取扱物件一覧(賃貸のみ)内のフォーカス不能なボタンを修正
会員様の取扱物件を一覧表示する画面には、表示された物件の編集や削除を行うためのボタンなどが数多くあります。
いずれも名前の設定漏れがあったりキーボード操作ができないといった問題がありました。
他と同様に適切な名前設定、role設定、振る舞いの設定を行い修正を致しました。
育成・啓発の取り組み
新入社員研修
弊社では毎年6月ごろに新入社員(新卒・中途)向けにアクセシビリティの理解を深めるための研修を行っています。
この研修は今年で3回目で、内容はfreeeさんのアクセシビリティ研修の資料を参考にさせていただいており、毎年LIFULLに合わせてマイナーチェンジを行っています。
アクセシビリティとは何か、基本的な考え方など説明する会は営業職等を含めた全職種対象で行い、その後より具体的な内容をものづくり職種を対象に行いました。
サービス作りに直結する学びになったという声だけでなく、営業資料作成時にも気を付けていきたいなど、多岐にわたる感想をいただきました。
アクセシビリティ1on1
本期間中は先月と同じくフロントエンドエンジニア6人、デザイナー1人に対して行いました。
内容はWCAGの解説、APG(aria authoring practices)の解説、coga-usableの解説、実際のアプリケーション開発時でのアクセシビリティ配慮に関する相談などが主なものとなります。
WCAG解説書 輪読会
アクセシビリティやっていき勢向けにWCAGの輪読会を隔週で行っています。
本期間中は4月1日、5月30日、6/27日の3回行われました。
範囲は達成基準1.3.4〜1.4.3です。
社内表彰
LIFULL社ではクォータに一度、エンジニアがそろうエンジニア総会というものがあり、そこにアクセシビリティへの取り組みを表彰する枠が用意されています。
3Q(2024/04)の表彰はLIFULL HOME'S 賃貸開発チームでした。
LIFULL HOME'S(賃貸)の問い合わせフォームのアクセシビリティ改善に取り組んでいただいたことが評価されました。
キーボード操作時の細かい不備や、Web標準に準拠したフォームの入力支援などさまざまな修正が行われました。
お知らせ
LIFULLではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。
