Chakra UI ve Nuxt.js ile Erişilebilir Bir Ön Uç Uygulaması Nasıl Oluşturulur

Birçok insan için web, günlük hayatlarının önemli bir parçasıdır. Onu işte, evde ve hatta yolda kullanıyorlar. Web erişilebilirliği, engelli kişilerin web'i eşit olarak kullanabileceği anlamına gelir. Bu nedenle, web üzerinde kurulum yapan geliştiriciler ve kuruluşlar için uygulamalarına kapsayıcılık ve erişilebilirlik eklemeleri çok önemlidir.

Web'i daha erişilebilir hale getirmek için, aşağıdakilere bağlı kalmak gibi uygulamalarınızda uygulamanız gereken birkaç en iyi uygulama ve standart vardır:

• Bölüm 508;
• Yardımcı Teknoloji Yasası;
• Engelli Amerikalılar Yasası (ADA);
• WCAG 2.0 (A ve AA Yönergeleri);
• BBC Mobil Erişilebilirlik Yönergeleri;
• WAI - ARIA ( Web Erişilebilirlik Girişimi – Erişilebilir Zengin İnternet Uygulamaları ) uygulamaları.

Bu standartları uygulamayı öğrenmek, bir geliştirici olarak çalışmak zorunda olduğunuz proje son tarihlerini ve diğer kısıtlamaları hesaba kattığınızda göz korkutucu bir görev gibi görünebilir. Bu bağlamda, web uygulamalarınızı erişilebilir hale getirmenize yardımcı olmak için oluşturulmuş bir UI tasarım sistemini tanıtmama izin verin.

çakra kullanıcı arayüzü

Chakra UI, Segun Adebayo tarafından oluşturulmuş bir tasarım sistemi ve UI çerçevesidir. Basitlik, modülerlik, birleştirilebilirlik ve erişilebilirlik göz önünde bulundurularak oluşturulmuştur. Chakra UI, erişilebilir ön uç uygulamalar oluşturmak için gereken tüm yapı taşlarını sağlar.

Not : Chakra UI, başlık altında CSS-in-JS'ye bağlı olsa da, kütüphaneyi kullanmak için bilmenize gerek yoktur.

Çerçeve orijinal olarak React için oluşturulmuş olsa da, Jonathan Bakebwa Vue'ya geçişin öncülüğünü yaptı. Böylece Vuejs/NuxtJS geliştiricileri artık erişilebilir web uygulamaları oluşturmak için Chakra UI'yi kullanabilir.

Çakra Kullanıcı Arayüzü Özellikleri

Çakra UI, aşağıdaki ilkeler göz önünde bulundurularak oluşturulmuştur:

• Stil sahne
  Chakra UI, aksesuarlar kullanarak bileşenlere stil vermeyi veya stillerini geçersiz kılmayı mümkün kılar. Bu, stil sayfası veya satır içi stiller ihtiyacını azaltır. Chakra UI, kaputun altındaki Styled Systems'ı kullanarak bu esneklik düzeyine ulaşır.
• Kompozisyon
  Chakra UI'daki bileşenler, karmaşıklığı düşük tutmak ve bunları bir araya getirmek için minimum aksesuarlarla daha küçük parçalara bölünmüştür. Bu, stillerin ve işlevselliğin esnek ve genişletilebilir olmasını sağlayacaktır. Örneğin, yeni bileşenler oluşturmak için CBox ve CPseudoBox bileşenlerini kullanabilirsiniz.
• Erişilebilir
  Chakra UI bileşenleri, WAI-ARIA yönergeleri belirtimlerini takip eder ve doğru aria-* özniteliklerine sahiptir. Ayrıca, her bir yazılan bileşenin erişilebilirlik raporunu accessibility.md adlı bir dosyada bulabilirsiniz. CAccordion bileşeni için erişilebilirlik raporuna bakın.
• temalı
  Chakra UI, uygulamanızın tamamında, herhangi bir bileşende temanızdaki değerleri kolayca referans alma yeteneği sağlar.
• Karanlık mod desteği
  Chakra UI'deki çoğu bileşen, kutudan çıkar çıkmaz karanlık mod uyumludur.

