Chakra UI 및 Nuxt.js를 사용하여 액세스 가능한 프런트 엔드 애플리케이션을 구축하는 방법

많은 사람들에게 웹은 일상 생활의 필수적인 부분입니다. 그들은 직장, 집, 심지어 길에서 그것을 사용합니다. 웹 접근성이란 장애가 있는 사람들도 웹을 동등하게 사용할 수 있다는 것을 의미합니다. 따라서 웹에서 구축하는 개발자와 조직이 애플리케이션에 포괄성과 접근성을 구축하는 것이 중요합니다.

웹을 보다 쉽게 ​​액세스할 수 있도록 하기 위해 다음을 준수하는 것과 같이 애플리케이션에서 구현해야 하는 몇 가지 모범 사례와 표준이 있습니다.

• 섹션 508;
• 보조 기술법;
• 미국 장애인법(ADA);
• WCAG 2.0(A 및 AA 지침);
• BBC 모바일 접근성 지침;
• WAI - ARIA (웹 액세스 가능성 I 이니셔티브 – 액세스 가능한 리치 인터넷 A 애플리케이션 ) 사례 .

개발자로서 작업해야 하는 프로젝트 마감일 및 기타 제약 조건을 고려할 때 이러한 표준을 구현하는 방법을 배우는 것은 어려운 작업처럼 보일 수 있습니다. 그런 관점에서 웹 애플리케이션에 액세스할 수 있도록 도와주는 UI 디자인 시스템을 소개하겠습니다.

차크라 UI

Chakra UI는 Segun Adebayo에서 만든 디자인 시스템 및 UI 프레임워크입니다. 단순성, 모듈성, 구성성 및 접근성을 염두에 두고 만들어졌습니다. Chakra UI는 액세스 가능한 프런트 엔드 애플리케이션을 만드는 데 필요한 모든 빌딩 블록을 제공합니다.

참고 : Chakra UI는 내부적으로 CSS-in-JS에 의존하지만 라이브러리를 사용하기 위해 알 필요는 없습니다.

프레임워크는 원래 React용으로 만들어졌지만 Jonathan Bakebwa가 Vue로의 이식을 주도했습니다. 따라서 Vuejs/NuxtJS 개발자는 이제 Chakra UI를 사용하여 액세스 가능한 웹 애플리케이션을 만들 수 있습니다.

차크라 UI의 특징

Chakra UI는 다음 원칙을 염두에 두고 만들어졌습니다.

• 스타일 소품
  Chakra UI를 사용하면 소품을 사용하여 구성 요소의 스타일을 지정하거나 해당 스타일을 재정의할 수 있습니다. 이렇게 하면 스타일시트 또는 인라인 스타일의 필요성이 줄어듭니다. Chakra UI는 내부적으로 Styled Systems를 사용하여 이러한 수준의 유연성을 달성합니다.
• 구성
  Chakra UI의 구성 요소는 복잡성을 낮추고 함께 구성하기 위해 최소한의 소품으로 더 작은 부분으로 나뉩니다. 이렇게 하면 스타일과 기능이 유연하고 확장 가능합니다. 예를 들어 CBox 및 CPseudoBox 구성 요소를 사용하여 새 구성 요소를 만들 수 있습니다.
• 얻기 쉬운
  차크라 UI 구성 요소는 WAI-ARIA 지침 사양을 따르고 올바른 aria-* 속성을 갖습니다. 또한 accessibility.md 라는 파일에서 제작된 각 구성 요소의 접근성 보고서를 찾을 수 있습니다. CAccordion 구성 요소에 대한 접근성 보고서를 참조하세요.
• 테마가 있는
  Chakra UI를 사용하면 모든 구성 요소의 전체 애플리케이션에서 테마의 값을 쉽게 참조할 수 있습니다.
• 다크 모드 지원
  Chakra UI의 대부분의 구성 요소는 기본적으로 다크 모드와 호환됩니다.

Chakra UI가 접근성을 지원하는 방법

