accessible astro components
v3.0.1
Um conjunto de componentes de interface do usuário de front-end acessíveis, fáceis de usar para o Astro. A maioria desses componentes é usada no Astro Starter acessível e nos temas de painel Astro acessíveis e fornecem casos de uso exemplares para esses componentes. Como bônus, esses temas também têm seus próprios componentes dedicados (como navegações acessíveis e responsivas do teclado) e muitas classes, padrões e primitivos de utilitários de sistemas de design (como grades, botões, listas, espaçamentos, tamanhos e muito mais).
Visualização ao vivo
Execute o seguinte comando na pasta do seu projeto para começar:
npm install accessible-astro-components --save-dev Você pode importar os diferentes componentes do pacote usando a seguinte instrução de importação:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---Pule para : Acordeão, farinha de rosca, cartão, Darkmode, Mídia, Modal, Notificação, Paginação, Skiplinks
Os acordeões são ótimos para agrupar grandes pedaços de conteúdo em cabeçalhos mais fáceis de digitalizar que o usuário pode expandir quando deseja ler o que está associado a esse cabeçalho. Este componente usa os elementos HTML <details> e <summary> nativos para acessibilidade e funcionalidade interno.
Alguns recursos (acessibilidade) do acordeão :
nameallow-discrete e allow-keywords no elemento pseudo ::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 >AcordeionItem
title (requerido): o texto mostrado no cabeçalho do acordeãoname (Opcional): Nome do grupo para comportamento exclusivo - itens com o mesmo nome fecharão outros quando abertochildren : o conteúdo mostrado quando o acordeão é expandido Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .accordion__item) , por exemplo, ou configurar uma tag de estilo global e definir seus estilos lá:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >As migalhas são uma ótima maneira de ajudar os usuários a voltar para uma página ou seção anterior. Eles também são uma ótima maneira de ajudar os usuários de leitor a tela a entender onde estão no site.
Alguns recursos (acessibilidade) das farinhas de pão :
aria-label="Breadcrumbs"<nav> para informar aos usuários dos leitores de tela que este é um elemento de navegação ---
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 > Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .breadcrumbs__item) , por exemplo, ou configurar uma tag de estilo global e definir seus estilos lá:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > Os cartões geralmente são usados em grupos. Ao envolvê -los em uma lista não ordenada, fornecemos aos usuários de leitor de tela atalhos para listas e itens de listagem. Os leitores de tela também informam aos usuários quantos itens existem em uma lista. No exemplo abaixo, você encontrará a estrutura usando uma lista e display: grid , certificando -se de deixar uma lacuna suficiente entre os cartões em dispositivos de toque para pessoas que acham que têm baixa precisão ao segmentar itens, incluindo aqueles com doença de Parkinson e reumatismo. Deixar uma lacuna maior facilita a rolagem sem ativar acidentalmente um link de cartões.
Alguns recursos (acessibilidade) do cartão :
<a> ::after o elemento pseudo<h3> para que possa ser usado em muitos contextos ( <h2> seria muito limitandomax-width é definida como 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 > Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .card) , por exemplo, ou configurar uma etiqueta de estilo global e definir seus estilos lá:
< 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 é um componente de botão de alternância para adicionar e remover uma classe de .darkmode ao <body> com base na preferência do usuário por um esquema de cores claro ou escuro. A preferência do usuário é salva no localStorage para preservar sua escolha para futuras visitas.
Alguns recursos (acessibilidade) do DarkMode :
aria-pressed para indicar para a tela dos usuários dos leitores se o esquema escuro está alterado ou nãoaria-label Saria-hidden para esconder os ícones para o modo escuro e claro e usa os aria-labels s em vezcolor-scheme para light ou dark com base na preferência do usuário para que você possa usar a função light-dark() em seu CSS initialMode (Opcional): define o esquema de cores inicial. Aceita 'light' , 'dark' ou 'auto' (padrão: 'auto' )'light' : força o modo de luz na primeira visita'dark' : força o modo escuro na primeira visita'auto' : usa preferências do sistema na primeira visita ---
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 > NOTA: Após a primeira visita, a preferência escolhida pelo usuário será salva no LocalSorage e terá precedência sobre a configuração initialMode .
A mídia é um componente muito simples usado para tags <img> . Possui uma tag alt vazia padrão necessária para imagens não decorativas. Se a imagem for descritiva, por exemplo, quando não houver texto (complementar), você deve sempre escrever uma boa tag alt descritiva. O componente de mídia também utiliza a etiqueta loading="lazy" para otimizar o desempenho do lado dos navegadores.
Alguns recursos (acessibilidade) da mídia :
alt vazia padrão que é sempre necessária para imagens não descritivas. ---
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 "
/> Os modais são janelas que aparecem na parte superior da tela pai, geralmente desativando o uso da tela pai e exigindo ações imediatas do usuário. Este componente usa o elemento HTML <dialog> nativo para acessibilidade e funcionalidade interno, aprimorado com transições suaves.
Alguns recursos (acessibilidade) do modal :
<dialog> para acessibilidade internaid e aria-labeledby@starting-style e 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 > Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .modal) , por exemplo, ou configurar uma etiqueta de estilo global e definir seus estilos lá:
< 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 > As notificações são frequentemente usadas para manter o usuário atualizado sobre a alteração do estado em um site ou aplicativo. Eles também podem ser usados como uma maneira geral de exibir algumas informações destacadas em um artigo, por exemplo. Existem duas regras práticas quando se trata de notificações e essas devem sempre adicionar informações contextuais sobre a notificação (como começar com "dica:", "informações:", "erro:") e ao adicionar uma notificação ao DOM em resposta a uma ação do usuário, você sempre deve usar role="status" e aria-live="polite" para informar os usuários do Screen Reader. Para adicionar alguns visuais extras, você pode combinar o componente de notificação com o ícone Astro.
Alguns recursos (acessibilidade) da notificação :
role="status" e 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 > Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .notification) , por exemplo, ou configurar uma tag de estilo global e definir seus estilos lá:
< 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 >Um componente de paginação bastante simples, mas eficaz, que possui um primeiro, anterior, próximo e na última página da última página. Ele também informa ao usuário quantas páginas existem e em que página elas estão atualmente. O componente de paginação também é totalmente acessível e navegável no teclado.
Alguns recursos (acessibilidade) da paginação :
aria-label s para dizer ao usuário se eles irão para a página anterior ou a próxima página e qual número de páginaaria-hidden para ocultar os ícones para as páginas anteriores e nas próximas ---
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 ) }
/> Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .pagination) , por exemplo, ou configurar uma etiqueta de estilo global e definir seus estilos lá:
< 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 > O Skiplinks fornece uma maneira de os usuários que usam tecnologias assistentes para pular conteúdo repetido nas páginas para ir diretamente para o conteúdo principal de um site ou aplicativo. Para usar esse componente corretamente, certifique-se de fornecer ao conteúdo principal do seu projeto um id do #main-content para que o Skiplink possa segmentar. Como fallback, o skiplink tentará direcionar o h1 da página. Se nenhum deles for encontrado, um aviso será registrado no console.
Alguns recursos (acessibilidade) dos skiplinks :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .skiplinks) , por exemplo, ou configurar uma tag de estilo global e definir seus estilos lá:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >Um componente de guias totalmente acessível que segue as diretrizes da WAI-ARIA. As guias são uma ótima maneira de organizar o conteúdo em diferentes seções, permitindo que os usuários alternem entre eles facilmente.
Alguns recursos (acessibilidade) das guias :
id , aria-controls e 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 >Guias
class - String opcional para classes CSS adicionaisTabslist
class - String opcional para classes CSS adicionaisTabstab
id - String necessária para identificação de guia exclusivacontrols - String necessária correspondendo ao ID do painel Esta guia controlaselected - booleano opcional para definir o estado selecionado inicialclass - String opcional para classes CSS adicionaisTabSpanel
id - String necessária para identificação exclusiva do painellabelledby - String necessária correspondendo ao ID da guia que rotula este painelselected - booleano opcional para definir o estado selecionado inicialclass - String opcional para classes CSS adicionais Você pode aplicar seus próprios estilos, definindo as propriedades individuais usando :global(body .tabs) , por exemplo, ou configurar uma etiqueta de estilo global e definir seus estilos lá:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >Se você achar que algo não está funcionando, então sempre fico feliz em ouvi -lo para melhorar esses componentes! Você pode contribuir de várias maneiras e formas. Deixe -me saber por:
Gostaria de estender minha gratidão aos criadores do Astro e a todos aqueles que utilizaram esses componentes e compartilharam informações valiosas para aprimorar a acessibilidade da Web em todo o mundo. Além disso, gostaria de reconhecer as contribuições de figuras notáveis na comunidade de desenvolvimento da web, incluindo Zell Liew com Learn JavaScript Today e Heydon Pickering, o autor de componentes inclusivos, entre outros. Agradecimentos especiais a todos os contribuintes deste repositório, com um reconhecimento particular para David Abell, cujas contribuições substanciais, como a adição de suporte datilografado, beneficiaram bastante o projeto. Seus esforços coletivos são muito apreciados!