Çakra Kullanıcı Arayüzü Erişilebilirliği Nasıl Destekler?

Çakra kullanıcı arayüzünün oluşturulmasının arkasındaki temel ilkelerden biri erişilebilirliktir . Bunu akılda tutarak, Chakra UI'deki tüm bileşenler, aşağıdakileri sağlayarak erişilebilirlik desteği ile kutudan çıkar:

• Klavyede Gezinme — motor becerileri engeli olan kullanıcılar için kullanışlıdır,
• Odak Yönetimi,
• ekran okuyucuların ihtiyaç duyduğu aria-* özellikleri,
• Kalıcı iletişim kutuları için odak yakalama ve geri yükleme.
  

Chakra UI ve Nuxt'a Başlarken

Not : Chakra UI'yi Vue.js ile kullanmak için Başlarken kılavuzuna bakın.

Demo projemiz için, Chakra UI bileşenlerini aramak için erişilebilir tek sayfalık bir web uygulaması olan Chakra-ui gezgini oluşturacağız.

• Netlify'da canlı projeye bakın →

Chakra-ui Explorer'a Başlarken

NPM'nin zaten kurulu olduğunu varsayarak, aşağıdakileri çalıştırarak yeni bir Nuxt uygulaması oluşturun:

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

Veya ipliği tercih ederseniz, çalıştırın:

 $ yarn create nuxt-app chakra-ui-explorer

Nuxt uygulamanızı oluşturmayı tamamlamak için kurulum istemini izleyin.

Çakra Kullanıcı Arayüzü Ayarlama

Chakra UI, bileşen stillerini işlemek için Emotion kullanır. Bu nedenle, Chakra UI'yi kullanmaya başlamak için, Emotion'ın yanı sıra bir akran bağımlılığı olarak Chakra UI'yi yüklemeniz gerekecek. Bu proje için, hem Chakra UI hem de Emotion için Chakra UI ile başlarken sürtünmeyi azaltacak resmi Nuxt modüllerini kullanacağız. Aşağıdaki komutu çalıştırarak projemize ekleyelim:

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

Not : @nuxtjs/emotion , bileşen stillerinizin sunucu yapısında oluşturulmasına ve eklenmesine olanak tanır.

Her iki modülü de kurduktan sonra, bunları modül dizisi seçeneği altındaki nuxt.config.js dosyasına kaydetmeniz gerekecektir:

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

Chakra UI kurulum işlemimizi tamamlamak için layoutlarda layouts/ varsayılan düzen bileşenimize dokunmamız ve Chakra UI'dan CThemeProvider , CColorModeProvider ve CReset bileşenlerini eklememiz gerekiyor.

Chakra UI tarafından sağlanan tüm bileşenlerin doğru çalışmasını sağlamak için CReset bileşenini kullanmanız önerilir.

CThemeProvider bileşeni, temanızı uygulamanızın her parçası için kullanılabilir hale getirirken, CColorModeProvider bileşeni, uygulamamızın iki durumdan birinde olabilen renk modunu yönetmekten sorumludur: açık veya koyu. Son olarak, CReset bileşeni tüm tarayıcı varsayılan stillerini kaldıracaktır.

Yukarıda belirtilen bileşenleri layouts/default.vue içine ekleyelim. Şablon bölümümüzde şunu ekleyelim:

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

Ardından script bölümümüzde, bileşenleri şu şekilde içe aktarıp kaydedeceğiz:

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

default.vue düzeni bileşeniniz şöyle görünmelidir:

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

Not : Dikkat edin, hem <c-reset /> hem de <nuxt /> bileşenlerini bir c-box bileşenine yerleştiriyorum.

Uygulama Temanızı Ayarlama

Çakra UI, uygulamanız için bir tema belirlemenize olanak tanır. 'Tema' ile, uygulamanızın renk paleti, tür ölçeği, yazı tipi yığınları, kesme noktaları, kenarlık yarıçapı değerleri vb. ayarlarını kastediyorum. Renkler ve kontrast, erişilebilirliğin hayati bileşenleri olduğundan, kolayca algılanabilen renkleri kullanmak önemlidir.

