accessible astro components
v3.0.1
Набор доступных, простых в использовании компонентов пользовательского интерфейса для Astro. Большинство из этих компонентов используются в доступном стартере Astro и доступных темах приборной панели Astro, и они предоставляют образцовые варианты использования для этих компонентов. В качестве бонуса, эти темы также имеют свои собственные специальные компоненты (такие как доступные и отзывчивые навигации клавиатуры) и многие классы утилиты систем проектирования , шаблоны и примитивы (такие как сетки, кнопки, списки, пространства, размеры и многое другое).
Живой предварительный просмотр
Запустите следующую команду в папке проекта, чтобы начать:
npm install accessible-astro-components --save-dev Вы можете импортировать различные компоненты из пакета, используя следующий оператор Import:
---
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 >Accordionitem
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 псевдо -элемента<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 - это компонент кнопки Toggle для добавления и удаления класса .darkmode в <body> на основе предпочтения пользователя либо световой, либо темной цветовой схемы. Предпочтение пользователя сохраняется в localStorage , чтобы сохранить свой выбор для будущих посещений.
Некоторые (доступность) функции DarkMode :
aria-pressed чтобы указать пользователям чтения экрана.aria-labelaria-hidden чтобы скрыть значки для темного и светового режима, и вместо этого использует aria-labelscolor-scheme на light или dark в зависимости от предпочтения пользователя, чтобы вы могли использовать функцию light-dark() в вашем CSS 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 "
/> Модалы - это окна, которые появляются в верхней части экрана родительского, обычно отключая использование родительского экрана и требуют немедленных действий от пользователя. В этом компоненте используется собственный элемент 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 > Уведомления часто используются для обновления пользователя об изменении состояния на веб -сайте или приложении. Они также могут использоваться в качестве общего способа отображения некоторой выделенной информации в статье, например. Когда речь заходит о уведомлениях, есть два правила, и они всегда должны добавлять контекстную информацию о уведомлении (например, начиная с «TIP:», «Информация:», «Ошибка:» и при добавлении уведомления в DOM в ответ на действие пользователя, вы всегда должны использовать role="status" и aria-live="polite" чтобы сообщить пользователям читателя экрана. Чтобы добавить некоторые дополнительные визуальные эффекты, вы можете объединить компонент уведомлений с Astro Icon.
Некоторые (доступность) функции уведомления :
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 >Довольно простой, но эффективный компонент страниц, который имеет первую, предыдущую, следующую и последнюю страницу. Он также сообщает пользователю, сколько страниц и на какой странице они в настоящее время. Компонент страниц также полностью доступен, а клавишная навигация.
Некоторые (доступность) функции страниц :
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 > Skiplinks предоставляет пользователям возможность, использующие вспомогательные технологии для пропуска повторного контента на страницах, чтобы перейти непосредственно к основному содержанию веб -сайта или приложения. Чтобы правильно использовать этот компонент, убедитесь, что вы даете основному содержанию вашего проекта id #main-content , чтобы Skiplink могла нацелиться на него. В качестве запасного, Skiplink попытается нацелиться на h1 страницы. Если ни один из них не найден, предупреждение будет зарегистрировано в консоли.
Некоторые (доступность) функции Skiplinks :
---
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 - необязательная строка для дополнительных классов CSSTabslist
class - необязательная строка для дополнительных классов CSSTabStab
id - требуемая строка для уникальной идентификации вкладкиcontrols - Требуемая строка, соответствующая идентификатору панели, эта вкладка управляетselected - необязательный логическийclass - необязательная строка для дополнительных классов CSSTabSpanel
id - требуемая строка для уникальной идентификации панелиlabelledby - требуется строкаselected - необязательный логическийclass - необязательная строка для дополнительных классов CSS Вы можете применить свои собственные стили, либо установив индивидуальные свойства, используя, например :global(body .tabs) , либо настроив тег глобального стиля и определите свои стили:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >Если вы обнаружите, что что -то не работает, я всегда рад услышать это, чтобы улучшить эти компоненты! Вы можете внести свой вклад во многих отношениях и формах. Дайте мне знать по любому:
Я хотел бы выразить свою благодарность создателям Astro и всем тем, кто использовал эти компоненты и общую ценную информацию для повышения доступности веб -сайтов по всему миру. Кроме того, я хотел бы отметить вклад известных цифр в сообществе веб -разработчиков, в том числе Zell Liew из Learn JavaScript сегодня и Хейдон Пикеринг, автор Inclusive Components, среди других. Особая благодарность всем участникам этого хранилища, с особым признанием Дэвида Абелла, чей существенный вклад, такие как добавление поддержки TypeScript, значительно принесло пользу проекту. Ваши коллективные усилия высоко ценятся!
