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

Pour de nombreuses personnes, le Web est une partie essentielle 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 s'appuient sur le Web de créer l'inclusivité et l'accessibilité dans leurs applications.

Afin de rendre le Web plus accessible, il y a quelques bonnes pratiques et normes que vous devrez mettre en œuvre dans vos applications. , comme adhérer à ce qui suit:

Apprendre à implémenter ces normes peut sembler une tâche ardue lorsque vous tenez compte des délais de projet et d'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.

Chakra UI

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

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

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

Caractéristiques de Chakra UI

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

• Style props
  Chakra UI rend possible pour styliser des composants ou remplacer leurs styles à l'aide des 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é divisés en parties plus petites avec des accessoires minimaux pour maintenir la complexité faible 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 Chakra UI respectent les spécifications WAI-ARIA guidelines et ont les bons attributs aria- *. Vous pouvez également trouver le rapport d'accessibilité de chaque composant créé dans un fichier appelé accessibility.md . Voir le rapport d'accessibilité pour le composant CAccordion .
• Themeable
  Chakra UI vous permet de référencer facilement les valeurs de votre thème dans toute votre application, sur n'importe quel composant.
• Prise en charge du mode sombre
  La plupart des composants de Chakra UI sont immédiatement compatibles avec le mode sombre.

Comment Chakra UI prend en charge l'accessibilité

L'un des principes fondamentaux derrière la création de Chakra UI est accessibilité . Dans cet esprit, tous les composants de l'interface utilisateur de Chakra sont livrés avec la prise en charge de l'accessibilité en fournissant:

• Navigation clavier – utile pour les utilisateurs ayant des troubles moteurs,
• Gestion de la mise au point,
• aria- * attributs qui sont nécessaires aux lecteurs d'écran,
• Mise au point et restauration des dialogues modaux.

Prise en main de Chakra UI et de Nuxt

Remarque : Pour utiliser Chakra UI avec Vue.js voir le Guide de démarrage .

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

Premiers pas avec Chakra-ui Explorer

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

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

Ou si vous préférez dans yarn, lancez:

 $ yarn create nuxt-app chakra-ui-explorer

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

Configuration de Chakra UI

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

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

Remarque : @ nuxtjs / emotion permet de générer et d'injecter les styles de vos composants dans la version du serveur.

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

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

Pour terminer notre processus de configuration de l'interface utilisateur de Chakra, nous devons toucher notre composant de disposition par défaut dans présentations / et ajouter CThemeProvider CColorModeProvider et Composants CReset de Chakra UI.

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

Le composant CThemeProvider mettra votre thème à disposition de 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: clair ou foncé. 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:

Ensuite, dans notre section de script, nous allons importer et enregistrer les composants comme ceci:

Votre composant de disposition default.vue doit ressembler à ceci:

Remarque : Remarque J'encapsule les composants et dans un composant c-box .

Définition du thème d'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 l'échelle de texte, des piles de polices, des points d'arrêt, des valeurs de rayon de bordure, etc. de votre application. É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 thème par défaut qui répond à la plupart des besoins de votre application dans termes de couleurs, de polices, etc. Le thème par défaut est configuré en gardant à l'esprit le contraste, ce qui permet de basculer facilement entre les modes de couleur (plus de détails plus loin).

L'interface utilisateur de Chakra, 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 style de système système .

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 la couleur borderColor backgroundColor fill stroke et style accessoires dans 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 acceptera une propriété extendTheme qui prend un objet. L'objet donné à extendTheme sera fusionné récursivement 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.

Note : Chakra UI recommande d'ajouter une palette de couleurs dans l'objet de 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 que Chakra UI prenne conscience 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 = {
  couleurs: {
    marque: {
      50: '# f6fcee',
      100: «# e2f4c8»,
      200: '# cbec9e',
      300: '# b2e26e',
      400: «# 94d736»,
      500: «# 75c800»,
      600: «# 68b300»,
      700: «# 599900»,
      800: '# 477900',
      900: «# 294700»
    }
  }
}

module.exports = thème personnalisé

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

 import customTheme de './chakra/theme'

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

 chakra : {
  extendTheme: customTheme
},

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

 // nuxt.config.js
importer customTheme depuis './chakra/theme'

