ChakraUIとNuxt.jsを使用してアクセス可能なフロントエンドアプリケーションを構築する方法

公開: 2022-03-10

簡単な要約↬この記事では、アクセス可能なフロントエンドアプリケーションを構築する際にChakraUIとNuxtJSを使用する方法を見ていきます。従うためには、NuxtでプログレッシブフロントエンドフレームワークVue.jsを使用することに精通している必要があります。そうでない場合は、Vue.jsとNuxtJSのドキュメントを参照して開始してください。

多くの人にとって、ウェブは日常生活に欠かせないものです。彼らはそれを職場、家庭、そして外出先でも使用します。 Webアクセシビリティとは、障害を持つ人々がWebを平等に使用できることを意味します。したがって、Web上に構築する開発者や組織にとって、アプリケーションに包括性とアクセシビリティを組み込むことが重要です。

Webをよりアクセスしやすくするために、以下を順守するなど、アプリケーションに実装する必要のあるいくつかのベストプラクティスと標準があります。

セクション508;
支援技術法;
障害を持つアメリカ人法（ADA）;
WCAG 2.0（A＆AAガイドライン）;
BBCモバイルアクセシビリティガイドライン;
WAI-ARIA（ W eb A ccessibility I nitiative – A ccessible Rich I nternet A pplications）の実践。

これらの標準の実装を学ぶことは、プロジェクトの期限や開発者として取り組む必要のあるその他の制約を考慮すると、困難な作業のように思えます。その観点から、Webアプリケーションにアクセスできるようにするために構築されたUIデザインシステムを紹介します。

チャクラUI

Chakra UIは、SegunAdebayoによって作成されたデザインシステムおよびUIフレームワークです。シンプルさ、モジュール性、構成可能性、アクセシビリティを念頭に置いて作成されました。 Chakra UIは、アクセス可能なフロントエンドアプリケーションを作成するために必要なすべてのビルディングブロックを提供します。

注： Chakra UIは内部でCSS-in-JSに依存していますが、ライブラリを使用するためにそれを知る必要はありません。

フレームワークは元々React用に作成されましたが、JonathanBakebwaがVueへの移植を主導しました。そのため、Vuejs / NuxtJS開発者は、ChakraUIを利用してアクセス可能なWebアプリケーションを作成できるようになりました。

チャクラUIの機能

Chakra UIは、次の原則を念頭に置いて作成されました。

スタイルの小道具
Chakra UIを使用すると、小道具を使用してコンポーネントのスタイルを設定したり、スタイルをオーバーライドしたりできます。これにより、スタイルシートまたはインラインスタイルの必要性が減少します。 Chakra UIは、内部でStyled Systemsを使用することにより、このレベルの柔軟性を実現します。
構成
Chakra UIのコンポーネントは、複雑さを低く抑え、それらを一緒に構成するために、最小限の小道具で小さな部分に分割されています。これにより、スタイルと機能が柔軟で拡張可能になります。たとえば、 CBoxおよびCPseudoBoxコンポーネントを使用して、新しいコンポーネントを作成できます。
アクセシブル
Chakra UIコンポーネントは、WAI-ARIAガイドラインの仕様に従い、適切なaria- *属性を備えています。また、作成された各コンポーネントのアクセシビリティレポートは、 accessibility.mdというファイルにあります。 CAccordionコンポーネントのアクセシビリティレポートを参照してください。
テーマ可能
Chakra UIを使用すると、アプリケーション全体で、任意のコンポーネントでテーマの値を簡単に参照できます。
ダークモードのサポート
Chakra UIのほとんどのコンポーネントは、箱から出してすぐにダークモードと互換性があります。

ChakraUIがアクセシビリティをサポートする方法

Chakra UIの作成の背後にあるコア原則の1つは、アクセシビリティです。そのことを念頭に置いて、Chakra UIのすべてのコンポーネントは、以下を提供することにより、アクセシビリティをサポートしてすぐに使用できます。

キーボードナビゲーション—運動技能障害のあるユーザーに役立ちます。
フォーカス管理、
スクリーンリーダーに必要なaria- *属性、
モーダルダイアログのトラッピングと復元に焦点を当てます。

ジャンプした後もっと！以下を読み続けてください↓

ChakraUIとNuxtの使用を開始する

注： Vue.jsでChakra UIを使用するには、スタートガイドを参照してください。

デモプロジェクトでは、 Chakra-uiエクスプローラーを構築します。これは、ChakraUIコンポーネントを検索するためのアクセス可能な単一ページのWebアプリケーションです。

Netlifyでライブプロジェクトを見る→