Kutudan çıktığı gibi Chakra UI, uygulama gereksinimlerinizin çoğunu renkler, yazı tipleri vb. açısından karşılayan varsayılan bir tema nesnesiyle birlikte gelir. Varsayılan tema, renk modlarının kolayca değiştirilmesine izin veren kontrast göz önünde bulundurularak ayarlanmıştır (bundan sonra daha fazlası).

Ancak Chakra UI, varsayılan temayı genişletmenize veya tamamen değiştirmenize olanak tanır. Bu, Styled System Theme Spesifikasyonuna dayalı bir tema nesnesini kabul ederek mümkündür.

Tema nesnesindeki değerler, uygulamanızda kullanım için otomatik olarak mevcuttur. Örneğin, theme.colors içinde belirtilen renklere, bileşenlerinizdeki color , borderColor , backgroundColor , fill , stroke ve style props tarafından başvurulabilir.

Uygulamanızı kişiselleştirmek için Chakra UI tarafından sağlanan varsayılan temayı geçersiz kılabilir veya içinde yeni değerler ayarlayabilirsiniz. Bunu yapmak için, Chakra UI Nuxt modülü, bir nesne alan bir extendTheme özelliğini alacak bir chakra nesnesini ortaya çıkarır. extendTheme verilen nesne, Chakra UI varsayılan tema nesnesiyle yinelemeli olarak birleştirilecektir. Marka renk paletimizi Çakra'ya ekleyelim ki uygulamamızda kullanabilelim.

Not : Chakra UI, temanızın renk nesnesine 50 - 900 arasındaki tuşları kullanarak renk paleti eklemenizi önerir. Bu paletleri oluşturmak için coolors ve palx gibi web araçlarını kullanabilirsiniz.

Demo ana sayfamız için bir marka rengi kireç kullanacağım. Chakra UI'nin bu renkten haberdar olmasını sağlamak için, projemin dizininin kökünde chakra adlı bir klasörde (ne istersen diyebilirsin) bir customeTheme nesnesi oluşturacağım. Bu objede marka renk paletimizi tanımlayacağım.

Oluşturduğunuz klasörde theme.js adlı bir dosya oluşturun ve ardından aşağıdaki parçacığı ekleyin:

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

Şimdi özel temamızı Chakra UI ile birleştirelim. Bunu nuxt.config.js içinde yapıyoruz. İlk olarak, özel tema nesnemize ihtiyacımız var:

 import customTheme from './chakra/theme'

Ardından, Chakra UI Nuxt modülü tarafından sağlanan chakra anahtarını belirlemeli ve customTheme extendTheme özelliğine geçirmeliyiz:

 chakra: { extendTheme: customTheme },

nuxt.config.js dosyanız şöyle görünmelidir:

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

Uygulamanızı npm run dev ile çalıştırdığınızda, ana sayfanız şöyle görünmelidir:

Chakra UI'yi başarıyla yüklediğimize ve uygulamamızın özel temasını eklediğimize göre, şimdi Chakra-ui gezgini oluşturmaya başlayalım.

Ana Navigasyonumuzun Oluşturulması

Navigasyonumuzun marka ismimiz olmasını istiyoruz, bu durumda Chakra-ui gezgini , 2 navigasyon bağlantısı: Documentation ve Repo ve renk modumuzu değiştirmekten sorumlu bir düğme olacak. Chakra UI kullanarak uygulamamızın ana navigasyonunu oluşturacağımız NavBar adlı components dizini altında yeni bir component oluşturalım.

Bunu yapalım. NavBar.vue aşağıdaki parçacığı ekleyin:

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

Ardından, bu bileşeni varsayılan düzen bileşenimiz olan default.vue ve şablonumuza eklememiz gerekiyor, böylece genel olarak varsayılan düzenimiz şöyle görünmelidir:

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

Şimdi uygulamanızı çalıştırdığınızda şunu göreceksiniz:

Navigasyonun, belirtmeden bile erişilebilir olduğunu görebilirsiniz. Bu, yalnızca klavyenizdeki Sekme tuşuna bastığınızda görülebilir; Chakra UI, odak yönetimini gerçekleştirirken, gezinme menüsündeki her bağlantıya odaklanabilirsiniz.