Chakra UI 생성의 핵심 원칙 중 하나는 접근성 입니다. 이를 염두에 두고 Chakra UI의 모든 구성 요소는 기본적으로 다음을 제공하여 접근성을 지원합니다.

• 키보드 탐색 — 운동 기술 장애가 있는 사용자에게 유용합니다.
• 집중관리,
• 스크린 리더에 필요한 aria-* 속성,
• 모달 대화 상자에 대한 포커스 트래핑 및 복원.
  

차크라 UI 및 Nuxt 시작하기

참고 : Vue.js에서 Chakra UI를 사용하려면 시작하기 가이드를 참조하세요.

데모 프로젝트를 위해 Chakra UI 구성 요소를 검색하는 액세스 가능한 단일 페이지 웹 응용 프로그램 인 Chakra-ui 탐색기 를 구축할 것입니다.

• Netlify에서 라이브 프로젝트 보기 →

Chakra-ui Explorer 시작하기

NPM이 이미 설치되어 있다고 가정하고 다음을 실행하여 새 Nuxt 응용 프로그램을 만듭니다.

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

또는 원사를 선호하는 경우 다음을 실행하십시오.

 $ yarn create nuxt-app chakra-ui-explorer

설치 프롬프트에 따라 Nuxt 애플리케이션 생성을 완료합니다.

차크라 UI 설정

Chakra UI는 구성 요소 스타일을 처리하기 위해 감정을 사용합니다. 따라서 Chakra UI를 시작하려면 피어 종속성으로 감정과 함께 Chakra UI를 설치해야 합니다. 이 프로젝트에서 우리는 Chakra UI와 감정 모두에 공식 Nuxt 모듈을 사용하여 Chakra UI를 시작할 때의 마찰을 줄일 것입니다. 다음 명령을 실행하여 프로젝트에 추가해 보겠습니다.

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

참고 : @nuxtjs/emotion 을 사용하면 구성 요소 스타일을 생성하고 서버 빌드에 삽입할 수 있습니다.

두 모듈을 모두 설치한 후 모듈 배열 옵션 아래의 nuxt.config.js 파일에 등록해야 합니다.

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

Chakra UI 설정 프로세스를 완료하려면 layouts/ 에서 기본 레이아웃 구성 요소를 터치하고 Chakra UI에서 CThemeProvider , CColorModeProvider 및 CReset 구성 요소를 추가해야 합니다.

Chakra UI에서 제공하는 모든 구성 요소가 올바르게 작동하도록 하려면 CReset 구성 요소를 사용하는 것이 좋습니다.

CThemeProvider 구성 요소는 응용 프로그램의 모든 부분에서 테마를 사용할 수 있도록 하는 반면 CColorModeProvider 구성 요소는 두 가지 상태(밝음 또는 어둡음) 중 하나일 수 있는 응용 프로그램의 색상 모드를 처리합니다. 마지막으로 CReset 구성 요소는 모든 브라우저 기본 스타일을 제거합니다.

layouts/default.vue 에 앞서 언급한 구성 요소를 추가해 보겠습니다. 템플릿 섹션에 다음을 추가해 보겠습니다.

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

그런 다음 스크립트 섹션에서 다음과 같이 구성 요소를 가져오고 등록합니다.

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

default.vue 레이아웃 구성 요소는 다음과 같아야 합니다.

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

참고 : c-box 구성 요소에서 <c-reset /> 및 <nuxt /> 구성 요소를 모두 래핑하고 있습니다.

애플리케이션 테마 설정

Chakra UI를 사용하면 애플리케이션의 테마를 설정할 수 있습니다. '테마'란 애플리케이션의 색상 팔레트, 유형 스케일, 글꼴 스택, 중단점, 테두리 반경 값 등의 설정을 의미합니다. 색상과 대비는 접근성의 중요한 구성 요소이므로 쉽게 인지할 수 있는 색상을 사용하는 것이 중요합니다.

기본적으로 Chakra UI는 색상, 글꼴 등의 측면에서 대부분의 응용 프로그램 요구 사항을 충족할 수 있는 기본 테마 개체와 함께 제공됩니다. 기본 테마는 색상 모드를 쉽게 토글할 수 있도록 대비를 염두에 두고 설정됩니다(자세한 내용은 나중에 설명).