Chakra-uiExplorer入門

すでにNPMがインストールされていると仮定して、次のコマンドを実行して新しいNuxtアプリケーションを作成します。

 $ npx create-nuxt-app chakra-ui-explorer

または、糸を好む場合は、次を実行します。

 $ yarn create nuxt-app chakra-ui-explorer

インストールプロンプトに従って、Nuxtアプリケーションの作成を完了します。

チャクラUIの設定

Chakra UIは、コンポーネントスタイルの処理にEmotionを使用します。したがって、Chakra UIの使用を開始するには、ピア依存関係としてEmotionと一緒にChakraUIをインストールする必要があります。このプロジェクトでは、Chakra UIとEmotionの両方に公式のNuxtモジュールを使用します。これにより、ChakraUIを使い始める際の摩擦が軽減されます。次のコマンドを実行して、それらをプロジェクトに追加しましょう。

 npm i @chakra-ui/nuxt @nuxtjs/emotion

注： @nuxtjs/emotionを使用すると、コンポーネントスタイルを生成して、サーバービルドに挿入できます。

両方のモジュールをインストールした後、モジュール配列オプションの下のnuxt.config.jsファイルにそれらを登録する必要があります。

 // nuxt.config.js modules: ['@chakra-ui/nuxt', '@nuxtjs/emotion'],

Chakra UIのセットアッププロセスを完了するには、 layouts/のデフォルトのレイアウトコンポーネントにタッチし、Chakra UIからCThemeProvider 、 CColorModeProvider 、およびCResetコンポーネントを追加する必要があります。

CResetコンポーネントを使用して、ChakraUIによって提供されるすべてのコンポーネントが正しく機能することを確認することをお勧めします。

CThemeProviderコンポーネントは、アプリケーションのすべての部分でテーマを利用できるようにしますが、 CColorModeProviderコンポーネントは、明るいまたは暗い2つの状態のいずれかになり得るアプリケーションのカラーモードの処理を担当します。最後に、 CResetコンポーネントは、すべてのブラウザーのデフォルトスタイルを削除します。

前述のコンポーネントをlayouts/default.vueに追加しましょう。テンプレートセクションに、これを追加しましょう。

 <!-- layouts/default.vue --> <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

次に、スクリプトセクションで、次のようにコンポーネントをインポートして登録します。

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

default.vueレイアウトコンポーネントは次のようになります。

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

注： <c-reset /> >コンポーネントと<nuxt />コンポーネントの両方をc-boxコンポーネントでラップしていることに注意してください。

アプリケーションテーマの設定

Chakra UIを使用すると、アプリケーションのテーマを設定できます。「テーマ」とは、アプリケーションのカラーパレット、タイプスケール、フォントスタック、ブレークポイント、境界半径値などの設定を意味します。色とコントラストはアクセシビリティの重要な要素であるため、認識しやすい色を使用することが重要です。

すぐに使用できるChakraUIには、色やフォントなどのアプリケーションのニーズのほとんどに対応できるデフォルトのテーマオブジェクトが付属しています。デフォルトのテーマはコントラストを念頭に置いて設定されているため、カラーモードを簡単に切り替えることができます（これについては後で詳しく説明します）。

ただし、Chakra UIを使用すると、デフォルトのテーマを拡張または完全に置き換えることができます。これは、Styled System ThemeSpecificationに基づくテーマオブジェクトを受け入れることで可能になります。

テーマオブジェクトの値は、アプリケーションで自動的に使用できるようになります。たとえば、 theme.colorsで指定された色は、コンポーネントのcolor 、 borderColor 、 backgroundColor 、 fill 、 stroke 、およびstyleによって参照できます。

アプリケーションをパーソナライズするには、Chakra UIによって提供されるデフォルトのテーマをオーバーライドするか、新しい値を設定します。これを行うために、Chakra UI Nuxtモジュールは、オブジェクトをextendThemeプロパティを受け取るchakraオブジェクトを公開します。 extendThemeに指定されたオブジェクトは、ChakraUIのデフォルトのテーマオブジェクトに再帰的にマージされます。アプリケーションで使用できるように、ブランドカラーパレットをチャクラに追加しましょう。

注： Chakra UIでは、50〜900のキーを使用して、テーマのカラーオブジェクトにカラーパレットを追加することをお勧めします。クーラーやpalxなどのWebツールを使用して、これらのパレットを生成できます。

デモホームページでは、ブランドカラーのライムを使用します。 Chakra UIにこの色を認識させるために、プロジェクトのディレクトリのルートにあるchakraというフォルダー（任意の名前を付けることができます）にcustomeThemeオブジェクトを作成します。このオブジェクトでは、ブランドのカラーパレットを定義します。