Prop as

Yukarıdaki NavBar.vue snippet'inden, as prop'u fark edeceksiniz. Bu, bir HTML etiketini veya bileşenin temel etiketi olarak oluşturulacak başka bir bileşeni, tüm stilleri ve özellikleriyle birlikte iletmenize izin veren, Çakra UI bileşenlerinde bulunan bir özelliktir. Yani yaptığımız zaman:

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

Çakra Kullanıcı Arabiriminden bir <li> öğesi oluşturmasını ve içine bir düğme bileşeni yerleştirmesini istiyoruz. Bu kalıbı burada kullandığımızı da görebilirsiniz:

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

Yukarıdaki durumda, Chakra UI'dan Nuxt'un <nuxt-link /> bileşenini oluşturmasını istiyoruz.

as prop, işaretlemenizin bağlamı için doğru (veya yanlış) öğeyi kullanma gücü verir. Bunun anlamı, uygulamanızı ekran okuyucular için daha anlamlı kılacak semantik işaretlemeler kullanarak uygulama şablonunuzu oluşturmak için ondan yararlanabilmenizdir. Bu nedenle, uygulamanızın ana içeriği için genel bir div öğesi kullanmak yerine, as prop ile, ekran okuyucularına bunun uygulamanızın ana içeriği olduğunu söyleyen bir main öğe oluşturabilirsiniz.

Not : Chakra UI bileşenleri tarafından açığa çıkarılan tüm aksesuarlar için belgelere bakın. Ayrıca chakra/theme.js marka renginin nasıl belirtildiğine daha yakından bakın. Yukarıdaki snippet'ten, onu Chakra UI'nin sağladığı renklerden herhangi biri olarak kullandığımızı görebilirsiniz. Dikkat edilmesi gereken bir diğer şey de, CIconButton için kullandığımız moon simgesidir. moon simgesi, Chakra UI'nin kutudan çıkardığı varsayılan simgelerden biridir.

Renk Modu

Chakra UI'nin özelliklerinden biri de renk modu desteğidir. Ve Chakra-ui gezgininin navigasyonunda moon simgesinin kullanımından anlayabilirsiniz, karanlık modu entegre etmeyi planlıyoruz. O yüzden en sona bırakmak yerine, hemen şimdi bitirelim ve bağlayalım. Bunu yapmak için, Vue'nin sağlama/inject işlevini kullanan CColorModeProvider , $chakraColorMode ve $toggleColorMode işlevlerini sağlar. $chakraColorMode , uygulamanızın geçerli renk modunu döndürürken, $ light renk modunu $toggleColorMode dark veya tam tersi şekilde değiştirir. Bu iki işlevi kullanmak için bunları NavBar.vue bileşenine enjekte etmemiz gerekecek. Bunu aşağıdaki <script /> bölümünde yapalım:

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

Renk modunu döndürmek için hesaplanmış bir özellik oluşturalım:

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

Şimdi NavBar.vue her iki işlevi de enjekte ettiğimize göre, renk değiştirme modu düğmesini değiştirelim. Renk moduna bağlı olarak farklı bir simge göstermesi için simgeyle başlayacağız. CIconButton bileşenimiz şimdi bu durumda şöyle görünür:

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

Şu anda, ekran okuyuculara karanlık moda geçmelerini söylemek için bir aria-label özniteliği kullanıyoruz. Bunu hem açık hem de karanlık modu destekleyecek şekilde değiştirelim:

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

Son olarak, $toggleColorMode işlevini kullanarak uygulamamızın renk modunu değiştirmek için düğmeye bir tıklama olay işleyicisi ekleyeceğiz. Şöyle:

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

Renk modu kurulumumuzun çalışıp çalışmadığını test etmek için, renk modunun bir enterpolasyonunu ve renk modumuzu değiştiren CIconButton yanına bir metin ekleyeceğim. Şöyle:

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

Uygulamamız şu anda şöyle görünüyor:

Bu yüzden, Çakra UI'de renk modunu ayarlamada ağır kaldırmayı yaptık. Artık uygulamamızı renk moduna göre şekillendirebiliriz. Varsayılan.vue'ya gidelim ve uygulamamızı CColorModeProvider default.vue sağlanan renk modu slot desteğini kullanalım. İlk önce şablonumuzu default.vue içinde değiştirelim.

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

colorMode tarafından sağlanan slot props özelliğinden CColorModeProvider yok ediyoruz ve ardından birazdan oluşturacağımız mainStyle nesnesine dinamik anahtar olarak geçiriyoruz. Buradaki fikir, colorMode değerine dayalı olarak farklı bir stil kümesi kullanmaktır. Ayrıca, CBox bileşenimizin genişliğini ve yüksekliğini ayarlamak için sırasıyla w ve h kısayollarıyla genişlik ve yüksekliği kullanıyorum. Bu mainStyles nesnesini betik bölümümüzde tanımlayalım:

 <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 gezgini artık karanlık mod desteğine sahip!

Artık navigasyon çubuğumuza sahibiz ve uygulamamız için karanlık mod desteğini başarıyla kurduk, şimdi uygulamamızın etinin bulunabileceği pages/ dizinlerimizde index.vue odaklanalım. Bunun gibi bir CBox bileşeni ekleyerek başlayacağız:

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

Sonra içine CInput bileşenini ekleyeceğiz. index.vue sayfa bileşenimiz şu şekilde görünecektir:

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

Uygulamamız şimdi nasıl görünüyor:

Yukarıdaki ekran görüntüsünden, CInput öğesinin karanlık modda olduğunu otomatik olarak nasıl bildiğini görebilir ve bunu açıkça ayarlamamış olsak bile buna göre ayarlayabilirsiniz. Ayrıca, kullanıcı o CInput bileşenine odaklanmak için sekme tuşuna basabilir.

Bileşenler Listesini Ekleme

Yani Chakra-ui gezgininin fikri (daha önce belirtildiği gibi) kullanıcıya Çakra UI'deki mevcut tüm bileşenleri göstermektir, böylece bu bileşenlerin bir listesini ve kullanıcıyı belgelere götürecek bağlantılara sahip olabiliriz. bileşenin. Bunu yapmak için projemizin dizininin kökünde data adında bir klasör oluşturacağım ve ardından index.js adında bir dosya oluşturacağım. index.js bileşenlerin adlarını içeren bir dizi nesneyi dışa aktaracağım. Dosyanın nasıl görünmesi gerektiği aşağıda açıklanmıştır:

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

Uygulamamızın tamamlanması için, yukarıdaki diziyi pages/index.vue ve tüm bileşenleri görüntülemek için üzerinde yineleyeceğim. Ayrıca, kullanıcıya arama kutusunu kullanarak bileşenleri filtreleme yeteneği vereceğiz. İşte tam uygulama:

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

Ve şimdi uygulamamız şuna benziyor:

Artık bileşen listesi için karanlık modun ne kadar otomatik olduğunu ve erişilebilirliğe yardımcı olmak için bağlantılar için (varsayılan olarak) odak yönetiminin nasıl eklendiğini görebilirsiniz.

Çakra Kullanıcı Arayüzünü Test Etme

Son olarak, üzerinde Lighthouse erişilebilirlik testini çalıştırarak uygulamamızın nasıl puan aldığını görelim. Dikkat edin, bu test Axe kullanıcı etki değerlendirmesine dayanmaktadır. Aşağıda testin bir ekran görüntüsü bulunmaktadır. Bu adımları izleyerek testi kendiniz de çalıştırabilirsiniz.

Yukarıdaki ekran görüntüsünden Chakra UI uygulamamızın deniz feneri erişilebilirlik testinde 85 puan aldığını görebilirsiniz.

Çözüm

Bu makalede, erişilebilir arayüzler oluşturma ihtiyacına değindik ve ayrıca Chakra UI bileşenleri için bir kaşif (Chakra-ui gezgini) oluşturarak, sıfırdan erişilebilir uygulamalar oluşturmak için Chakra UI'nin nasıl kullanılacağını gördük.

• Netlify'daki canlı uygulamayı görün →
• Depoya bağlantı →