So erstellen Sie eine barrierefreie Front-End-Anwendung mit Chakra UI und Nuxt.js

Für viele Menschen ist das Internet ein wesentlicher Bestandteil ihres täglichen Lebens. Sie verwenden es bei der Arbeit, zu Hause und sogar unterwegs. Barrierefreiheit im Internet bedeutet, dass Menschen mit Behinderungen das Internet gleichermaßen nutzen können. Daher ist es für Entwickler und Organisationen, die auf dem Web aufbauen, von entscheidender Bedeutung, Inklusivität und Zugänglichkeit in ihre Anwendungen zu integrieren.

Um das Web zugänglicher zu machen, müssen Sie einige Best Practices und Standards in Ihren Anwendungen implementieren, z. B. die Einhaltung der folgenden:

• Abschnitt 508;
• Hilfsmittelgesetz;
• Gesetz über Amerikaner mit Behinderungen (ADA);
• WCAG 2.0 (A- und AA-Richtlinien);
• Richtlinien der BBC für mobile Zugänglichkeit;
• WAI-ARIA ( W eb Accessibility Initiative – Accessible R ich I nternet A pplications ) Praktiken.

Das Erlernen der Implementierung dieser Standards kann wie eine entmutigende Aufgabe erscheinen, wenn Sie Projektfristen und andere Einschränkungen berücksichtigen, mit denen Sie als Entwickler arbeiten müssen. Lassen Sie mich Ihnen vor diesem Hintergrund ein UI-Designsystem vorstellen, das entwickelt wurde, um Ihnen dabei zu helfen, Ihre Webanwendungen barrierefrei zu gestalten.

Chakra-UI

Chakra UI ist ein von Segun Adebayo erstelltes Designsystem und UI-Framework. Es wurde mit Blick auf Einfachheit, Modularität, Zusammensetzbarkeit und Zugänglichkeit erstellt. Die Chakra-Benutzeroberfläche bietet Ihnen alle Bausteine, die Sie zum Erstellen barrierefreier Front-End-Anwendungen benötigen.

Hinweis : Während die Chakra-Benutzeroberfläche von CSS-in-JS im Hintergrund abhängt, müssen Sie es nicht kennen, um die Bibliothek zu verwenden.

Obwohl das Framework ursprünglich für React erstellt wurde, leitete Jonathan Bakebwa die Portierung auf Vue. Daher können Vuejs/NuxtJS-Entwickler jetzt Chakra UI verwenden, um barrierefreie Webanwendungen zu erstellen.

Funktionen der Chakra-Benutzeroberfläche

Chakra UI wurde unter Berücksichtigung der folgenden Prinzipien erstellt:

• Stilrequisiten
  Die Chakra-Benutzeroberfläche ermöglicht es, Komponenten zu stylen oder ihre Stile mithilfe von Requisiten zu überschreiben. Dies reduziert den Bedarf an Stylesheets oder Inline-Stilen. Chakra UI erreicht dieses Maß an Flexibilität durch die Verwendung von Styled Systems unter der Haube.
• Komposition
  Komponenten in der Chakra-Benutzeroberfläche wurden mit minimalen Requisiten in kleinere Teile zerlegt, um die Komplexität gering zu halten und sie zusammenzusetzen. Dadurch wird sichergestellt, dass die Stile und Funktionen flexibel und erweiterbar sind. Beispielsweise können Sie die Komponenten CBox und CPseudoBox , um neue Komponenten zu erstellen.
• Zugänglich
  Chakra-UI-Komponenten folgen den Spezifikationen der WAI-ARIA-Richtlinien und haben die richtigen aria-*-Attribute. Sie finden auch den Bericht zur Barrierefreiheit jeder erstellten Komponente in einer Datei accessibility.md . Sehen Sie sich den Barrierefreiheitsbericht für die CAccordion Komponente an.
• Themenfähig
  Die Chakra-Benutzeroberfläche bietet Ihnen die Möglichkeit, Werte aus Ihrem Thema in Ihrer gesamten Anwendung für jede Komponente einfach zu referenzieren.
• Unterstützung für den dunklen Modus
  Die meisten Komponenten in der Chakra-Benutzeroberfläche sind sofort nach dem Auspacken mit dem Dunkelmodus kompatibel.

Wie Chakra UI Barrierefreiheit unterstützt

