マネーフォワードにおけるアクセシビリティ向上へのこれまでの取り組み紹介
こんにちは、フロントエンド推進グループの清川（@taigakiyokawa）です。私は普段、toB領域の横断組織のWebフロントエンドエンジニアとして、アクセシビリティガイドラインの作成や共通UIライブラリの開発を行っております。また、アクセシビリティ委員会のメンバーとして、社内のアクセシビリティ意識向上を目的とした知見共有などの啓発活動も行っております。
このnoteでは、マネーフォワードグループのアクセシビリティステートメント公開に伴い、当社のメンバーがこれまでにアクセシビリティ向上のために行ってきた主な取り組みを簡単に紹介していきます。
マネーフォワードグループのアクセシビリティステートメントを公開するに至った背景については、以下のnoteをご覧ください。
紹介するアクセシビリティ向上への取り組みについて
今回紹介するアクセシビリティ向上への取り組みは、社内アンケートを実施して集まった回答や、社外に発信している情報の一部です。なるべく特定のプロダクトやメンバーの活動に偏らないようにしているため、明確な社外発信があるものを除いて全体的にやや抽象的に取り上げています。
今回初めて公式なステートメントを公開したことからも分かる通り、当社にとってアクセシビリティ向上への取り組みはまだ発展段階です。これまでの取り組みは主に、各プロダクトのデザイナーやエンジニアによる自主的な活動です。現時点で有志の方々が取り組んでいる内容を社内外に知ってもらい、今後会社として、これらのアクセシビリティ向上への取り組みを更に加速し大きく発展させていくために、今回「プロダクトの改善」「方針の策定」「勉強会・輪読会」「情報共有」の4つに分けて取り組みをご紹介します。
1. プロダクトの改善
まずは、これまで各プロダクトで行われてきた様々な改善や設計段階での議論などの取り組みを簡単に紹介していきます。
※ プロダクト改善に関わる取り組みの中には、現在開発中のものも含まれるため、現時点でのプロダクトの実態とは異なる可能性があります。
画像の代替テキストにどんな内容がふさわしいかをチームで議論して設定した
セレクトのみのComboBoxコンポーネントを実装する際に、どのようなキーボード操作が適切かを設計段階で検討し実装した
iOSアプリ開発において、将来的な多言語対応を見据えてUIフレームワークの仕組みに乗る形でテキストラベルを実装した
モバイルアプリのタップターゲットサイズがUIごとにバラバラだったものを、方針を決めて適切な範囲への最適化を検討した
背景色と文字色のコントラスト比が一定以上になるように、プロダクトで使用しているカラーパレットを再検討し調整した
日英言語切替機能のリリースに伴い、ページの言語設定（html要素のlang属性値）が適切に切り替わるように改善した
などなど、各プロダクトを開発していく中で気づいたところや見つかった課題を中心に改善を進めています。
2. 方針の策定
会社としては、今回全社ステートメントの策定を行ったアクセシビリティ委員会の設立をはじめ、ガイドラインの作成などの全体方針の策定から取り組み始めています。
アクセシビリティ委員会の設立
Chief Design Officer (CDO) のセルジオさんを中心に、デザイナー、エンジニアをはじめ、法務・コンプライアンスや人事、広報、カスタマーサポートから代表者を集めて、会社全体の方針をとりまとめるアクセシビリティ委員会を設立しました。
この委員会では、今回発表したグループ全体のアクセシビリティステートメントの策定をはじめ、コンプライアンス・マニュアルの改定や問い合わせフローの整備、各事業部に推奨するアクセシビリティの適合レベルの設定、知見の集約、委員会のメンバーを中心にそれぞれの職種に対する啓発活動などを行っています。
私はフロントエンドエンジニアとして、Webアクセシビリティに関する技術面での知見共有や、主にエンジニア職のメンバーのアクセシビリティへの意識向上をしていくために、このアクセシビリティ委員会へ参加しました。また、後述するアクセシビリティガイドラインの作成プロジェクトのマネジメントも行っていたため、全社レベルでの方針策定の動きを把握したり、相互の連携をスムーズにする目的もあります。
アクセシビリティ委員会という形式で様々な職種の方との相乗効果を生むことができて非常に良い取り組みだと感じました。例えば、今回のようにステートメントに付随する形でCDOへのインタビューとこの取り組み紹介のnoteを発信することになったのも、委員会での広報の方との連携がきっかけです。
当初アクセシビリティ委員会では、対外的にはステートメントのみを発信する予定でしたが、私は同時に、「なぜ今回ステートメントを公開することにしたのか」が分かる背景や、「今は実際どのような取り組みが行われていて、今後どうしていく予定なのか」が分かる具体的な情報も発信すべきだと考えていました。ステートメントだけではどうしても抽象的な話しか伝わらないので、そういった具体的な情報が伝わりにくいためです。ステートメントとは別にnoteなどでより具体的な情報発信をするのはどうかと委員会内で提案したところ、今回のような2つのnoteで発信することになりました。
アクセシビリティガイドラインの作成
アクセシビリティステートメントとは別に、toB領域の横断組織に所属するデザイナー、エンジニア、QAの代表者を中心に、主に「マネーフォワード クラウド」シリーズのWebアプリケーションやWebサイトを対象としたアクセシビリティガイドラインを作成し、現在は社内向けに公開しています。
このガイドラインは、Web Content Accessibility Guidelines (WCAG) 2.2の各達成基準をベースに、それらの基準の概要、デザイン、実装、QAの各プロセスにおいて確認すべきポイントの4セクションで構成されています。エンジニア職の社内公用語が英語になることを見据えて現在の文書は全て英語版のみ作成しています。
また、各プロダクトチームの有志によって、日本語版の作成をはじめとするガイドラインの拡充や改善も行われています。
3. 勉強会・輪読会
有志によって、アクセシビリティに関するいくつかの社内勉強会や書籍の輪読会などが開催されています。
デジタル庁『ウェブアクセシビリティ導入ガイドブック』を使ったワークショップ
デザイナーを中心に、デジタル庁のウェブアクセシビリティ導入ガイドブックを使ったワークショップを開催しました。この会では、4~5人のチームに分かれて各章の内容を1人ずつまとめて、それを読み合わせながらコメントしていくワークと、ガイドブック全体を読み終えた上で、自身の担当しているプロダクトではどのような課題があるのかなどを共有し合うワークを実施しました。
書籍『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』の輪読会
書籍の輪読会も各所で行われています。特に、昨年出版された『Webアプリケーションアクセシビリティ』の輪読会には、数多くの方が参加しています。こちらは後述するSlackチャンネル#accessibilityにてデザイナーの有志の方を中心に参加者を募り、エンジニアとの混合で4~5人のチームに分かれて読み進めています。職種や事業領域を越えて読み合い、意見を交わすことで、各自のプロダクト開発にも活用しています。
アクセシビリティガイドラインの読み合わせ
また、前述した当社のアクセシビリティガイドラインの読み合わせを行っているチームもあります。
このチームでは既存プロダクトのフロントエンド分離プロジェクトを進めており、毎週ひとつセクションを決めてチームメンバーみんなで輪読しながら進めていき、最後にセクションに関連する既存のプロダクトの実装と分離プロジェクトで新しく実装を進めているものを比較してどのように改善されたか、プラスアルファでやるべきことがあるかなどを見ていく流れで実施しています。
4. 情報共有
Slackチャンネルの活用
Slackに#accessibilityというチャンネルを作成し、SNSなどからキャッチアップした情報や自身が得た知見を共有したり、アクセシビリティに関する議論や、事業領域を越えた情報交換などが行われています。現在はグループ会社も含めた170名以上が参加しています。
ブログ記事などでのアクセシビリティに関する情報発信
有志によって、技術記事による知見の発信なども行われております。
以下は、私がエンジニア全体に向けて行った、アクセシビリティへの意識向上を目的とした発表の内容をブログにまとめたものです。
最後に
マネーフォワードでは、これまで有志によって様々な観点でのプロダクトのアクセシビリティ改善や、アクセシビリティ関連スキルの向上を目的とした勉強会の開催、意識向上のための情報発信や知見共有などの取り組みが行われてきました。しかし、これらはまだ会社全体においてはごく一部の有志による自主的な取り組みであり、これから更に発展させて、会社全体が能動的に取り組む大きな活動にしていく必要があります。
マネーフォワードグループは、今回アクセシビリティステートメントを公開したことで、会社として改めてアクセシビリティの重要性を認識し、その向上に注力していく宣言をしました。そして同時に、今まで具体的にどんな取り組みが行われてきて、今後どのような取り組みをしていくのかを考えるきっかけとして、このようなnoteを書きました。
まだ始まったばかりのマネーフォワードのアクセシビリティ向上に、ぜひご期待ください！