Comment créer une application frontale accessible avec Chakra UI et Nuxt.js

Pour de nombreuses personnes, le web fait partie intégrante de leur vie quotidienne. Ils l'utilisent au travail, à la maison et même sur la route. L'accessibilité du Web signifie que les personnes handicapées peuvent utiliser le Web de la même manière. Il est donc crucial pour les développeurs et les organisations qui construisent sur le Web d'intégrer l'inclusivité et l'accessibilité dans leurs applications.

Afin de rendre le Web plus accessible, vous devrez mettre en œuvre quelques bonnes pratiques et normes dans vos applications, telles que le respect de ce qui suit :

• article 508 ;
• Loi sur les technologies d'assistance ;
• Loi sur les Américains handicapés (ADA) ;
• WCAG 2.0 (directives A et AA) ;
• Directives d'accessibilité mobile de la BBC ;
• Pratiques WAI-ARIA ( W eb A ccessibility I nitiative – A ccessible R ich I nternet A pplications).

Apprendre à mettre en œuvre ces normes peut sembler une tâche ardue lorsque vous tenez compte des délais de projet et des autres contraintes avec lesquelles vous devez travailler en tant que développeur. Dans cette optique, permettez-moi de vous présenter un système de conception d'interface utilisateur conçu pour vous aider à rendre vos applications Web accessibles.

Interface utilisateur des chakras

Chakra UI est un système de conception et un cadre d'interface utilisateur créés par Segun Adebayo. Il a été créé dans un souci de simplicité, de modularité, de composabilité et d'accessibilité. Chakra UI vous donne tous les éléments de base nécessaires pour créer des applications frontales accessibles.

Remarque : Bien que Chakra UI dépende de CSS-in-JS sous le capot, vous n'avez pas besoin de le connaître pour utiliser la bibliothèque.

Bien que le framework ait été créé à l'origine pour React, Jonathan Bakebwa a dirigé le portage vers Vue. Ainsi, les développeurs Vuejs/NuxtJS peuvent désormais utiliser Chakra UI pour créer des applications Web accessibles.

Caractéristiques de l'interface utilisateur Chakra

Chakra UI a été créé avec les principes suivants à l'esprit :

• Accessoires de style
  Chakra UI permet de styliser les composants ou de remplacer leurs styles à l'aide d'accessoires. Cela réduit le besoin de feuilles de style ou de styles en ligne. Chakra UI atteint ce niveau de flexibilité en utilisant Styled Systems sous le capot.
• Composition
  Les composants de Chakra UI ont été décomposés en parties plus petites avec un minimum d'accessoires pour réduire la complexité et les composer ensemble. Cela garantira que les styles et les fonctionnalités sont flexibles et extensibles. Par exemple, vous pouvez utiliser les composants CBox et CPseudoBox pour créer de nouveaux composants.
• Accessible
  Les composants de l'interface utilisateur Chakra suivent les spécifications des directives WAI-ARIA et ont les bons attributs aria-*. Vous pouvez également trouver le rapport d'accessibilité de chaque composant créé dans un fichier accessibility.md . Voir le rapport d'accessibilité pour le composant CAccordion .
• Thématique
  Chakra UI vous offre la possibilité de référencer facilement les valeurs de votre thème dans l'ensemble de votre application, sur n'importe quel composant.
• Prise en charge du mode sombre
  La plupart des composants de Chakra UI sont compatibles avec le mode sombre dès la sortie de la boîte.

Comment Chakra UI prend en charge l'accessibilité

L' accessibilité est l'un des principes fondamentaux derrière la création de Chakra UI. Dans cet esprit, tous les composants de Chakra UI sont prêts à l'emploi avec une prise en charge de l'accessibilité en fournissant :

• Navigation au clavier — utile pour les utilisateurs ayant des handicaps moteurs,
• Gestion des focus,
• les attributs aria-* nécessaires aux lecteurs d'écran,
• Piégeage et restauration du focus pour les dialogues modaux.
  

Premiers pas avec Chakra UI et Nuxt

Remarque : Pour utiliser Chakra UI avec Vue.js, consultez le guide de démarrage.

Pour notre projet de démonstration, nous allons créer Chakra-ui explorer - une application Web accessible d'une seule page pour rechercher des composants d'interface utilisateur Chakra.

• Voir le projet en direct sur Netlify →

Premiers pas avec Chakra-ui Explorer

En supposant que vous avez déjà installé NPM, créez une nouvelle application Nuxt en exécutant :

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