Eines der Kernprinzipien hinter der Erstellung der Chakra-Benutzeroberfläche ist die Zugänglichkeit . In Anbetracht dessen sind alle Komponenten in der Chakra-Benutzeroberfläche standardmäßig mit Unterstützung für Barrierefreiheit ausgestattet, indem sie Folgendes bereitstellen:

• Tastaturnavigation – nützlich für Benutzer mit motorischen Behinderungen,
• Fokusmanagement,
• aria-* Attribute, die von Screenreadern benötigt werden,
• Fokusüberfüllung und -wiederherstellung für modale Dialoge.
  

Erste Schritte mit Chakra UI und Nuxt

Hinweis : Informationen zur Verwendung der Chakra-Benutzeroberfläche mit Vue.js finden Sie im Handbuch „Erste Schritte“.

Für unser Demoprojekt werden wir den Chakra-ui-Explorer erstellen – eine zugängliche einseitige Webanwendung zum Durchsuchen von Chakra-UI-Komponenten.

• Siehe Live-Projekt auf Netlify →

Erste Schritte mit Chakra-ui Explorer

Angenommen, Sie haben NPM bereits installiert, erstellen Sie eine neue Nuxt-Anwendung, indem Sie Folgendes ausführen:

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

Oder wenn Sie es in Garn bevorzugen, dann führen Sie Folgendes aus:

 $ yarn create nuxt-app chakra-ui-explorer

Folgen Sie der Installationsaufforderung, um die Erstellung Ihrer Nuxt-Anwendung abzuschließen.

Einrichten der Chakra-Benutzeroberfläche

Die Chakra-Benutzeroberfläche verwendet Emotion zur Handhabung von Komponentenstilen. Um also mit Chakra UI zu beginnen, müssen Sie Chakra UI zusammen mit Emotion als Peer-Abhängigkeit installieren. Für dieses Projekt werden wir die offiziellen Nuxt-Module sowohl für die Chakra-Benutzeroberfläche als auch für Emotion verwenden, was die Reibung beim Einstieg in die Chakra-Benutzeroberfläche verringern wird. Fügen wir sie unserem Projekt hinzu, indem wir den folgenden Befehl ausführen:

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

Hinweis : @nuxtjs/emotion können Ihre Komponentenstile generiert und in den Server-Build eingefügt werden.

Nachdem Sie beide Module installiert haben, müssen Sie sie in der Datei nuxt.config.js unter der Option module array registrieren:

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

Um unseren Setup-Prozess von Chakra UI abzuschließen, müssen wir unsere Standard-Layout-Komponente in layouts/ berühren und CThemeProvider , CColorModeProvider und CReset -Komponenten von Chakra UI hinzufügen.

Es wird empfohlen, dass Sie die CReset Komponente verwenden, um sicherzustellen, dass alle von Chakra UI bereitgestellten Komponenten ordnungsgemäß funktionieren.

Die CThemeProvider Komponente macht Ihr Design für jeden Teil Ihrer Anwendung verfügbar, während die CColorModeProvider Komponente für die Handhabung des Farbmodus unserer Anwendung verantwortlich ist, der einen von zwei Zuständen annehmen kann: hell oder dunkel. Schließlich entfernt die CReset Komponente alle Browser-Standardstile.

Lassen Sie uns die oben genannten Komponenten in layouts/default.vue hinzufügen. Fügen wir in unserem Vorlagenabschnitt Folgendes hinzu:

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

Dann werden wir in unserem Skriptabschnitt die Komponenten wie folgt importieren und registrieren:

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

Ihre default.vue sollte wie folgt aussehen:

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

Hinweis : Beachten Sie, dass ich sowohl die Komponenten <c-reset /> als <nuxt /> in eine c-box Komponente einschließe.

Einstellen Ihres Anwendungsthemas

Mit der Chakra-Benutzeroberfläche können Sie ein Thema für Ihre Anwendung festlegen. Mit „Thema“ meine ich die Einstellung der Farbpalette Ihrer Anwendung, Schriftskalierung, Schriftstapel, Haltepunkte, Randradiuswerte und so weiter. Da Farben und Kontrast wichtige Komponenten der Zugänglichkeit sind, ist es wichtig, Farben zu verwenden, die leicht wahrnehmbar sind.