그러나 Chakra UI를 사용하면 기본 테마를 확장하거나 완전히 대체할 수 있습니다. 이것은 Styled System Theme Specification을 기반으로 하는 테마 객체를 수락함으로써 가능합니다.

테마 개체의 값은 응용 프로그램에서 자동으로 사용할 수 있습니다. 예를 들어 theme.colors 에 지정된 색상은 구성 요소의 color , borderColor , backgroundColor , fill , stroke 및 style 소품에서 참조할 수 있습니다.

애플리케이션을 개인화하려면 Chakra UI에서 제공하는 기본 테마를 무시하거나 새 값을 설정할 수 있습니다. 이를 위해 Chakra UI Nuxt 모듈은 개체를 사용하는 extendTheme 속성을 사용하는 chakra 개체를 노출합니다. extendTheme 에 제공된 객체는 Chakra UI 기본 테마 객체에 재귀적으로 병합됩니다. 애플리케이션에서 사용할 수 있도록 브랜드 색상 팔레트를 차크라에 추가해 보겠습니다.

참고 : Chakra UI는 50 - 900의 키를 사용하여 테마의 색상 개체에 색상 팔레트를 추가할 것을 권장합니다. coolors 및 palx와 같은 웹 도구를 사용하여 이러한 팔레트를 생성할 수 있습니다.

데모 홈페이지에서는 브랜드 색상인 라임을 ​​사용하겠습니다. Chakra UI가 이 색상을 인식하도록 하기 위해 내 프로젝트 디렉토리의 루트에 있는 chakra (원하는 이름으로 부를 수 있음)라는 폴더에 customeTheme 개체를 만듭니다. 이 개체에서는 브랜드 색상 팔레트를 정의합니다.

생성한 폴더에 theme.js 라는 파일을 생성하고 다음 스니펫을 추가합니다.

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

이제 사용자 정의 테마를 Chakra UI에 병합해 보겠습니다. nuxt.config.js 에서 이를 수행합니다. 먼저 사용자 정의 테마 개체가 필요합니다.

 import customTheme from './chakra/theme'

다음으로 Chakra UI Nuxt 모듈에서 제공하는 chakra 키를 지정하고 extendTheme 속성에 customTheme 를 전달해야 합니다.

 chakra: { extendTheme: customTheme },

nuxt.config.js 파일은 다음과 같아야 합니다.

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

npm run dev 로 애플리케이션을 실행할 때 홈페이지는 다음과 같아야 합니다.

이제 Chakra UI를 성공적으로 설치하고 애플리케이션의 사용자 지정 테마를 추가했으므로 Chakra-ui 탐색기 구축을 시작하겠습니다.

기본 탐색 만들기

탐색에 브랜드 이름이 지정되기를 원합니다. 이 경우에는 Chakra-ui explorer , 2개의 탐색 링크( Documentation 및 Repo ), 색상 모드 전환을 담당하는 버튼이 될 것입니다. Chakra UI를 사용하여 애플리케이션의 기본 탐색을 생성할 NavBar 라는 components 디렉토리 아래에 새 구성 요소를 생성해 보겠습니다.

해보자 NavBar.vue 에 다음 스니펫을 추가합니다.

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

다음으로 기본 레이아웃 구성 요소인 default.vue 에서 이 구성 요소를 가져와서 템플릿에 추가하여 전반적인 기본 레이아웃이 다음과 같아야 합니다.

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

지금 애플리케이션을 실행하면 다음이 표시됩니다.

지정하지 않아도 탐색에 이미 액세스할 수 있음을 알 수 있습니다. 이것은 키보드의 Tab 키를 누를 때만 볼 수 있습니다. Chakra UI는 포커스 관리를 처리하고 탐색 메뉴의 각 링크에 집중할 수 있습니다.

소품 as