作成したフォルダーにtheme.jsというファイルを作成し、次のスニペットを追加します。

 // ./chakra/theme.js const customTheme = { colors: { brand: { 50: '#f6fcee', 100: '#e2f4c8', 200: '#cbec9e', 300: '#b2e26e', 400: '#94d736', 500: '#75c800', 600: '#68b300', 700: '#599900', 800: '#477900', 900: '#294700' } } } module.exports = customTheme

次に、カスタムテーマをChakraUIにマージしましょう。これはnuxt.config.jsで行います。まず、カスタムテーマオブジェクトが必要です。

 import customTheme from './chakra/theme'

次に、Chakra UI Nuxtモジュールによって提供されるchakraキーを指定し、 customThemeをextendThemeプロパティに渡す必要があります。

 chakra: { extendTheme: customTheme },

nuxt.config.jsファイルは次のようになります。

 // nuxt.config.js import customTheme from './chakra/theme' export default { mode: 'spa', /* * Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, /* * Customize the progress-bar color */ loading: { color: '#fff' }, /* * Global CSS */ css: [], /* * Plugins to load before mounting the App */ plugins: [], /* * Nuxt.js dev-modules */ buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module' ], /* * Nuxt.js modules */ modules: [ '@chakra-ui/nuxt', '@nuxtjs/emotion' ], chakra: { extendTheme: customTheme }, /* * Build configuration */ build: { /* * You can extend webpack config here */ extend (config, ctx) {} } }

npm run devを使用してアプリケーションを実行すると、ホームページは次のようになります。

Chakra UIのインストールに成功し、アプリケーションのカスタムテーマを追加したので、Chakra-uiエクスプローラーの構築を始めましょう。

メインナビゲーションの作成

ナビゲーションにブランド名を付けたいと思います。この場合は、 Chakra-uiエクスプローラー、2つのナビゲーションリンク（ドキュメントとレポ）、およびカラーモードを切り替えるためのボタンになります。 NavBarというcomponentsディレクトリの下に新しいコンポーネントを作成しましょう。ここで、ChakraUIを使用してアプリケーションのメインナビゲーションを作成します。

これをやろう。次のスニペットをNavBar.vueに追加します。

 <template> <c-box as="nav" h="60px" px="4" d="flex" align-items="center" shadow="sm" > <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color: 'brand.900' }" > Chakra-ui Explorer </c-link> <c-box as="ul" color="gray.500" d="flex" align-items="center" list-style-type="none" ml="auto" > <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://vue.chakra-ui.com" > Documentation </c-link> </c-box> <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://github.com/chakra-ui/chakra-ui-vue" > Repo </c-link> </c-box> <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box> </c-box> </c-box> </template> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', components: { CBox, CLink, CIconButton } } </script>

次に、このコンポーネントをデフォルトのレイアウトコンポーネントであるdefault.vueにインポートしてテンプレートに追加する必要があるため、全体としてデフォルトのレイアウトは次のようになります。

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar } } </script>

今すぐアプリケーションを実行すると、次のことがわかります。

ナビゲーションを指定しなくても、すでにアクセス可能であることがわかります。これは、キーボードのTabキーを押したときにのみ表示されます。 Chakra UIはフォーカス管理を処理し、ナビゲーションメニューの各リンクにフォーカスできます。

プロップ`as`

上記のNavBar.vueのスニペットからas aspropに気付くでしょう。これは、Chakra UIコンポーネントで使用できる機能であり、HTMLタグまたは別のコンポーネントを渡して、コンポーネントのすべてのスタイルと小道具とともにコンポーネントのベースタグとしてレンダリングできます。だから私たちがやったとき：

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box>

Chakra UIに<li>要素をレンダリングし、その中にボタンコンポーネントを配置するように依頼しています。ここでそのパターンを使用していることもわかります。

 <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color : 'brand.900' }"> ChakraMart </c-link>

上記の場合、Nuxtの<nuxt-link />コンポーネントをレンダリングするようにChakraUIに要求しています。

as propを使用すると、マークアップのコンテキストに正しい（または間違った）要素を使用することができます。これが意味するのは、それを活用して、セマンティックマークアップを使用してアプリケーションテンプレートを構築できることです。これにより、アプリケーションがスクリーンリーダーにとってより意味のあるものになります。したがって、アプリケーションのメインコンテンツに汎用のdiv要素を使用する代わりに、 as propを使用してmain要素をレンダリングし、これがアプリケーションのメインコンテンツであることをスクリーンリーダーに伝えることができます。

