【react】UI ライブラリ Mantine を使用したアクセシビリティ対応

はじめに

WEB ページをスクリーンリーダーなどの支援技術に対応させるためには適切な role 属性や WAI-ARIA を組み合わせる必要があります。
しかしいざ対応しようとしても種類が多すぎてどの属性が適切か分かりにくく骨の折れる作業になってしまいます。

そこで UI ライブラリを使用すると簡単に対応できます。
React 向けの UI ライブラリは数多くありますが、個人的に Mantine がアクセシビリティに優れていると感じたので紹介します。

準備

今回は React アプリケーションを対象としているため Reactの基本的な知識がある前提で書いています。
以前書いた WAI-ARIA とセマンティック要素の記事も読んでいただけるとより理解が深まります。

WAI-ARIA を使って WEB ページをアクセシブルにする方法 | Accessible Tech Blog
【HTML5】HTML のセマンティック要素を取り入れて WEB ページを読みやすくする方法 | Accessible Tech Blog

UI ライブラリ Mantine とは？

Mantineは React 向けの UI ライブラリです。
TypeScript ベースのため型の恩恵を受けられるのが特徴です。
100 種類以上のコンポーネントと 40 以上の便利な Hook が用意されているので少ない記述で画面を構築できます。

また、WAI-ARIA や role 属性なども用途毎に適切に設定されるためアクセシビリティも高いです。
これらの属性を自前で対応しようとすると用途毎の属性をリストアップして Javascript と繋ぎ込みして…と大変骨の折れる作業になりますが、Mantine を使うと特に意識せずともアクセシビリティ対応ができます。

さらに Mantine は React に特化してるので Javascript との連携も簡単です。
以下は Mantine を使用したプログレスバーの例です。

import { Progress } from '@mantine/core';

function Demo() {
  return <Progress value={50} />;
}

HTML は以下のように出力されます。
div 要素に対してプログレスバーとして必要な role="progressbar"や aria-valuemin、aria-valuemax、aria-valuenow が付加されていることが分かりますね。
スクリーンリーダーでは「プログレスバー・50」のように読まれるのでユーザーは現在の進捗状況を把握できます。

<div class="mantine-Progress-root mantine-syiqbm">
  <div
    role="progressbar"
    aria-valuemax="100"
    aria-valuemin="0"
    aria-valuenow="50"
    class="mantine-ii0spb mantine-Progress-bar"
    style="width: 50%;"
  ></div>
</div>

このように少ない記述で用途毎の適切なアクセシビリティ属性が自動で付加されるのは UI ライブラリの強みですね。
さらに Mantine は TypeScript ベースなので属性や CSS の入力補完が効くため高速に開発できます。
状態管理に関しても数多くの便利な Hook が用意されているので少ない記述で見事に機能します。

Mantine のインストール

Mantine は React 向けの UI ライブラリなのでまずは React をセットアップします。
CreateReactAppを使っても良いのですが今回は Viteを使用してセットアップします。

npm init vite@latest

いくつか質問されるので以下のように選択します。

プロジェクト名: mantine-example
フレームワーク: React
プログラミング言語: TypeScript

必要なファイルがダウンロードされるのでパッケージをインストールします。

cd mantine-example
npm install

ここまでは通常の React のセットアップと同じですね。
続いて Mantine をインストールします。

npm install @mantine/core @mantine/hooks @emotion/react

最後に app.tsx を以下のように編集して完了です。

import { MantineProvider, Text } from '@mantine/core';

export default function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Text>Welcome to Mantine!</Text>
    </MantineProvider>
  );
}

以下のコマンドを実行するとlocalhost:5173で開発サーバーが起動します。
画面に「Welcome to Mantine」と表示されていればインストール成功です。

Mantine の学習

最初は公式のチュートリアルを参考にするのが良いです。
テーマやスタイルなど Mantine の基本的な概念を知ることができます。

Learn the basics | Mantine
https://mantine.dev/pages/basics/

他にも公式ドキュメントには 100 種類以上の各種コンポーネントの詳しい説明と例が記載されています。
アクセシビリティに関して記載があるのも親切ですね。

Progress | Mantine
https://mantine.dev/core/progress/

おわりに

最近まで UI ライブラリというものを使ったことがなかったので今回は良い学びになりました。
開発のスピードを落とさずにアクセシビリティ対応ができるのは嬉しいですね。

今回は以上です。
ここまで読んでいただきありがとうございます。

Accessible Tech Blog