2024.12.15

全社員の使いやすさを追求！会議室予約システムのアクセシビリティ改善

加島里佳

はじめに

初めまして。ICT統括室でエンジニアをしている加島です。

前回の樽見さんに続いて、リクルートの社内ICT組織の魅力をもっとお伝えできればと思い、私からはエンジニア目線で行った「会議予約システムのアクセシビリティ改善」についてお話ししたいと思います。

私は2024年1月にキャリア採用でリクルートに入社しました。

前職ではエンジニアとして働いていましたが、UI/UXに興味があったこともあり、入社後はエンジニアでありつつもデザイナー業へのチャレンジも始めました。

業務では複数プロジェクトにおいて、フロントエンド開発、インフラ開発、Figmaでのワイヤーフレーム作成など、多方面で力を発揮できるよう頑張っているところです。

入社後デザインの勉強をしている時に、2024年の4月にアクセシビリティに関する法律が改正され、対応が求められるようになったことを知りました。ちょうどその時期に外部の勉強会で、様々な企業が行ったアクセシビリティ対応の取り組みを聞く機会がありました。アクセシビリティに関する潜在的なニーズや、対応によって変わったことなどを聞く中で、私自身もその重要性を強く感じ、プロジェクトに反映させたいと考えていました。

今回のプロジェクトは、当初モバイル対応のUIを改善することが目的でした。しかし、ユーザーの使いやすさを追求する中で、PCも含めた全体的なUIのアクセシビリティ対応を行うことにしました。

アクセシビリティ対応の具体的な取り組み

アクセシビリティの対応するにあたって、まずは自分自身がアクセシビリティ対応の重要性を理解することから始めました。

今回は特に視覚の部分に注目し、色覚タイプ別の見え方や、後天的にも色覚の変化が起こりうること、そしてその割合が日本では約500万人にも上ることを知りました（出典: NPO法人カラーユニバーサルデザイン機構-色覚型と特徴）。この学びをチーム内で共有したことにより、「アクセシビリティ対応は必要」という共通認識をチーム内で持ちながら取り組むことができました。

次に既存のデザインを元に、モバイル版のデザインを作成しました。特に、色のコントラスト比やタップターゲットのサイズなど、モバイル特有の課題に対応しました。また、システム内でのメイン要素となるカレンダー部分も、元々はPC画面と同様のコンポーネントを利用していたため、モバイル用に新たに作成しました。

カレンダー画面については、PC版でもキーボード操作のみで予約ができるようにし、アクセシビリティを向上させました。これにより、マウスを使わないユーザーでも快適に操作できるようになりました。

苦労したこと

今回の会議室予約システムはすでに稼働しているものがあったため、いかにUXを変えずアクセシビリティに対応するか、という点が課題でした。その中でも特に以下の3つは個人的に悩んだポイントでした。

①デザイン性を担保しつつ、コントラスト比を保持すること

今回特に意識した点の1つでもあるコントラスト比の調整ですが、コントラスト比だけでデザインを決めると、全体的に濃くなったり、蛍光色になったりしてしまう問題が発生しました。とはいえどうしても譲れないポイントではあったため、最終的に使用する色を極力減らすようにして対応しました。

②既存のデザインや操作性の維持・向上

既存のデザインや操作性を大きく変更せずに対応することも課題でした。どうしても対応できない部分については、違和感のない範囲でデザインを調整しました。例えば、フォントサイズを大きくした際に既存のデザインではメニューが画面上部に収まらなかったため、新デザインではドロワーメニューとして切り出しました。

これに加えて、PC版キーボード操作が行えるようにするなど、更に視認性、操作性を高められるように対応しました。

③スクリーンリーダーに配慮した表記

「2024/1/1」「2024-01–01」「2024年1月1日」、どれも日付を表す時によく使われるものであり、視覚的には認識できるものです。しかし、スクリーンリーダーで読み上げられる時、ものによっては「にせんにじゅうよんスラッシュ、じゅうにスラッシュ、いち」「にせんにじゅうよん、ぜろいち、ぜろいち」と読み上げられたりします。リニューアル後のUIでは日付の表記を年月日かつゼロパッド抜きで統一しました。また、どうしてもUI上削れない記号に関しては、スクリーンリーダーで読み上げられないようにしたり、代替テキストを追加したりしました。

アイコンのみのボタンに関しても、ソースコードにスクリーンリーダー用の文言を追加しました。見えない部分であるため、どのような文章にすればわかりやすいのか悩み、他社のシステムや記事を参考にしたり、生成AIを利用したりして考えました。

これらの取り組みを行ったことで、PC・モバイルそれぞれに適応したUIになり、操作性が向上しました。アクセシビリティに準拠できているかの計測はLighthouseで行いましたが、PC版は「83点→92点」、モバイル版は「83点→95点」と大幅に向上しました。

まとめ

社内でもアクセシビリティに対する意識が高まりつつある中で、挑戦出来る機会があり、いち早くシステムに取り入れることができたのは本当によかったと思いました。

また、すでに作り上げたシステムも時代の流れやユーザーのニーズに合わせ、常にアップデートしていく必要があると改めて思いました。

小さな変化、見えない変化でも、ある人にとっては大きな変化であり、身近なところからでもユーザビリティを高めることはできると感じました。

「UIデザイン」というとデザイナーを思い浮かべる方が多いかもしれませんが、画面に写っているものだけでアクセシビリティを高めることには限界があると思います。また、ソースコードの仕組みで改善できる場合もあるため、開発者もアクセシビリティの知識を習得することにより、よりユーザーの使いやすさを考慮したシステム作りができると感じました。

すなわち、今後フロントエンドエンジニアには、UI/UXデザインの知識に加えて、アクセシビリティの知識を持つことが求められるのではないかと思います。