注： ChakraUIコンポーネントによって公開されるすべての小道具のドキュメントを確認してください。 また、 chakra/theme.jsのブランドカラーがどのように指定されているかを詳しく見てください。 上記のスニペットから、ChakraUIが提供する色のいずれかとして使用していることがわかります。 もう1つ注意すべき点は、NavBarのCIconButtonに使用したmoonアイコンです。 moonのアイコンは、ChakraUIがすぐに使用できるデフォルトのアイコンの1つです。

カラーモード

Chakra UIの機能の1つは、カラーモードのサポートです。また、チャクラUIエクスプローラーのナビゲーションでのmoonアイコンの使用からわかるように、ダークモードを統合する予定です。それで、最後にそれを残す代わりに、それを乗り越えて、今それを配線しましょう。これを行うには、Vueのprovide / inject、provides、 $chakraColorMode CColorModeProvider $toggleColorMode関数を使用するCColorModeProvider。 $chakraColorModeはアプリケーションの現在のカラーモードを返し、$ $toggleColorModeはカラーモードをlight色からdarkに（またはその逆に）切り替えます。これらの2つの関数を使用するには、それらをNavBar.vueコンポーネントに挿入する必要があります。以下の<script />セクションでこれを実行しましょう。

 <script> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', inject: ['$chakraColorMode', '$toggleColorMode'], components: { CBox, CLink, CIconButton }, } </script>

カラーモードを返す計算プロパティを作成してみましょう。

 ... computed: { colorMode () { return this.$chakraColorMode() } }

NavBar.vueに両方の関数を挿入したので、カラーモードの切り替えボタンを変更しましょう。アイコンから始めて、カラーモードに応じて異なるアイコンが表示されるようにします。この状態では、 CIconButtonコンポーネントは次のようになります。

 <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

現在、 aria-label属性を使用して、スクリーンリーダーにダークモードに切り替えるように指示しています。ライトモードとダークモードの両方をサポートするようにこれを変更してみましょう。

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

最後に、ボタンにクリックイベントハンドラーを追加して、 $toggleColorMode関数を使用してアプリケーションのカラーモードを切り替えます。そのようです：

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" />

カラーモードの設定が機能しているかどうかをテストするために、カラーモードの補間と、カラーモードをCIconButtonの横にテキストを追加します。そのようです：

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" /> Current mode: {{ colorMode }} </c-box>

現在、アプリは次のようになっています。

そのため、ChakraUIでカラーモードを設定する際に手間のかかる作業を行いました。これで、カラーモードに基づいてアプリケーションのスタイルを設定できます。 default.vueに移動し、 CColorModeProviderが提供するカラーモードスロットプロップを使用して、アプリケーションのスタイルを設定しましょう。まずdefault.vueでテンプレートを変更しましょう。

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider #default="{ colorMode }"> <c-box v-bind="mainStyles[colorMode]" w="100vw" h="100vh" as="section" > <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

CColorModeProviderによって提供されるCColorModeProviderプロパティからcolorModeを破棄し、それを動的キーとして、少し作成するmainStyleオブジェクトに渡します。アイデアは、 colorMode値に基づいて異なるスタイルのセットを使用することです。また、 CBoxコンポーネントの幅と高さを設定するために、それぞれwとhの省略形の小道具で幅と高さを使用しています。スクリプトセクションでこのmainStylesオブジェクトを定義しましょう。

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar }, data () { return { mainStyles: { dark: { bg: 'gray.900', color: 'whiteAlpha.900' }, light: { bg: 'whiteAlpha.900', color: 'gray.900' } } } } } </script>

Chakra-uiエクスプローラーがダークモードをサポートするようになりました！

これでナビゲーションバーができ、アプリケーションのダークモードサポートが正常に設定されました。アプリケーションの要点を見つけることができるpages/ディレクトリのindex.vueに注目しましょう。まず、次のようなCBoxコンポーネントを追加します。

 <c-box as="main" d="flex" direction="column" align-items="center" p="10" > </c-box>

次に、その中にCInputコンポーネントを追加します。 index.vueページコンポーネントは次のようになります。

 <template> <c-box as="main" d="flex" align-items="center" direction="column" w="auto" p="16" > <c-input placeholder="Search components..." size="lg" mb="5" is-full-width /> </c-box> </template> <script> import { CBox, CInput } from '@chakra-ui/vue' export default { components: { CBox, CInput } } </script>

アプリケーションは次のようになります。

上記のスクリーンキャストから、 CInput要素がダークモードになったことを自動的に認識し、明示的に設定していなくてもそれに応じて調整する方法を確認できます。また、ユーザーはTabキーを押して、そのCInputコンポーネントに焦点を合わせることができます。

