食べログで取り組んでいるWebアクセシビリティについて

食べログエンジニアの荒川です。
今回は食べログのリプレース（React化）で取り組んでいるWebアクセシビリティ対応の支援ツールについてご紹介します。

そもそもWebアクセシビリティとは？

全ての人にアクセス可能な、ユーザー体験を提供することです。
具体的には
・Webサイトを容易に解釈できるようにセマンティックなHTML構造にする
・読み上げ可能な補助テキストを付与する（WAI-ARIA属性）
・マウス操作専用のUIは避け、キーボード操作も可能にする
などが挙げられます。

食べログで使用しているOSSツール

フロントエンドのリプレースに伴って、アクセシビリティの実装を補助するツールを導入しました。以降では、実際に利用しているツールについてご紹介します。

eslint-plugin-jsx-a11y 

・GitHub
はじめに述べたWAI-ARIA属性の適切な設定、コンテンツ中の見出し（h1、h2など）など、アクセシビリティに関する種々のLintを行ってくれるeslint pluginです。
食べログのリプレースではこのpluginを有効にし、GitHubのPullRequest毎にCIでチェックするようになっています。

JavaScriptでHTMLを描画することによって、この様なLinterをビルド時に強制できるようになっていることは、JSXの結構な利点に思えました。

React Testing Library

・React Testing Library - Introduction
・GitHub

Jestと組み合わせて、Reactコンテンツの単体テストを行うライブラリです。
公式のIntroductionでは以下の様に述べています。

”The utilities this library provides facilitate querying the DOM in the same way the user would.”

Copyright (c) 2019 Alex Krolick
Released under the MIT license
https://testing-library.com/docs/react-testing-library/intro

"このライブラリが提供するユーティリティは、ユーザーと同じ方法でDOMを問い合わせることを容易にします。"（Google翻訳）

具体的に説明します。
今までのDOM アクセスAPIは、id属性・class属性に基づいてアクセスする方法が一般的でした。
しかし、ReactTestingLibraryは、ユーザーの自然な操作を主軸にDOMアクセスを行うことができます。

例えば、チェックボックスにチェックを入れる場合は、ラベルをクリックするという動作をします。これがAPIで表現されていて、

import { render } from "@testing-library/react";
import { fireEvent } from "@testing-library/dom";

// jsxをrender
const { getByText } = render(
   <label>
       ラベルテキスト
       <input type="checkbox" name="sample" />
   </label>
);

// queryを使ってチェックボックス取得し、クリックする
const checkbox = getByText("ラベルテキスト");
fireEvent.click(checkbox);

というような記述になります。

また、inputにテキスト入力する場合は、inputのplaceholderを元に要素を取得するなど、ユーザーの操作が基準になっています。
他にも画像や、ラベルのないアイコンなどは、alt属性、aria-label属性などを適切に設定することで、Testing LibraryのAPIからアクセス可能になります。

アクセシビリティに基づいた単体テストをすることで、自然にある程度担保されていくのは素晴らしいアプローチだと思いました。

その他 Reactのアクセシビリティ関連ツール

今のところチームでは導入していませんが、Reactのアクセシビリティをテストする以下のようなテストツールもあります。

react-axe
・GitHub
このライブラリを導入して実行すると、ブラウザの開発者ツールのコンソールに、アクセシビリティに関する問題をレベル別にログ出力します。

jest-axe
・GitHub
アクセシビリティに関する、Jestのカスタムマッチャーを提供しています。
アサート対象のDOMコンテンツが、アクセシビリティに違反している場合にエラーを出力します。

storybook-addon-a11y
・GitHub
Storybook上で、アクセシビリティの問題を表示してくれるaddonです。

まとめ

今回は機械的に検証できるツール群をご紹介しました。リプレースを進めるうちに、現在の食べログでは、アクセシビリティに関して細かなUIの動作や画面の構造は未熟な部分も多く、改善を行いつつ実装しいます。

次回の私の記事は、具体的な事例で、アクセシビリティ関連の気をつけた実装についてご紹介しようと思います。

最後に

食べログFEチームでは、一緒にリプレースに取り組んでくれる仲間を大募集中です！

・React/TypeScriptでバリバリ開発したい
・レガシーなシステムのリファクタリングがしたい
・アーキテクチャについて探求したい
・食べログというプロダクトに貢献したい

どれかに当てはまった方は以下のリンクを是非御覧ください！