accessible astro components
v3.0.1
Astro 용 접근 가능하고 사용하기 쉬운 프론트 엔드 UI 구성 요소 세트. 이러한 구성 요소의 대부분은 액세스 가능한 Astro 스타터 및 액세스 가능한 Astro 대시 보드 테마에 사용되며 이러한 구성 요소에 대한 예시적인 사용 사례를 제공합니다. 보너스로서 이러한 테마에는 자체 전용 구성 요소 (키보드 액세스 및 반응 형 탐색)와 많은 설계 시스템 유틸리티 클래스, 패턴 및 프리미티브 (예 : 그리드, 버튼, 목록, 간격, 크기 등)가 있습니다.
라이브 미리보기
시작하려면 프로젝트 폴더에서 다음 명령을 실행하십시오.
npm install accessible-astro-components --save-dev 다음 가져 오기 명령문을 사용하여 패키지에서 다른 구성 요소를 가져올 수 있습니다.
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---건너 뛰기 : 아코디언, 빵 부스러기, 카드, 암시, 미디어, 모달, 알림, 페이지 매김, 스킵 링크
아코디언은 큰 컨텐츠 덩어리를 더 쉽게 스캔하는 헤더로 그룹화하는 데 좋습니다.이 헤더와 관련된 내용을 읽을 때 사용자가 확장 할 수 있습니다. 이 구성 요소는 내장 접근성 및 기능을 위해 기본 HTML <details> 및 <summary> 요소를 사용합니다.
아코디언의 일부 (접근성) 특징 :
name 소품을 사용한 선택적 독점 동작allow-discrete 및 allow-keywords ::details-content 하여 개방 상태와 폐쇄 상태 간의 점진적으로 향상된 전환 ---
import { Accordion , AccordionItem } from ' accessible-astro-components '
---
< Accordion >
< AccordionItem
title = " First Item "
>
< p >Lorem ipsum dolor sit amet consectetur adipisicing elit.</ p >
< a href = " # " >Tab to me!</ a >
</ AccordionItem >
<!-- Items in the same group will close others when opened -->
< AccordionItem
name = " group1 "
title = " Second Item "
>
< p >Content for second item</ p >
</ AccordionItem >
< AccordionItem
name = " group1 "
title = " Third Item "
>
< p >Content for third item</ p >
</ AccordionItem >
</ Accordion >아코디언
title (필수) : 아코디언 헤더에 표시된 텍스트name (선택 사항) : 독점 동작의 그룹 이름 - 같은 이름을 가진 항목은 열 때 다른 사람이 닫힙니다.children : 아코디언이 확장 될 때 보여지는 내용 예를 들어 :global(body .accordion__item) 사용하여 개별 속성을 설정하여 자신의 스타일을 적용하거나 글로벌 스타일 태그를 설정하고 스타일을 정의 할 수 있습니다.
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >빵 부스러기는 사용자가 이전 페이지 나 섹션으로 다시 탐색하는 데 도움이되는 좋은 방법입니다. 또한 스크린 리더 사용자가 웹 사이트의 위치를 이해하는 데 도움이되는 좋은 방법입니다.
빵 부스러기의 일부 (접근성) 특징 :
aria-label="Breadcrumbs" 로 독자 사용자를 스크리닝하는 콘텐츠를 식별하는 데 도움이됩니다.<nav> 요소를 사용하여 스크린 리더에게 사용자에게 이것이 내비게이션 요소라고 알려줍니다. ---
import { Breadcrumbs , BreadcrumbsItem } from ' accessible-astro-components '
---
< Breadcrumbs >
< BreadcrumbsItem
href = " / "
label = " Home "
/>
< BreadcrumbsItem
href = " /blog "
label = " Blog "
/>
< BreadcrumbsItem
currentPage = { true }
label = " My blog post "
/>
</ Breadcrumbs > 예를 들어 :global(body .breadcrumbs__item) 사용하여 개별 속성을 설정하여 자신의 스타일을 적용하거나 글로벌 스타일 태그를 설정하고 스타일을 정의 할 수 있습니다.
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > 카드는 일반적으로 그룹으로 사용됩니다. 반대 목록으로 래핑하면 스크린 리더 사용자에게 항목 목록 및 목록에 바로 가기를 제공합니다. 스크린 리더는 또한 목록에 몇 개의 항목이 있는지 사용자에게 알립니다. 아래의 예에서는 정렬되지 않은 목록과 display: grid 파킨슨 병 및 류머티즘을 포함하여 항목을 타겟팅 할 때 정확도가 낮은 사람들을 위해 터치 장치의 카드 사이에 충분한 간격을 남기도록합니다. 더 큰 간격을 남기면 실수로 카드 링크를 활성화하지 않고 스크롤하기가 더 쉬워집니다.
카드의 일부 (접근성) 기능 :
<a> ::after pseudo 요소를 사용하여 클릭 할 수 있습니다.<h3> 이므로 많은 상황에서 사용할 수 있습니다 ( <h2> 는 너무 제한적입니다.max-width 70ch 로 설정됩니다. ---
import { Card } from ' accessible-astro-components '
---
< ul >
< li >
< Card
url = " /link-to-my-post "
img = " /assets/post-cover.jpg "
title = " My Awesome Post "
footer = " Tony Stark "
>
Lorem ipsum dolor sit amet.
</ Card >
</ li >
< li >
<!-- ... -->
</ li >
</ ul >
< style lang="scss">
ul {
display : grid ;
grid-template-columns : 1 fr ;
grid-gap : 4 rem ;
@media ( min-width : 550 px ) {
grid-template-columns : repeat ( 2 , 1 fr );
grid-gap : 2 rem ;
}
@media ( min-width : 950 px ) {
grid-template-columns : repeat ( 3 , 1 fr );
}
}
</ style > 예를 들어 :global(body .card) 사용하여 개별 속성을 설정하여 자신의 스타일을 적용하거나 글로벌 스타일 태그를 설정하고 거기에서 스타일을 정의 할 수 있습니다.
< style lang="scss" is:global>
body .card {
color : purple ;
background-color : blue ;
a {
color : gold ;
}
}
// set your own image height
.card__image {
height : 10 rem ;
}
</ style > DarkMode는 거대한 색 구성표 또는 어두운 색 구성표에 대한 사용자의 선호도를 기반으로 .darkmode 클래스를 <body> 에 추가하고 제거하는 토글 버튼 구성 요소입니다. 사용자의 선호도는 향후 방문을위한 선택을 보존하기 위해 localStorage 에 저장됩니다.
DarkMode의 일부 (접근성) 기능 :
aria-pressed 사용하여 Dark Stand가 토글링되었는지 여부를 독자 사용자에게 스크린에 표시합니다.aria-label S를 사용하여 주 상태가되는 스크린 리더 사용자에게 피드백을 제공합니다.aria-hidden 사용하여 어두운 및 조명 모드의 아이콘을 숨기고 대신 aria-labels 사용합니다.light-dark() 함수를 사용할 수 있도록 사용자의 선호도를 기준으로 color-scheme light 또는 dark 으로 설정합니다. initialMode (선택 사항) : 초기 색 구성표를 설정합니다. 'light' , 'dark' 또는 'auto' 허용합니다 (기본값 : 'auto' )'light' : 첫 방문시 표시등 모드'dark' : 첫 방문시 어두운 모드를 강요합니다'auto' : 첫 방문시 시스템 환경 설정을 사용합니다 ---
import { DarkMode } from ' accessible-astro-components '
---
<!-- Uses system preferences by default -->
< DarkMode />
<!-- Forces dark mode on first visit -->
< DarkMode initialMode = " dark " />
<!-- Forces light mode on first visit -->
< DarkMode initialMode = " light " />< style lang="scss">
body .darkmode {
// define your dark color scheme
}
</ style > 참고 : 첫 방문 후 사용자의 선택된 환경 설정은 LocalStorage에 저장되며 initialMode 설정보다 우선합니다.
미디어는 <img> 태그에 사용되는 매우 간단한 구성 요소입니다. 비전식 이미지에 필요한 기본 빈 alt 태그가 있습니다. 예를 들어 (보완적인) 텍스트가 없을 때 이미지가 설명 적이라면 항상 좋은 설명적인 alt 태그를 작성해야합니다. 미디어 구성 요소는 또한 loading="lazy" 태그를 사용하여 브라우저 측에서 성능을 최적화합니다.
미디어의 일부 (접근성) 기능 :
alt 태그를 설정합니다. ---
import { Media } from ' accessible-astro-components '
---
< Media
classes = " elevation-300 radius-large "
src = " https://unsplash.com/photos/d0oYF8hm4GI "
alt = " A tiny toy astronaut, sitting on a yellow toy moon "
/> 모달은 상위 화면 위에 나타나는 Windows이며, 일반적으로 상위 화면의 사용을 비활성화하고 사용자의 즉각적인 조치를 요구합니다. 이 구성 요소는 원활한 전환으로 향상된 접근성 및 기능에 기본 HTML <dialog> 요소를 사용합니다.
모달의 일부 (접근성) 기능 :
<dialog> 요소를 사용합니다id 와 aria-labeledby 사용하여 트리거 요소와 모달 연결@starting-style 및 allow-discrete 사용한 부드러운 전환 ---
import { Modal } from ' accessible-astro-components '
---
< button id = " modal1-trigger " >Modal 1</ button >
< button id = " modal2-trigger " >Modal 2</ button >
< Modal
triggerId = " modal1-trigger "
title = " Modal 1 "
>
< p >Why hello, I be the < strong >first</ strong > Modal.</ p >
</ Modal >
< Modal
triggerId = " modal2-trigger "
title = " Modal 2 "
closeText = " Cancel "
>
< p >Ah yes, and I be the < strong >second</ strong > Modal.</ p >
<!--
calls the closeModal() function, you can also use this
as a callback in your own function
-->
< button onclick = " closeModal () " >Confirm action</ button >
</ Modal > 예를 들어 :global(body .modal) 사용하여 개별 속성을 설정하거나 전역 스타일 태그를 설정하고 스타일을 정의하여 자신의 스타일을 적용 할 수 있습니다.
< style lang="scss" is:global>
body {
.modal {
color : purple ;
background-color : gold ;
}
.modal__inner {
border-color : orange ;
}
.modal__content {
gap : 1.5 rem ;
padding : 1 rem ;
}
.modal__close button {
color : white ;
background-color : blue ;
& :hover ,
& :focus {
background-color : green ;
}
}
}
</ style > 알림은 종종 웹 사이트 또는 응용 프로그램에서 상태 변경에 대한 사용자를 업데이트하는 데 사용됩니다. 예를 들어 기사에 강조 표시된 정보를 표시하는 일반적인 방법으로 사용될 수도 있습니다. 알림과 관련하여 두 가지 엄지 규칙이 있으며, 그 알림에 대한 문맥 정보를 항상 추가해야합니다 (예 : "팁 :", "정보 :"오류 : ")로 시작하고 사용자 조치에 응답하여 DOM에 알림을 추가 할 때는 항상 role="status" 및 aria-live="polite" 를 사용해야합니다. 여분의 비주얼을 추가하려면 알림 구성 요소를 Astro 아이콘과 결합 할 수 있습니다.
알림의 일부 (접근성) 기능 :
role="status" 및 aria-live="polite" 로 리더 사용자가 스크린 리더 사용자에게 컨텐츠를 식별하는 데 도움이됩니다. ---
import { Notification } from ' accessible-astro-components '
---
< Notification
type = " info "
>
< p >< strong >Info:</ strong > This is a notification of type info.</ p >
</ Notification >
<!-- example using Astro Icon -->
< Notification
type = " info "
>
< Icon pack = " ion " name = " information-circle-outline " />< p >< strong >Info:</ strong > This is a notification of type info.</ p >
</ Notification >
<!-- when added to the DOM after a user interaction -->
< Notification
type = " info "
role = " status "
aria-live = " polite "
>
< p >< strong >Info:</ strong > This is a notification of type info.</ p >
</ Notification > 예를 들어 :global(body .notification) 사용하여 개별 속성을 설정하여 자신의 스타일을 적용하거나 전역 스타일 태그를 설정하고 스타일을 정의 할 수 있습니다.
< style lang="scss" is:global>
body {
.notification {
color : var ( --neutral-900 , #202427 );
background-color : var ( --neutral-200 , #f6f8f9 );
border : 2 px solid var ( --neutral-600 , #858d93 );
& .type-info {
color : var ( --info-900 , #035486 );
background-color : var ( --info-100 , #e0f7ff );
border-color : var ( --info-600 , #1a91d1 );
}
& .type-success {
color : var ( --success-900 , #014b3e );
background-color : var ( --success-100 , #eefcf6 );
border-color : var ( --success-500 , #28a980 );
}
& .type-warning {
color : var ( --warning-900 , #8e2a0b );
background-color : var ( --warning-100 , #fffbeb );
border-color : var ( --warning-600 , #dc901e );
}
& .type-error {
color : var ( --error-900 , #5e0317 );
background-color : var ( --error-100 , #ffe0e0 );
border-color : var ( --error-500 , #df2a39 );
}
}
}
</ style >첫 번째, 이전, 다음 및 마지막 페이지 버튼이있는 상당히 간단하면서도 효과적인 페이지 매김 구성 요소입니다. 또한 사용자에게 몇 페이지가 얼마나 있고 현재 중이 있는지 알려줍니다. Pagination 구성 요소도 완전히 액세스 할 수 있으며 키보드 탐색 가능합니다.
페이지 매김의 일부 (접근성) 특징 :
aria-label s를 사용하여 사용자에게 이전 페이지 또는 다음 페이지로 이동하는지 및 페이지 번호로 이동하는지 알려줍니다.aria-hidden 사용하여 이전 및 다음 페이지의 아이콘을 숨 깁니다. ---
import { Pagination } from ' accessible-astro-components '
---
< Pagination
firstPage = " /1 "
previousPage = " /4 "
nextPage = " /6 "
lastPage = " /10 "
currentPage = " /5 "
totalPages = " 10 "
/> ---
import { Pagination } from ' accessible-astro-components '
export async function getStaticPaths({ paginate }) {
const response = await fetch ( ' https://jsonplaceholder.typicode.com/posts ' )
const data = await response . json ()
return paginate ( data , { pageSize: 6 })
}
const { page } = Astro . props
---
< Pagination
firstPage = { page . url . prev ? ' /blog ' : null }
previousPage = { page . url . prev ? page . url . prev : null }
nextPage = { page . url . next ? page . url . next : null }
lastPage = { page . url . next ? ` /blog/${ Math . round ( page . total / page . size )} ` : null }
currentPage = { page . currentPage }
totalPages = { Math . round ( page . total / page . size ) }
/> 예를 들어 :global(body .pagination) 사용하여 개별 속성을 설정하거나 전역 스타일 태그를 설정하고 스타일을 정의하여 자신의 스타일을 적용 할 수 있습니다.
< style lang="scss" is:global>
body .pagination a {
svg path {
stroke : gold ;
}
& :hover ,
& :focus-visible {
background-color : purple ;
svg path {
stroke : white ;
}
}
.disabled {
border-color : red ;
opacity : 0.1 ;
}
}
</ style > SkikLinks는 사용자가 Assistive Technologies를 사용하여 페이지에서 반복 콘텐츠를 건너 뛰기 위해 웹 사이트 또는 응용 프로그램의 주요 컨텐츠로 직접 이동하는 방법을 제공합니다. 이 구성 요소를 올바르게 사용하려면 프로젝트의 기본 컨텐츠에 #main-content 의 id 제공하여 SkipLink가 대상이 될 수 있도록하십시오. 폴백으로 SkipLink는 페이지의 h1 타겟팅하려고합니다. 둘 다 발견되지 않으면 경고가 콘솔에 기록됩니다.
스킵 링크의 일부 (접근성) 기능 :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> 예를 들어 :global(body .skiplinks) 사용하여 개별 속성을 설정하여 자신의 스타일을 적용하거나 글로벌 스타일 태그를 설정하고 스타일을 정의 할 수 있습니다.
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >WAI-ARIA 가이드 라인을 따르는 완전히 액세스 가능한 탭 구성 요소. 탭은 컨텐츠를 다른 섹션으로 구성하는 좋은 방법으로 사용자가 쉽게 전환 할 수 있습니다.
탭의 일부 (접근성) 기능 :
id , aria-controls 및 aria-labelledby 사용하여 트리거 요소와 탭 연결 ---
import { Tabs , TabsList , TabsPanel , TabsTab } from ' accessible-astro-components '
---
< Tabs >
< TabsList >
< TabsTab id = " tab1 " controls = " panel1 " selected >Tab 1</ TabsTab >
< TabsTab id = " tab2 " controls = " panel2 " >Tab 2</ TabsTab >
< TabsTab id = " tab3 " controls = " panel3 " >Tab 3</ TabsTab >
</ TabsList >
< TabsPanel id = " panel1 " labelledby = " tab1 " selected >
< h2 >Panel 1</ h2 >
< p >Content for first panel</ p >
</ TabsPanel >
< TabsPanel id = " panel2 " labelledby = " tab2 " >
< h2 >Panel 2</ h2 >
< p >Content for second panel</ p >
</ TabsPanel >
< TabsPanel id = " panel3 " labelledby = " tab3 " >
< h2 >Panel 3</ h2 >
< p >Content for third panel</ p >
</ TabsPanel >
</ Tabs >탭
class - 추가 CSS 클래스의 선택적 문자열tabslist
class - 추가 CSS 클래스의 선택적 문자열Tabstab
id 고유 한 탭 식별에 필요한 문자열controls - 패널 ID와 일치하는 필수 문자열이 탭 컨트롤selected - 초기 선택된 상태를 설정하는 옵션 부울class - 추가 CSS 클래스의 선택적 문자열Tabspanel
id 고유 한 패널 식별에 필요한 문자열labelledby 이 패널에 레이블을 지정하는 탭 ID와 일치하는 필수 문자열selected - 초기 선택된 상태를 설정하는 옵션 부울class - 추가 CSS 클래스의 선택적 문자열 예를 들어 :global(body .tabs) 사용하여 개별 속성을 설정하거나 전역 스타일 태그를 설정하고 스타일을 정의하여 자신의 스타일을 적용 할 수 있습니다.
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >무언가가 제대로 작동하지 않는다는 것을 알게되면 항상 이러한 구성 요소를 개선하기 위해 듣게되어 기쁩니다! 여러 가지 방법과 형태로 기여할 수 있습니다. 다음 중 하나로 알려주세요.
Astro 제작자와 이러한 구성 요소를 활용 한 모든 사람들에게 감사를 표하고 전 세계적으로 웹 접근성을 향상시키기 위해 귀중한 통찰력을 공유하고 싶습니다. 또한 Learn JavaScript Today의 Zell Liew와 포괄적 인 구성 요소의 저자 인 Heydon Pickering을 포함하여 웹 개발 커뮤니티에서 주목할만한 인물의 공헌을 인정하고 싶습니다. David Abell에게 특히 인정받은이 저장소에 대한 모든 기고자들에게 특별한 감사를드립니다. 당신의 집단적 노력은 매우 감사합니다!