Out of the box Chakra UI wird mit einem Standarddesignobjekt geliefert, das die meisten Ihrer Anwendungsanforderungen in Bezug auf Farben, Schriftarten usw. erfüllt. Das Standardthema ist mit Blick auf den Kontrast eingerichtet, was ein einfaches Umschalten der Farbmodi ermöglicht (dazu später mehr).

Mit der Chakra-Benutzeroberfläche können Sie jedoch das Standardthema erweitern oder vollständig ersetzen. Dies ist möglich, indem ein Themenobjekt akzeptiert wird, das auf der Styled System Theme-Spezifikation basiert.

Die Werte im Designobjekt stehen automatisch zur Verwendung in Ihrer Anwendung zur Verfügung. Beispielsweise können die in theme.colors angegebenen Farben von den Requisiten color , borderColor , backgroundColor , fill , stroke und style in Ihren Komponenten referenziert werden.

Um Ihre Anwendung zu personalisieren, können Sie das von Chakra UI bereitgestellte Standardthema überschreiben oder neue Werte darin festlegen. Dazu stellt das Chakra-UI-Nuxt-Modul ein chakra -Objekt bereit, das eine extendTheme -Eigenschaft aufnimmt, die ein Objekt aufnimmt. Das an extendTheme übergebene Objekt wird rekursiv mit dem Chakra-UI-Standarddesignobjekt zusammengeführt. Lassen Sie uns Chakra unsere Markenfarbpalette hinzufügen, damit wir sie in unserer Anwendung verwenden können.

Hinweis : Chakra UI empfiehlt das Hinzufügen einer Farbpalette zum Farbobjekt Ihres Designs mit Schlüsseln von 50 bis 900. Sie können Web-Tools wie Coolors und Palx verwenden, um diese Paletten zu generieren.

Für unsere Demo-Homepage werde ich eine Markenfarbe Limette verwenden. Um die Chakra-Benutzeroberfläche auf diese Farbe aufmerksam zu machen, erstelle ich ein customeTheme Objekt in einem Ordner namens chakra (Sie können es beliebig nennen) im Stammverzeichnis meines Projektverzeichnisses. In diesem Objekt werde ich unsere Markenfarbpalette definieren.

Erstellen Sie eine Datei namens theme.js in dem von Ihnen erstellten Ordner und fügen Sie dann das folgende Snippet hinzu:

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

Lassen Sie uns nun unser benutzerdefiniertes Design mit der Chakra-Benutzeroberfläche zusammenführen. Das machen wir in nuxt.config.js . Zuerst brauchen wir unser benutzerdefiniertes Designobjekt:

 import customTheme from './chakra/theme'

Als nächstes müssen wir den chakra -Schlüssel angeben, der vom Nuxt-Modul Chakra UI bereitgestellt wird, und customTheme an die Eigenschaft extendTheme :

 chakra: { extendTheme: customTheme },

Ihre nuxt.config.js -Datei sollte wie folgt aussehen:

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

Wenn Sie Ihre Anwendung mit npm run dev , sollte Ihre Startseite so aussehen:

Nachdem wir die Chakra-Benutzeroberfläche erfolgreich installiert und das benutzerdefinierte Design unserer Anwendung hinzugefügt haben, können wir mit dem Aufbau des Chakra-ui-Explorers beginnen.

Erstellen unserer Hauptnavigation

Wir möchten, dass unsere Navigation unseren Markennamen trägt, in diesem Fall Chakra-ui Explorer , 2 Navigationslinks: Documentation und Repo und eine Schaltfläche, die für das Umschalten unseres Farbmodus verantwortlich ist. Lassen Sie uns eine neue Komponente im components namens NavBar , in der wir die Hauptnavigation unserer Anwendung mithilfe der Chakra-Benutzeroberfläche erstellen.

Lass uns das machen. Fügen Sie das folgende Snippet zu 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>

Als Nächstes müssen wir diese Komponente in unsere Standardlayoutkomponente – default.vue – importieren und zu unserer Vorlage hinzufügen, sodass unser Standardlayout insgesamt so aussehen sollte:

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

Wenn Sie Ihre Anwendung jetzt ausführen, sehen Sie Folgendes:

Sie können sehen, dass die Navigation bereits zugänglich ist, ohne sie überhaupt anzugeben. Dies ist nur sichtbar, wenn Sie die Tab -Taste auf Ihrer Tastatur drücken; Die Chakra-Benutzeroberfläche übernimmt die Fokusverwaltung, während Sie sich auf jeden Link im Navigationsmenü konzentrieren können.

Das as Prop

Aus dem Snippet unserer NavBar.vue oben sehen Sie das as Requisit. Dies ist eine für Chakra-UI-Komponenten verfügbare Funktion, mit der Sie ein HTML-Tag oder eine andere Komponente übergeben können, die als Basis-Tag der Komponente zusammen mit all ihren Stilen und Requisiten gerendert werden soll. Also, als wir es taten:

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

Wir bitten die Chakra-Benutzeroberfläche, ein <li> -Element zu rendern und eine Schaltflächenkomponente darin zu platzieren. Sie können auch sehen, wie wir dieses Muster hier verwenden:

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

Im obigen Fall bitten wir die Chakra-Benutzeroberfläche, die <nuxt-link />-Komponente von Nuxt zu rendern.

Die as -Requisite gibt Ihnen die Möglichkeit, das richtige (oder falsche) Element für den Kontext Ihres Markups zu verwenden. Das bedeutet, dass Sie es nutzen können, um Ihre Anwendungsvorlage mit semantischen Markups zu erstellen, die Ihre Anwendung für Screenreader aussagekräftiger machen. Anstatt also ein generisches div -Element für den Hauptinhalt Ihrer Anwendung zu verwenden, können Sie mit as prop ein main rendern, das Screenreadern mitteilt, dass dies der Hauptinhalt Ihrer Anwendung ist.

Hinweis : Sehen Sie sich die Dokumentation für alle Requisiten an, die von Chakra-UI-Komponenten bereitgestellt werden. Sehen Sie sich auch genauer an, wie die Markenfarbe in chakra/theme.js angegeben wurde. Sie können aus dem obigen Snippet ersehen, dass wir es als eine der Farben verwenden, die die Chakra-Benutzeroberfläche bereitstellt. Eine andere Sache, die Sie beachten sollten, ist das moon , das wir für den CIconButton auf unserer NavBar verwendet haben. Das moon ist eines der Standardsymbole, die Chakra UI standardmäßig bereitstellt.

Farbmodus

Eines der Features von Chakra UI ist die Unterstützung des Farbmodus. Und Sie können an der Verwendung des moon in der Navigation des Chakra-ui-Explorers erkennen, dass wir die Integration des Dunkelmodus planen. Anstatt es zum Schluss aufzuheben, lassen Sie es uns jetzt hinter uns bringen und verkabeln. Um dies zu tun, stellt CColorModeProvider unter Verwendung von Vues deploy/inject die Funktionen $chakraColorMode und $toggleColorMode . $chakraColorMode gibt den aktuellen Farbmodus Ihrer Anwendung zurück, während $toggleColorMode den Farbmodus von light auf dark und umgekehrt umschaltet. Um diese beiden Funktionen zu verwenden, müssen wir sie in die NavBar.vue Komponente einfügen. Lassen Sie uns dies unten im Abschnitt <script /> tun:

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

Lassen Sie uns eine berechnete Eigenschaft erstellen, um den Farbmodus zurückzugeben:

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

Nachdem wir nun beide Funktionen in NavBar.vue haben, ändern wir die Schaltfläche zum Umschalten des Farbmodus. Wir beginnen mit dem Symbol, sodass es je nach Farbmodus ein anderes Symbol anzeigt. Unsere CIconButton Komponente sieht jetzt in diesem Zustand so aus:

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

Derzeit verwenden wir ein aria-label Attribut, um Bildschirmlesern mitzuteilen, dass sie in den dunklen Modus wechseln sollen. Ändern wir dies, um sowohl den hellen als auch den dunklen Modus zu unterstützen:

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

Zuletzt fügen wir der Schaltfläche einen Click-Event-Handler hinzu, um den Farbmodus unserer Anwendung mithilfe der Funktion $toggleColorMode . So:

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

Um zu testen, ob unser eingerichteter Farbmodus funktioniert, füge ich eine Interpolation des Farbmodus und einen Text neben dem CIconButton , der unseren Farbmodus umschaltet. So:

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

So sieht unsere App derzeit aus:

Wir haben also die Schwerstarbeit beim Einrichten des Farbmodus in der Chakra-Benutzeroberfläche geleistet. Jetzt können wir unsere Anwendung basierend auf dem Farbmodus gestalten. Gehen wir zu default.vue und verwenden Sie die Farbmodus-Slot-Prop, die von CColorModeProvider bereitgestellt wird, um unsere Anwendung zu gestalten. Ändern wir zuerst unsere Vorlage in 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>

Wir destrukturieren colorMode aus der Eigenschaft slot props, die von CColorModeProvider bereitgestellt wird, und übergeben sie dann als dynamischen Schlüssel an ein mainStyle Objekt, das wir gleich erstellen werden. Die Idee ist, basierend auf dem colorMode Wert einen anderen Satz von Stilen zu verwenden. Ich verwende auch die Breite und Höhe mit den abgekürzten Requisiten – w bzw. h , um die Breite und Höhe unserer CBox Komponente festzulegen. Lassen Sie uns dieses mainStyles -Objekt in unserem Skriptabschnitt definieren:

 <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 Explorer unterstützt jetzt den Dunkelmodus!

Jetzt haben wir unsere Navigationsleiste und die Unterstützung für den Dunkelmodus erfolgreich für unsere Anwendung eingerichtet. Konzentrieren wir uns auf index.vue in unserem Seitenverzeichnis pages/ wo sich das Kernstück unserer Anwendung befindet. Wir beginnen mit dem Hinzufügen einer CBox Komponente wie folgt:

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

Dann fügen wir die CInput Komponente darin hinzu. Unsere index.vue -Seitenkomponente sieht dann so aus:

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

So sieht unsere Bewerbung jetzt aus:

Sie können dem obigen Screencast entnehmen, wie das CInput Element automatisch erkennt, wenn es sich im Dunkelmodus befindet, und sich entsprechend anpasst, obwohl wir dies nicht explizit festgelegt haben. Außerdem kann der Benutzer die Tabulatortaste drücken, um sich auf diese CInput Komponente zu konzentrieren.

Hinzufügen der Komponentenliste

Die Idee des Chakra-ui-Explorers (wie bereits erwähnt) besteht also darin, dem Benutzer alle verfügbaren Komponenten in der Chakra-Benutzeroberfläche anzuzeigen, damit wir eine Liste dieser Komponenten sowie die Links haben, die den Benutzer zur Dokumentation führen des Bauteils. Dazu erstelle ich einen Ordner namens data im Stammverzeichnis unseres Projektverzeichnisses und erstelle dann eine Datei namens index.js . In index.js werde ich ein Array von Objekten exportieren, das die Namen der Komponenten enthält. So sollte die Datei aussehen:

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

Damit unsere Implementierung vollständig ist, importiere ich das obige Array in pages/index.vue und iteriere darüber, um alle Komponenten anzuzeigen. Außerdem geben wir dem Benutzer die Möglichkeit, die Komponenten mithilfe des Suchfelds zu filtern. Hier die komplette Implementierung:

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

Und jetzt sieht unsere Anwendung so aus:

Sie können jetzt sehen, wie der dunkle Modus für die Liste der Komponenten automatisch ist und wie die Fokusverwaltung für die Links (standardmäßig) hinzugefügt wird, um die Zugänglichkeit zu verbessern.

Die Chakra-Benutzeroberfläche auf die Probe stellen

Sehen wir uns abschließend an, wie unsere App abschneidet, indem wir den Lighthouse-Barrierefreiheitstest darauf ausführen. Wohlgemerkt, dieser Test basiert auf der Ax User Impact Assessment. Unten ist ein Screencast des Tests. Sie können den Test auch selbst durchführen, indem Sie diesen Schritten folgen.

Aus dem obigen Screencast können Sie ersehen, dass unsere Chakra-UI-App beim Leuchtturm-Zugänglichkeitstest eine Punktzahl von 85 erreicht hat.

Fazit

In diesem Artikel haben wir die Notwendigkeit angesprochen, barrierefreie Schnittstellen zu erstellen, und wir haben auch gesehen, wie man die Chakra-UI verwendet, um barrierefreie Anwendungen von Grund auf zu erstellen, indem man einen Explorer (Chakra-ui-Explorer) für die Chakra-UI-Komponenten erstellt.

• Sehen Sie sich die Live-Anwendung auf Netlify → an
• Link zum Repo →