Ou si vous préférez en laine, lancez :

 $ yarn create nuxt-app chakra-ui-explorer

Suivez l'invite d'installation pour terminer la création de votre application Nuxt.

Configuration de l'interface utilisateur Chakra

Chakra UI utilise Emotion pour gérer les styles de composants. Donc, pour commencer avec Chakra UI, vous devrez installer Chakra UI aux côtés d'Emotion en tant que dépendance de pairs. Pour ce projet, nous utiliserons les modules officiels Nuxt pour Chakra UI et Emotion, ce qui réduira les frictions lors du démarrage avec Chakra UI. Ajoutons-les à notre projet en exécutant la commande suivante :

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

Note : @nuxtjs/emotion permet de générer et d'injecter vos styles de composants dans le build du serveur.

Après avoir installé les deux modules, vous devrez les enregistrer dans le fichier nuxt.config.js sous l'option modules array :

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

Pour terminer notre processus de configuration de Chakra UI, nous devons toucher notre composant de mise en page par défaut dans layouts/ et ajouter CThemeProvider , CColorModeProvider et CReset de Chakra UI.

Il est recommandé d'utiliser le composant CReset pour s'assurer que tous les composants fournis par Chakra UI fonctionnent correctement.

Le composant CThemeProvider rendra votre thème disponible pour chaque partie de votre application, tandis que le composant CColorModeProvider est responsable de la gestion du mode couleur de notre application qui peut être dans l'un des deux états suivants : clair ou sombre. Enfin, le composant CReset supprimera tous les styles par défaut du navigateur.

Ajoutons les composants susmentionnés dans layouts/default.vue . Dans notre section de modèles, ajoutons ceci :

 <!-- 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>

Ensuite, dans notre section de script, nous importerons et enregistrerons les composants comme suit :

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

Votre composant de mise en page default.vue devrait ressembler à ceci :

 <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>

Remarque : Notez que j'enveloppe les composants <c-reset /> et <nuxt /> dans un composant c-box .

Définir le thème de votre application

Chakra UI vous permet de définir un thème pour votre application. Par "thème", j'entends le réglage de la palette de couleurs de votre application, l'échelle de type, les piles de polices, les points d'arrêt, les valeurs de rayon de bordure, etc. Étant donné que les couleurs et le contraste sont des éléments essentiels de l'accessibilité, il est important d'utiliser des couleurs facilement perceptibles.

L'interface utilisateur Chakra prête à l'emploi est livrée avec un objet de thème par défaut qui répond à la plupart des besoins de votre application en termes de couleurs, de polices, etc. Le thème par défaut est configuré avec le contraste à l'esprit, ce qui permet de basculer facilement entre les modes de couleur (plus à ce sujet plus tard).

Chakra UI, cependant, vous permet d'étendre ou de remplacer complètement le thème par défaut. Ceci est possible en acceptant un objet de thème basé sur la spécification de thème du système de style.

Les valeurs de l'objet de thème sont automatiquement disponibles pour une utilisation dans votre application. Par exemple, les couleurs spécifiées dans theme.colors peuvent être référencées par les accessoires color , borderColor , backgroundColor , fill , stroke et style de vos composants.

Pour personnaliser votre application, vous pouvez remplacer le thème par défaut fourni par Chakra UI ou y définir de nouvelles valeurs. Pour ce faire, le module Chakra UI Nuxt expose un objet chakra qui prendra une propriété extendTheme qui prend un objet. L'objet donné à extendTheme sera fusionné de manière récursive avec l'objet de thème par défaut de Chakra UI. Ajoutons notre palette de couleurs de marque à Chakra afin que nous puissions l'utiliser dans notre application.

Remarque : Chakra UI recommande d'ajouter une palette de couleurs dans l'objet couleurs de votre thème en utilisant des touches de 50 à 900. Vous pouvez utiliser des outils Web comme coolors et palx pour générer ces palettes.

