ウェブアクセシビリティの対応
昨今、アクセシビリティの対応はWeb制作において重要性を増しており、対応することが当たり前になりつつあります。
一方でフレームワークの種類やテンプレートエンジンなど、開発を取り巻く技術やツールも多岐にわたり、さまざまな選択肢があります。
数ある選択肢の中で、JSのモダンフレームワークでフロントエンド開発の定番とも言える、人気フレームワークのNext.jsで開発をする際に、ウェブアクセシビリティ対応に活用できるチェックツールと基礎的な導入方法をご紹介します。
本記事の内容は、過去記事（ウェブアクセシビリティ対応を効果的に！実施前に知っておきたい設計の考え方）で紹介している【機械的にできるウェブアクセシビリティ対応】項目のカラー・コントラスト比設定、HTMLマークアップの自動チェックツールとして最適です。
下記で紹介するツールを最大限に活用できれば、ウェブアクセシビリティ対応という観点で成果物の品質を底上げすることが期待できます。
ウェブアクセシビリティチェックにリンターを活用する
アクセシビリティで準拠認定を得るには、定められた基準による試験の実施が必要です。
ただ、試験にはマークアップが正しければ通過できる項目も多くあり、初歩的なマークアップの不備やミスなどは極力減らしておきたいと思います。
また、JSフレームワークなどを用いる際、テンプレートエンジンによる最終的にレンダリング、生成されたDOMがマークアップ、構造的に正しいかどうかをコーディングの段階で検知、補助することで、試験を行う前段階でコードレベルで品質が高い状態にすることができれば、修正のリスクが減り、品質向上しつつ、工数削減が見込めます。
JSフレームワークの開発環境では、ESLintのようなリンターと呼ばれるチェックツールや、ウェブアクセシビリティのチェックツールを簡単に導入することができますので、活用できる代表的なリンタープラグイン、ツールを紹介します。
eslint-plugin-jsx-a11y
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
jsx用のESLintのプラグインは、React、Next.jsなどjsx（tsx）をテンプレートエンジンを用いている際に活用できます。
このプラグインを使うとJSXでコーディングしているときエディタにエラーが出力されます。
VSCodeのエディターを使っていればリアルタイムでエラー検知し表示してくれます。
gitでソースコードを管理しながらプロジェクトを進行していてコミット、pushをhuskyなどのgitフックで制御している場合は、エラーが出てコミットができないため、リンターを通ったコードのみがコミット可能となり、成果物としてのベース品質を向上できます。
マークアップレベルで問題のあるものはこのプラグインで早期に問題検知が可能です。
余談ですが、astroでも利用可能です。vue.js用には別途eslint-plugin-vuejs-accessibilityというものがあるようです。
axe-core（アックスコア）
axe-coreは構築されたDOMでアクセシビリティチェックを行ってくれるツールです。
Next.js（React）では@axe-core/react をプロジェクトにインストールして使います。
活用方法としては、ブラウザの拡張機能のインストールやpupperterを用いた出力などで用います。
余談ですが、Lighthouseのアクセシビリティテストにも使われているそうです。
eslint-plugin-jsx-a11yを活用する
ここではNext.js（v14.0.4）で設定するための手順や設定を紹介します。
プロジェクトにeslint-plugin-jsx-a11yをインストールします。
$ npm install eslint-plugin-jsx-a11y --save-dev
.eslintrcに下記を追記します。
"extends": [
"plugin:jsx-a11y/recommended"
]
recommendedとstrictの違い
デフォルトのルールにrecommendedとstrictの違いあるのですが、1項目のみ（anchor-ambiguous-text項目がrecommendedでは無効）差があります。
axe-coreを活用する
React用も公開されており、下記でインストールできます。
npm install @axe-core/react --save-dev
Page RouterとApp Routerでは設置方法が違うので注意が必要です。
下記はApp Routerの場合での利用方法です。
コンポーネントディレクトリ配下にAxe.tsxを作成します。
'use client';
import React from 'react';
export default function Axe() {
if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
Promise.all([import('@axe-core/react'), import('react-dom')]).then(
([axe, ReactDOM]) => {
const AXE_LOCALE_JA = require('axe-core/locales/ja.json');
const config = {
locale: AXE_LOCALE_JA,
};
axe.default(React, ReactDOM, 1000, config);
},
);
}
return null;
}
ツールはクライアントサイドで動きますのでuse client を明記しておきます。また、開発時のみ使えるように条件分岐を書きます。
configにlocale日本語をセットします。チェック項目はconfigに追記することで他にも細かい設定が可能です。
※上記では日本化のみ追記し、初期設定状態です。
次に作成したコンポーネントをlayout.tsxに読み込みます。
︙
import Axe from '@/components/Axe';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='ja'>
<body className={inter.className}>
{children}
<Axe />
</body>
</html>
);
}ローカル開発環境を立ち上げると検証のコンソールタブに下記のように表示できます。
説明テキストは先程設定した通り日本語で出力されています。
拡張機能を利用する
axe-coreはchrome、Firefoxの拡張機能があり、そちらも活用できます。（下記はchromeの拡張機能）
axe DevTools - Web Accessibility Testing
拡張機能はお手軽に使えますが、フル機能を使う場合、proバージョンが必要な点は注意が必要です。
※細かいセッティングにはProの機能が必要になります。
拡張機能を入れて確認した場合の出力例です。ブラウザの検証画面タブの右「>>」をクリックすると「axeDevTools」のタブがあるのでそちらを開きます。
レンダリング、描画された画面をチェックし、コントラスト比などの項目も出してくれます。
その他活用法
axe-coreとPuppeteerでテスト結果をcsvに出力するスクリプトも有志の開発者によって公開されております。
ファイルに出力してくれるので、こちらを活用すれば資料化などの手間が軽減できそうです。
まとめ
これらのツールを使うことで、アクセシビリティ対応の開発体験を向上することができます。
アクセシビリティの対応に慣れてなくても、機械的にエラー、警告が出るので何を対応してけばいいか把握でき、つど問題を解決しながら進めることができます。
最終的には人力チェックで規定に沿った試験をする必要がありますが、JSフレームワークを用いる際でも、ソースコードからレンダリングされたあとの細かいチェックをリアルタイムでしてくれるため、ベースのクオリティが上がり試験に際しての修正が少なくなることが見込め、スムーズに進行できそうです。
細かい条件、指定がある場合は初期の設定が少し大変ですが、最初に細かくやっておけば、要件に沿ったチェックも可能なため、JSフレームワークでアクセシビリティ対応する際はぜひ活用していきたいところです。
これらを実際に活用してどういうところが良くて、どういうところが課題だったかは今後の記事で現場目線で実践できればと考えています。
※完全に余談ですが、記事構成に紆余曲折あったのでタイトルが迷走していたところ、AIに聞いてみたらバッチリ名前を決めてくれました👏