2023年10月〜2024年1月 LIFULLのアクセシビリティへの取り組み

こんにちは、エンジニアの中島です。

この記事は2023年10月から翌年1月までのLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。

この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されていく予定です。

目次

サービス改善

本期間中の改善取り組みのターゲットはLIFULL HOME'S 不動産アーカイブのスマートフォンページです。

諸事情で発表できないものもありますが公開可能な取り組みを紹介させていただきます。

トップページのエリア選択UIのフォーカス管理

アーカイブサイトのトップページにあるエリアを絞り込むためのUIは大域エリアを選択すると、小域エリアのリストが表示され、それを選択すると探し方を選べるようになる多段の状態をもつUIです。

しかしながら、各エリアや、UI内の戻るボタンを押した際にフォーカスが失われてしまう問題がありました。

この問題を解消するべくフォーカス管理を行うように改修いたしました。

また各ボタンが適切なroleで表現されていなかった問題も合わせて修正しました。

地域・路線から探す検索フロー中にあるエリア選択リンクにアクセシブルな名前を設定

「地域から探す」、および「路線から探す」の検索フロー中にある市区町村・町域、あるいは路線・駅を選択してページ遷移をするためのリンクにアクセシブルネームが存在せず、名前なしリンクとなっていました。

スクリーンリーダーによってはURL文字列の読み上げがなされるなどといった問題がありましたが、これに名前を設定し対象エリアが読み上げられるように改修しました。

路線から探す・地域から探す検索フロー中にある送信ボタンのバリデーション設定

各エリア絞り込みのフローの中にある送信ボタン(次のステップに進むためのボタン)が、エリア未選択時に視覚的に消えているという仕様になっておりました。

そもそも消すべきではないというのはさておき、視覚的には消えているものの、アクセシビリティツリーには表示され、エリア未選択時のフォームバリデーションもなされていない状態でした。

そのため、キーボード操作 + 支援技術による読み上げを利用しているユーザーからすれば遷移ボタンがあるので押したら未選択がゆえに次のページでエラーになるという挙動が見られました。

ボタンの可視化とバリデーション設定が本筋ですが、応急処置として未選択時にボタンが非活性状態であることをaria-disabledで伝えつつ、押した際にネイティブアラートでフィードバックする実装に改修しました。

フッタ近くにある物件の種類から選び直すことができる機能の「もっと見る」ボタンのフォーカス関連の不具合を修正

各ページのフッタ近くにある、サイト回遊用のUI内にある物件種別の「もっと見る」ボタンを押した後にフォーカスが失われてしまうという問題があったため、展開されたコンテンツにフォーカスを移動する改修を行いました。

物件一覧ページの見出し順番の不整合を修正

物件一覧ページでh1見出しの次のレベルとして各物件の見出しがありましたが、h3で実装されていることがわかりました。

物件の一覧を示すための包括的な見出しをh2として設定しました。

デザイン変更を伴うため、一旦はVisuallyHidden(アクセシビリティツリーには存在しているが視覚的には見えない)見出しとして設定しました。

物件一覧の「もっと見る」ボタンを押した後にフォーカスが失われる不具合の修正

物件一覧では物件が列挙されますが、末尾に「もっと見る」ボタンが設置されており、それをクリックすると、次の10件が読み込まれるようになっています。

しかしながらボタンを押した後、フォーカスが表示されたコンテンツに移動せずに失われてしまう不具合がありましたので、表示されたコンテンツの最初のフォーカス可能要素に移動するように改修しました。

おすすめ物件一覧の「もっと見る」ボタンを押した後にフォーカスが失われる不具合の修正

各ページに配置されているレコメンド機能であるおすすめ物件の「もっと見る」ボタンのフォーカスも同様に押した後にフォーカスが失われてしまう不具合がありましたので、表示されたコンテンツの最初のフォーカス可能要素に移動するように改修しました。

ページトップに戻るボタンがフォーカスを伴わない不具合の修正

各ページの末尾には、ページの上部にスクロールアップするためのボタンが設置されています。

しかしながら、スクロールはするもののフォーカスがボタンに残りっぱなしになっており次のフォーカス移動の際にスクロール位置が巻き戻ってしまう問題がありました。

フォーカスを上部の要素に設定し、そういった現象が起こらないように改修しました。

物件画像の編集画面のバリデーション情報の読み上げ対応

アーカイブサイトには物件情報に誤りがあった際、外部から一定編集できる機能があります。

そこでのフォームのバリデーションメッセージが支援技術に正しく伝わらないという問題がありました。