Pour notre page d'accueil de démonstration, j'utiliserai une couleur de marque de citron vert. Pour rendre Chakra UI consciente de cette couleur, je vais créer un objet customeTheme dans un dossier appelé chakra (vous pouvez l'appeler comme vous voulez) à la racine du répertoire de mon projet. Dans cet objet, je définirai la palette de couleurs de notre marque.

Créez un fichier appelé theme.js dans le dossier que vous avez créé, puis ajoutez l'extrait suivant :

 // ./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

Fusionnons maintenant notre thème personnalisé avec Chakra UI. Nous le faisons dans nuxt.config.js . Tout d'abord, nous avons besoin de notre objet de thème personnalisé :

 import customTheme from './chakra/theme'

Ensuite, nous devons spécifier la clé de chakra fournie par le module Chakra UI Nuxt et passer customTheme à la propriété extendTheme :

 chakra: { extendTheme: customTheme },

Votre fichier nuxt.config.js devrait ressembler à ceci :

 // 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) {} } }

Lorsque vous exécutez votre application avec npm run dev , votre page d'accueil devrait ressembler à ceci :

Maintenant que nous avons installé avec succès Chakra UI et ajouté le thème personnalisé de notre application, commençons à créer l'explorateur Chakra-ui.

Création de notre navigation principale

Nous voulons que notre navigation ait notre nom de marque, dans ce cas, ce sera Chakra-ui explorer , 2 liens de navigation : Documentation et Repo , et un bouton qui se charge de basculer notre mode couleur. Créons un nouveau composant sous le répertoire des components appelé NavBar dans lequel nous allons créer la navigation principale de notre application à l'aide de Chakra UI.

Faisons cela. Ajoutez l'extrait de code suivant à 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>

Ensuite, nous devons importer ce composant dans notre composant de mise en page par défaut — default.vue et l'ajouter à notre modèle afin que globalement notre mise en page par défaut ressemble à ceci :

 <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>

Lorsque vous exécutez votre application maintenant, vous verrez ceci :

Vous pouvez voir que la navigation est déjà accessible sans même le préciser. Cela ne peut être vu que lorsque vous appuyez sur la touche Tab de votre clavier ; Chakra UI gère la gestion de la mise au point tandis que vous pouvez vous concentrer sur chaque lien du menu de navigation.

Le as accessoire

Dans l'extrait de notre NavBar.vue ci-dessus, vous remarquerez le as prop. Il s'agit d'une fonctionnalité disponible pour les composants de l'interface utilisateur Chakra qui vous permet de transmettre une balise HTML ou un autre composant à rendre comme balise de base du composant avec tous ses styles et accessoires. Alors quand on a fait :

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

nous demandons à Chakra UI de restituer un élément <li> et de placer un composant de bouton à l'intérieur. Vous pouvez également nous voir utiliser ce modèle ici :

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

Dans le cas ci-dessus, nous demandons à Chakra UI de restituer le composant <nuxt-link /> de Nuxt.

Le as prop vous donne le pouvoir d'utiliser le bon (ou le mauvais) élément pour le contexte de votre balisage. Cela signifie que vous pouvez en tirer parti pour créer votre modèle d'application à l'aide de balises sémantiques qui rendront votre application plus significative pour les lecteurs d'écran. Ainsi, au lieu d'utiliser un élément div générique pour le contenu principal de votre application, avec la prop as vous pouvez rendre un élément main indiquant aux lecteurs d'écran qu'il s'agit du contenu principal de votre application.

Remarque : consultez la documentation pour tous les accessoires exposés par les composants de l'interface utilisateur Chakra. Examinez également de plus près comment la couleur de la marque dans chakra/theme.js a été spécifiée. Vous pouvez voir dans l'extrait ci-dessus que nous l'utilisons comme l'une des couleurs fournies par Chakra UI. Une autre chose à savoir est l'icône de moon que nous avons utilisée pour le CIconButton sur notre NavBar. L'icône de la moon est l'une des icônes par défaut fournies par Chakra UI.

Mode de couleur

L'une des fonctionnalités de Chakra UI est la prise en charge du mode couleur. Et vous pouvez voir à partir de l'utilisation de l'icône de la moon dans la navigation de l'explorateur Chakra-ui, nous prévoyons d'intégrer le mode sombre. Donc, au lieu de le laisser pour la fin, finissons-en et connectons-le tout de suite. Pour ce faire, CColorModeProvider utilisant les fonctions provide/inject de Vue, fournit, $chakraColorMode et $toggleColorMode . $chakraColorMode renvoie le mode de couleur actuel de votre application tandis que $toggleColorMode bascule le mode de couleur de light à dark et vice versa. Pour utiliser ces deux fonctions, nous devrons les injecter dans le composant NavBar.vue . Faisons cela ci-dessous dans la section <script /> :

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

Créons une propriété calculée pour renvoyer le mode couleur :

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

Maintenant que nous avons injecté les deux fonctions dans NavBar.vue , modifions le bouton basculer le mode couleur. Nous allons commencer par l'icône pour qu'elle affiche une icône différente selon le mode de couleur. Notre composant CIconButton ressemble maintenant à ceci à cet état :

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

Actuellement, nous utilisons un attribut aria-label pour indiquer aux lecteurs d'écran de passer en mode sombre. Modifions ceci pour prendre en charge les modes clair et sombre :

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

Enfin, nous ajouterons un gestionnaire d'événements click sur le bouton pour basculer le mode couleur de notre application à l'aide de la fonction $toggleColorMode . Ainsi:

 <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" />

Pour tester si notre configuration de mode couleur fonctionne, j'ajouterai une interpolation du mode couleur et un texte à côté du CIconButton basculant notre mode couleur. Ainsi:

 <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>

Voici à quoi ressemble actuellement notre application :

Nous avons donc fait le gros du travail en configurant le mode couleur dans Chakra UI. Nous pouvons donc maintenant styliser notre application en fonction du mode couleur. Allons à default.vue et utilisons le prop de slot de mode couleur fourni par CColorModeProvider pour styliser notre application. Modifions d'abord notre modèle dans 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>

Nous colorMode à partir de la propriété slot props fournie par CColorModeProvider , puis nous la transmettons en tant que clé dynamique à un objet mainStyle que nous allons créer dans un instant. L'idée est d'utiliser un ensemble différent de styles en fonction de la valeur colorMode . J'utilise également la largeur et la hauteur avec les accessoires raccourcis - w et h respectivement pour définir la largeur et la hauteur de notre composant CBox . Définissons cet objet mainStyles dans notre section script :

 <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>

L'explorateur Chakra-ui prend désormais en charge le mode sombre !

Maintenant que nous avons notre barre de navigation et que nous avons réussi à configurer la prise en charge du mode sombre pour notre application, concentrons-nous sur index.vue dans notre répertoire pages/ où se trouve la viande de notre application. Nous allons commencer par ajouter un composant CBox comme ceci :

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

Ensuite, nous ajouterons le composant CInput à l'intérieur. Notre composant de page index.vue ressemblera alors à ceci :

 <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>

Voici à quoi ressemble notre application maintenant :

Vous pouvez voir dans le screencast ci-dessus comment l'élément CInput sait automatiquement quand il est en mode sombre et s'ajuste en conséquence même si nous ne l'avons pas défini explicitement. En outre, l'utilisateur peut appuyer sur la touche de tabulation pour se concentrer sur ce composant CInput .

Ajout de la liste des composants

Donc, l'idée de l'explorateur Chakra-ui (comme indiqué précédemment) est de montrer à l'utilisateur tous les composants disponibles dans Chakra UI afin que nous puissions avoir une liste de ces composants ainsi que les liens qui mèneront l'utilisateur à la documentation du composant. Pour ce faire, je vais créer un dossier nommé data à la racine du répertoire de notre projet puis créer un fichier nommé index.js . Dans index.js , je vais exporter un tableau d'objets qui contiendra les noms des composants. Voici à quoi devrait ressembler le fichier :

 // ./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' } ]

Pour que notre implémentation soit complète, je vais importer le tableau ci-dessus dans pages/index.vue et le parcourir pour afficher tous les composants. De plus, nous donnerons à l'utilisateur la possibilité de filtrer les composants à l'aide du champ de recherche. Voici la réalisation complète :

 // 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>

Et maintenant notre application ressemble à ceci :

Vous pouvez maintenant voir comment le mode sombre est automatique pour la liste des composants ainsi que comment la gestion du focus est ajoutée pour les liens (par défaut) pour faciliter l'accessibilité.

Mettre l'interface utilisateur Chakra à l'épreuve

Enfin, voyons comment notre application se classe en exécutant le test d'accessibilité Lighthouse dessus. Attention, ce test est basé sur l'évaluation de l'impact utilisateur Axe. Ci-dessous, un screencast du test. Vous pouvez également exécuter le test vous-même en suivant ces étapes.

À partir de la capture d'écran ci-dessus, vous pouvez voir que notre application Chakra UI a un score de 85 au test d'accessibilité du phare.

Conclusion

Dans cet article, nous avons évoqué la nécessité de créer des interfaces accessibles et nous avons également vu comment utiliser Chakra UI pour créer des applications accessibles à partir de zéro en créant un explorateur (Chakra-ui explorer) pour les composants Chakra UI.

• Voir l'application en direct sur Netlify →
• Lien vers le dépôt →