위의 NavBar.vue 의 스니펫에서 as prop을 알 수 있습니다. 이것은 모든 스타일 및 소품과 함께 구성 요소의 기본 태그로 렌더링될 HTML 태그 또는 다른 구성 요소를 전달할 수 있는 Chakra UI 구성 요소에 사용할 수 있는 기능입니다. 그래서 우리가 했을 때:

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

우리는 Chakra UI에 <li> 요소를 렌더링하고 그 안에 버튼 구성 요소를 배치하도록 요청하고 있습니다. 여기에서 해당 패턴을 사용하는 것을 볼 수도 있습니다.

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

위의 경우 Chakra UI에 Nuxt의 <nuxt-link /> 구성 요소를 렌더링하도록 요청하고 있습니다.

as 소품은 마크업의 컨텍스트에 대해 올바른(또는 잘못된) 요소를 사용할 수 있는 권한을 제공합니다. 이것이 의미하는 바는 이를 활용하여 의미 체계 마크업을 사용하여 애플리케이션 템플릿을 구축할 수 있다는 것입니다. 따라서 애플리케이션의 주요 콘텐츠에 일반 div 요소를 사용하는 대신 as 소품을 사용하여 이것이 애플리케이션의 주요 콘텐츠임을 화면 판독기에 알리는 main 요소를 렌더링할 수 있습니다.

참고 : Chakra UI 구성 요소에 의해 노출되는 모든 소품에 대한 설명서를 확인하십시오. 또한 chakra/theme.js 에 브랜드 색상이 어떻게 지정되었는지 자세히 살펴보세요. 위의 스니펫에서 Chakra UI가 제공하는 색상으로 사용하고 있음을 알 수 있습니다. 알아야 할 또 다른 사항은 NavBar의 CIconButton 에 사용한 moon 아이콘입니다. moon 아이콘은 Chakra UI가 기본적으로 제공하는 기본 아이콘 중 하나입니다.

컬러 모드

Chakra UI의 기능 중 하나는 색상 모드 지원입니다. 그리고 Chakra-ui 익스플로러 내비게이션의 moon 아이콘 사용을 보면 알 수 있듯이 다크 모드를 통합할 계획입니다. 따라서 마지막으로 남겨 두는 대신 지금 끝내고 연결해 보겠습니다. 이를 위해 Vue의 제공/주입을 사용하는 CColorModeProvider 는 $chakraColorMode 및 $toggleColorMode 기능을 제공합니다. $chakraColorMode 는 응용 프로그램의 현재 색상 모드를 반환하고 $ $toggleColorMode 는 색상 모드를 light 색에서 dark 으로 또는 그 반대로 토글합니다. 이 두 함수를 사용하려면 NavBar.vue 구성 요소에 삽입해야 합니다. 아래의 <script /> 섹션에서 이 작업을 수행해 보겠습니다.

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

색상 모드를 반환하는 계산된 속성을 만들어 보겠습니다.

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

이제 NavBar.vue 에 두 기능을 모두 삽입했으므로 토글 색상 모드 버튼을 수정하겠습니다. 색상 모드에 따라 다른 아이콘을 표시하도록 아이콘부터 시작하겠습니다. CIconButton 구성 요소는 이제 이 상태에서 다음과 같습니다.

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

현재 aria-label 속성을 사용하여 화면 판독기에게 어두운 모드로 전환하도록 지시하고 있습니다. 밝은 모드와 어두운 모드를 모두 지원하도록 수정해 보겠습니다.

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

마지막으로 $toggleColorMode 함수를 사용하여 애플리케이션의 색상 모드를 토글하는 버튼에 클릭 이벤트 핸들러를 추가합니다. 이렇게:

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

색상 모드 설정이 작동하는지 테스트하기 위해 색상 모드의 보간을 추가하고 색상 모드를 토글하는 CIconButton 옆에 텍스트를 추가합니다. 이렇게:

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

현재 우리 앱의 모습은 다음과 같습니다.