送信ボタン押下時に全体エラーを読み上げ、各エラーを出しているフォームコントロールにエラーメッセージを関連付ける対応を行いました。

物件(部屋)の詳細ページの青塗りボタンのフォーカスコントラスト確保

サービス内の重要度の高いボタンには青塗りのものがよく使われています。

OSによってはフォーカスインジケータが青色でフォーカスコントラストが確保できず、フォーカスを見失うことにつながるため、outline-offsetの設定を見直し、フォーカスコントラストを確保するよう修正を行いました。

物件(戸)の詳細ページのフォーカスを受け取らないコントロールを修正

同ページ内で本来フォーカスを受け取るはずのコントロールが受け取らない実装になっているものが散見されたため、フォーカス可能に修正しました。

物件詳細ページの周辺地図モーダル及び、その中の各コントロールの改善

物件詳細ページでは物件の周辺の地図情報を表示するモーダルが用意されています。

モーダルの起動ボタンを押してモーダルを立ち上げた後もフォーカスがモーダルに移動しなかったり、中にあるスイッチやトグルボタンなどのコントロールがキーボード操作できない・正しいrole設定がなされてないなどの問題がありましたので適切に動作するよう改修いたしました。

トップレベルランドマークを設定

元々トップレベルランドマークの設定がなされておらず、いくつかの要素がランドマーク外に漏れており、ランドマーク間の移動を利用するユーザーのコンテンツ見落としにつながってしまう懸念がありました。

また設定がなされてないことで、メイン領域への支援技術を用いたジャンプなどが行えない問題がありました。

本対応ではトップレベルランドマークを設定し、見落としの防止や領域間ジャンプの利便性向上のための改修を行いました。

育成・啓発の取り組み

アクセシビリティ1on1

本期間中はフロントエンドエンジニア6人、デザイナー1人に対して行いました。

内容はWCAGの解説、APG(aria authoring practices)の解説、coga-usableの解説、実際のアプリケーション開発時でのアクセシビリティ配慮に関する相談などが主なものとなります。

アクセシビリティUT動画を見る会の実施

弊社では不定期で、さまざまな特性をお持ちの方がどのように自社のサービスを使われるのかを知るためのUT動画を見る会を実施しています。

それを見ることでどのようなことが求められるのか、どのようにサービスを考えていけばよいのかを考えるきっかけづくりに役立ててもらっています。

2023/11/08 全盲ユーザーのUT動画を見る会

この日も様々な職種の方々が計18名お集まりいただけました。

動画を見たメンバーから

• スクリーンリーダーユーザーの具体的なイメージがわいた
• いろいろなデバイス(点字ディスプレイなど)の存在が知れた
• 適切なタイミングで適切な読み上げを行う重要性
• アクセシブルネームの重要性
• 予測可能であることの重要性
• DOM順序の考え方
• 見出しやランドマークの重要性
• カスタムなフォームコントロール実装の落とし穴
• フォームエラーの伝え方の勘所

などいろいろな発見の声や感想が聞こえてきました。

2023/12/11 弱視ユーザーのUT動画を見る会

この日も様々な職種の方々が計21名お集まりいただけました。

動画を見たメンバーから

• コントラストの重要性
• 拡大操作時の誤操作を誘発してしまうデザイン
• 識別しづらいフォントの存在
• カードUIの2列目以降の発見性の低さ
• 拡大時のローディング等の状態変更の気付き辛さ
• 予測可能であることの重要性

などいろいろな発見の声や感想が聞こえてきました。

社内表彰

LIFULL社ではクォータに一度、エンジニアがそろうエンジニア総会というものがあり、そこにアクセシビリティへの取り組みを表彰する枠が用意されています。

1Q(2023/10)の表彰はLIFULL HOME'S iOS開発チームでした。

スクリーンリーダーを利用して検出できたiOSアプリのアクセシビリティ上の問題をまとめ、それぞれへの対応をプロジェクト化していく企画整理を行ってくださいました。

今後のLIFULL HOME'S iOSアプリのアクセシビリティ改善にご期待ください。

外部発表

Orangeの会

2023年08月08日にOrangeの会という勉強会で弊社嶌田が登壇しました。

発表スライド

【実践者に学ぶ】アクセシビリティチームの立ち上げと成長する組織づくり

2023年12月08日の「アクセシビリティチームの立ち上げと成長する組織づくり」という勉強会で弊社嶌田が登壇しました。

https://peatix.com/event/3767934

お知らせ

LIFULLではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。

hrmos.co

hrmos.co