exporter par défaut {
  mode: «spa»,
  / *
   * En-têtes de la page
   * /
  tête: {
    titre: process.env.npm_package_name || '',
    méta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    lien: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  / *
   * Personnalisez la couleur de la barre de progression
   * /
  chargement: {color: '#fff'},
  / *
   * CSS global
   * /
  css: [],
  / *
   * Plugins à charger avant de monter l'application
   * /
  plugins: [],
  / *
   * Modules de développement Nuxt.js
   * /
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  / *
   * Modules Nuxt.js
   * /
  modules: [
    '@chakra-ui/nuxt',
    '@nuxtjs/emotion'
  ],

  chakra: {
    extendTheme: thème personnalisé
  },
  / *
   * Configurer la configuration
   * /
  construire: {
    / *
     * Vous pouvez étendre la configuration de webpack ici
     * /
    étendre (config, ctx) {}
  }
}

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

Maintenant que nous avons réussi à installer Chakra UI et ajouté le thème personnalisé de notre application, commençons à construire Chakra-ui explorer.

Création de notre navigation principale

Nous voulons que notre navigation porte notre nom de marque, dans ce cas , ce sera Chakra-ui explorer 2 liens de navigation: Documentation et Repo et un bouton qui est chargé de basculer notre mode couleur. Créons un nouveau composant sous le répertoire 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 suivant à NavBar.vue :

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:

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

Vous pouvez voir que la navigation est déjà accessible sans même la spécifier. Cela ne peut être vu que lorsque vous appuyez sur la touche Tab de votre clavier; L'interface utilisateur du Chakra gère la gestion du focus tandis que vous pouvez vous concentrer sur chaque lien du menu de navigation.

Le comme Prop

De notre extrait de NavBar.vue ci-dessus, vous verrez notez le comme prop. Il s'agit d'une fonctionnalité disponible pour les composants de l'interface utilisateur de Chakra qui vous permet de passer une balise HTML ou un autre composant à restituer comme balise de base du composant avec tous ses styles et accessoires. Donc, quand nous l'avons fait:

nous demandons à Chakra UI de rendre un élément

et de placer un composant bouton à l'intérieur. Vous pouvez également nous voir utiliser ce modèle ici:

 
       ChakraMart
 

Dans le cas ci-dessus, nous demandons à Chakra UI de restituer le composant de Nuxt.

Le comme accessoire 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 générique div pour le contenu principal de votre application, avec le comme accessoire vous pouvez rendre un élément principal indiquant aux lecteurs d'écran que c'est le contenu principal de votre application.

Note : Consultez la documentation de tous les accessoires exposés par les composants de Chakra UI. Regardez é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 la lune que nous avons utilisée pour le CIconButton sur notre NavBar. L'icône lune est l'une des icônes par défaut que Chakra UI fournit prêtes à l'emploi.

Mode couleur

L'une des fonctionnalités de Chakra UI est la prise en charge du mode couleur. Et vous pouvez voir, grâce à l’utilisation de l’icône lune dans la navigation de Chakra-ui explorer, que nous prévoyons d’intégrer le mode sombre. Donc, au lieu de le laisser pour la fin, finissons-en et câblons-le maintenant. Pour ce faire, CColorModeProvider utilisant Vue provide / inject fournit les fonctions $ chakraColorMode et $ toggleColorMode . $ chakraColorMode renvoie le mode couleur actuel de votre application tandis que $ toggleColorMode fait basculer le mode couleur de clair à foncé et vice versa. Pour utiliser ces deux fonctions, nous devons les injecter dans le composant NavBar.vue . Faisons-le ci-dessous dans la section

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

 ...
 calculé: {
    Mode de couleur () {
      renvoie ceci. $ chakraColorMode ()
    }
  }

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

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

Enfin, nous ajouterons un gestionnaire d'événements de clic sur le bouton pour basculer le mode couleur de notre application en utilisant la fonction $ toggleColorMode . Comme ceci:

Pour tester si notre configuration du mode couleur fonctionne, j'ajouterai une interpolation du mode couleur et un texte à côté du CIconButton pour basculer notre mode couleur. Comme ceci:

  
   Mode actuel: {{colorMode}}

Voici à quoi ressemble actuellement notre application:

Nous avons donc fait le gros du travail en configurant le mode couleur dans Chakra UI. Nous pouvons maintenant styliser notre application en fonction du mode couleur. Passons à default.vue et utilisons le support de slot en mode couleur fourni par CColorModeProvider pour styliser notre application. Modifions d'abord notre modèle dans default.vue .

Nous sommes en train de déstructurer colorMode à partir de la propriété des accessoires de slot fournie par CColorModeProvider puis de la passer comme clé dynamique à un objet mainStyle que nous va créer dans un peu. L'idée est d'utiliser un ensemble de styles différent basé sur la valeur colorMode . J'utilise également la largeur et la hauteur avec les étais sténographiques - w et h respectivement pour régler la largeur et la hauteur de notre composant CBox . Définissons cet objet mainStyles dans notre section de script:

Chakra-ui explorer prend désormais en charge le mode sombre!

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

Ensuite, nous y ajouterons le composant CInput . Notre composant de page index.vue ressemblera alors à ceci:

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 n'avons pas défini explicitement cette. De plus, 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 appelé data à la racine du répertoire de notre projet puis créer un fichier appelé index.js . Dans index.js j'exporterai un tableau d'objets qui contiendra les noms des composants. Voici à quoi devrait ressembler le fichier:

 // ./data/index.js

exporter les composants const = [
  {
    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 l'itérer pour afficher tous les composants. De plus, nous donnerons à l'utilisateur la possibilité de filtrer les composants à l'aide du champ de recherche. Voici l'implémentation complète:

 // pages / index.vue
  

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

Mise à l'épreuve de l'interface utilisateur de Chakra

Enfin, voyons comment notre application obtient des résultats en exécutant le test d'accessibilité du phare . Attention, ce test est basé sur l'évaluation de l'impact de l'utilisateur Axe . Vous trouverez ci-dessous un screencast du test. Vous pouvez également exécuter le test vous-même en en suivant ces étapes .

Du screencast ci-dessus, vous pouvez voir que notre application d'interface utilisateur Chakra a un score de 85 au test d'accessibilité du phare.

Conclusion

Dans cet article, nous avons abordé 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 de l'interface utilisateur de Chakra.

(ra, yk, il)