그래서 우리는 Chakra UI에서 컬러 모드를 설정하는 데 많은 노력을 기울였습니다. 이제 색상 모드를 기반으로 응용 프로그램의 스타일을 지정할 수 있습니다. default.vue 로 이동하여 CColorModeProvider 에서 제공하는 색상 모드 슬롯 소품을 사용하여 응용 프로그램의 스타일을 지정해 보겠습니다. 먼저 default.vue 에서 템플릿을 수정해 보겠습니다.

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

CColorModeProvider 에서 제공하는 슬롯 props 속성에서 colorMode 를 구조화한 다음 이를 동적 키로 전달하여 우리가 잠시 후에 생성할 mainStyle 개체에 전달합니다. 아이디어는 colorMode 값을 기반으로 다른 스타일 세트를 사용하는 것입니다. 나는 또한 우리의 CBox 구성 요소의 너비와 높이를 설정하기 위해 각각 w 와 h 의 속기 소품과 함께 너비와 높이를 사용하고 있습니다. 스크립트 섹션에서 이 mainStyles 개체를 정의해 보겠습니다.

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

Chakra-ui 탐색기에 이제 다크 모드가 지원됩니다!

이제 탐색 모음이 있고 애플리케이션에 대한 다크 모드 지원을 성공적으로 설정했습니다. 이제 애플리케이션의 핵심을 찾을 수 있는 pages/ 디렉토리의 index.vue 에 집중하겠습니다. 다음과 같이 CBox 구성 요소를 추가하는 것으로 시작하겠습니다.

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

그런 다음 내부에 CInput 구성 요소를 추가합니다. index.vue 페이지 구성 요소가 다음과 같이 표시됩니다.

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

다음은 현재 애플리케이션의 모습입니다.

위의 스크린캐스트에서 CInput 요소가 자동으로 어두운 모드에 있을 때 이를 어떻게 인식하고 명시적으로 설정하지 않았더라도 그에 따라 조정하는지 확인할 수 있습니다. 또한 사용자는 탭 키를 눌러 해당 CInput 구성 요소에 집중할 수 있습니다.

구성 요소 목록 추가

따라서 Chakra-ui 탐색기의 아이디어는(앞서 언급했듯이) 사용자에게 Chakra UI에서 사용 가능한 모든 구성 요소를 표시하여 해당 구성 요소의 목록과 사용자를 문서로 안내하는 링크를 가질 수 있도록 하는 것입니다. 구성 요소의. 이를 위해 프로젝트 디렉토리의 루트에 data 라는 폴더를 만든 다음 index.js 라는 파일을 만듭니다. index.js 에서 구성 요소의 이름을 포함할 객체 배열을 내보냅니다. 파일의 모양은 다음과 같습니다.

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

구현을 완료하려면 위의 배열을 pages/index.vue 로 가져오고 반복하여 모든 구성 요소를 표시합니다. 또한 사용자에게 검색 상자를 사용하여 구성 요소를 필터링할 수 있는 기능을 제공합니다. 다음은 완전한 구현입니다.

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

이제 애플리케이션은 다음과 같습니다.

이제 구성 요소 목록에 대해 다크 모드가 자동으로 설정되는 방식과 접근성을 돕기 위해 링크(기본적으로)에 포커스 관리가 추가되는 방식을 확인할 수 있습니다.

차크라 UI 테스트하기

마지막으로 Lighthouse 접근성 테스트를 실행하여 앱의 점수를 매기는 방법을 살펴보겠습니다. 이 테스트는 Ax 사용자 영향 평가를 기반으로 합니다. 아래는 테스트 화면입니다. 다음 단계에 따라 테스트를 직접 실행할 수도 있습니다.

위의 스크린캐스트에서 Chakra UI 앱이 등대 접근성 테스트에서 85 점을 받은 것을 볼 수 있습니다.

결론

이 기사에서 우리는 접근 가능한 인터페이스를 구축해야 할 필요성에 대해 다루었고 또한 Chakra UI 구성 요소에 대한 탐색기(Chakra-ui 탐색기)를 구축하여 처음부터 접근 가능한 애플리케이션을 구축하기 위해 Chakra UI를 사용하는 방법을 보았습니다.

• Netlify에서 라이브 애플리케이션 보기 →
• 리포지토리 링크 →