コンポーネントのリストの追加

したがって、Chakra-uiエクスプローラーのアイデアは（前述のとおり）、Chakra UIで使用可能なすべてのコンポーネントをユーザーに表示して、それらのコンポーネントのリストと、ユーザーをドキュメントに誘導するリンクを取得できるようにすることです。コンポーネントの。これを行うには、プロジェクトのディレクトリのルートにdataという名前のフォルダーを作成してから、 index.jsという名前のファイルを作成します。 index.jsで、コンポーネントの名前を含むオブジェクトの配列をエクスポートします。ファイルは次のようになります。

 // ./data/index.js export const components = [ { name: 'Accordion' }, { name: 'Alert' }, { name: 'AlertDialog' }, { name: 'AspectRatioBox' }, { name: 'AspectRatioBox' }, { name: 'Avatar' }, { name: 'Badge' }, { name: 'Box' }, { name: 'Breadcrumb' }, { name: 'Button' }, { name: 'Checkbox' }, { name: 'CircularProgress' }, { name: 'CloseButton' }, { name: 'Code' }, { name: 'Collapse' }, { name: 'ControlBox' }, { name: 'Divider' }, { name: 'Drawer' }, { name: 'Editable' }, { name: 'Flex' }, { name: 'Grid' }, { name: 'Heading' }, { name: 'Icon' }, { name: 'IconButton' }, { name: 'IconButton' }, { name: 'Input' }, { name: 'Link' }, { name: 'List' }, { name: 'Menu' }, { name: 'Modal' }, { name: 'NumberInput' }, { name: 'Popover' }, { name: 'Progress' }, { name: 'PseudoBox' }, { name: 'Radio' }, { name: 'SimpleGrid' }, { name: 'Select' }, { name: 'Slider' }, { name: 'Spinner' }, { name: 'Stat' }, { name: 'Stack' }, { name: 'Switch' }, { name: 'Tabs' }, { name: 'Tag' }, { name: 'Text' }, { name: 'Textarea' }, { name: 'Toast' }, { name: 'Tooltip' } ]

実装を完了するために、上記の配列をpages/index.vueにインポートし、それを繰り返してすべてのコンポーネントを表示します。また、ユーザーが検索ボックスを使用してコンポーネントをフィルタリングできるようにします。完全な実装は次のとおりです。

 // pages/index.vue <template> <c-box as="main" d="flex" align-items="space-between" flex-direction="column" w="auto" p="16" > <c-input v-model="search" placeholder="Search components..." size="lg" mb="10" is-full-width /> <c-grid template-columns="repeat(4, 1fr)" gap="3" p="5"> <c-box v-for="(chakraComponent, index) of filteredComponents" :key="index" h="10"> {{ chakraComponent.name }} <c-badge> <c-link is-external :href="lowercase(`https://vue.chakra-ui.com/${chakraComponent.name}`)" > <c-icon name="info" size="18px" /> </c-link> </c-badge> </c-box> </c-grid> </c-box> </template> <script> import { CBox, CInput, CGrid, CLink, CBadge, CIcon } from '@chakra-ui/vue' import { components as chakraComponents } from '../data' export default { components: { CBox, CInput, CGrid, CBadge, CIcon, CLink }, data () { return { search: '' } }, computed: { filteredComponents () { return chakraComponents.filter((component) => { return this.lowercase(component.name).includes(this.lowercase(this.search)) }) } }, methods: { lowercase (value) { return value.toLowerCase() } } } </script>

そして今、私たちのアプリケーションは次のようになっています：

これで、コンポーネントのリストに対してダークモードが自動的に実行される方法と、アクセシビリティを支援するためにリンクにフォーカス管理が追加される方法（デフォルト）を確認できます。

チャクラUIをテストする

最後に、Lighthouseアクセシビリティテストを実行して、アプリのスコアを見てみましょう。このテストは、Axeユーザーの影響評価に基づいています。以下は、テストのスクリーンキャストです。次の手順に従って、自分でテストを実行することもできます。

上記のスクリーンキャストから、ChakraUIアプリの灯台アクセシビリティテストのスコアが85であることがわかります。

結論

この記事では、アクセシブルなインターフェースを構築する必要性に触れ、Chakra UIコンポーネントのエクスプローラー（Chakra-uiエクスプローラー）を構築することにより、ChakraUIを使用してアクセシブルなアプリケーションをゼロから構築する方法についても説明しました。

Netlifyでライブアプリケーションを見る→
リポジトリへのリンク→