accessible astro components
v3.0.1
Un conjunto de componentes de UI accesibles, fáciles de usar y front-end para Astro. La mayoría de estos componentes se usan en el arranque Astro accesible y los temas accesibles del tablero Astro y proporcionan casos de uso ejemplares para estos componentes. Como beneficio adicional, estos temas también tienen sus propios componentes dedicados (como las navegaciones accesibles y receptivas para el teclado) y muchas clases de utilidades de diseño , patrones y primitivos (como cuadrículas, botones, listas, espacios, tamaños y más).
Vista previa en vivo
Ejecute el siguiente comando en la carpeta de su proyecto para comenzar:
npm install accessible-astro-components --save-dev Puede importar los diferentes componentes del paquete utilizando la siguiente declaración de importación:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---Saltar a : acordeón, migas de pan, tarjeta, moderno, medios, modales, notificación, paginación, omitirlinks
Los acordeones son excelentes para agrupar grandes fragmentos de contenido en encabezados más fáciles de escanear que el usuario puede expandir cuando desea leer lo que está asociado con ese encabezado. Este componente utiliza los elementos HTML nativos <details> y <summary> para la accesibilidad y la funcionalidad incorporadas.
Algunas características (accesibilidad) del acordeón :
nameallow-discrete y allow-keywords en el 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 >Acordeón
title (requerido): el texto que se muestra en el encabezado de acordeónname (opcional): Nombre del grupo para un comportamiento exclusivo: los elementos con el mismo nombre cerrarán otros cuando se abranchildren : el contenido que se muestra cuando se expande el acordeón Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .accordion__item) , por ejemplo, o configura una etiqueta de estilo global y defina sus estilos allí:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >Las migas de pan son una excelente manera de ayudar a los usuarios a navegar a una página o sección anterior. También son una excelente manera de ayudar a los usuarios de lector de pantalla a comprender dónde están en el sitio web.
Algunas características (accesibilidad) de las migas de pan :
aria-label="Breadcrumbs"<nav> para decirle a los usuarios de lectores de pantalla que este es un elemento de navegación ---
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 > Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .breadcrumbs__item) , por ejemplo, o configure una etiqueta de estilo global y defina sus estilos allí:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > Las tarjetas generalmente se usan en grupos. Al envolverlos en una lista desordenada, proporcionamos a los usuarios de los lectores de pantalla con acceso directo a listas y elementos de la lista. Los lectores de pantalla también les informan a los usuarios cuántos elementos hay en una lista. En el siguiente ejemplo, encontrará la estructura utilizando una lista y display: grid , asegurándose de que dejemos una brecha suficiente entre las tarjetas en dispositivos táctiles para las personas que encuentran con poca precisión al atacar elementos, incluidos aquellos con enfermedad y reumatismo de Parkinson. Dejar una brecha más grande hace que sea más fácil desplazarse sin activar accidentalmente un enlace de tarjetas.
Algunas características (accesibilidad) de la tarjeta :
<a> ::after del elemento pseudo<h3> por lo que se puede usar en muchos contextos ( <h2> sería demasiado limitantemax-width se establece en 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 > Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .card) , por ejemplo, o configurar una etiqueta de estilo global y definir sus estilos allí:
< 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 es un componente de botón de palanca para agregar y eliminar una clase de .darkmode al <body> basado en la preferencia del usuario por un esquema de color claro o oscuro. La preferencia del usuario se guarda en el localStorage para preservar su elección para futuras visitas.
Algunas características (accesibilidad) del DarkMode :
aria-pressed para indicar a los usuarios del lector de pantalla si el esquema oscuro está alternado o noaria-label Saria-hidden para ocultar los iconos para el modo oscuro y de luz y utiliza las aria-labels S en su lugarcolor-scheme en light o dark según la preferencia del usuario para que pueda usar la función light-dark() en su CSS initialMode (opcional): establece el esquema de color inicial. Acepta 'light' , 'dark' o 'auto' (predeterminado: 'auto' )'light' : Fuerza el modo de luz en la primera visita'dark' : Fuerza el modo oscuro en la primera visita'auto' : utiliza preferencias del sistema en la primera 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: Después de la primera visita, la preferencia elegida del usuario se guardará en LocalStorage y tendrá prioridad sobre la configuración initialMode .
Media es un componente muy simple utilizado para etiquetas <img> . Tiene una etiqueta alt vacía predeterminada que se requiere para imágenes no decorativas. Si la imagen es descriptiva, por ejemplo, cuando no hay texto (complementario), entonces siempre debe escribir una buena etiqueta alt descriptiva. El componente de medios también utiliza la etiqueta loading="lazy" para optimizar el rendimiento desde el lado de los navegadores.
Algunas características (accesibilidad) de los medios :
alt vacía predeterminada que siempre es necesaria para imágenes no descriptivas. ---
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 "
/> Los modales son ventanas que aparecen en la parte superior de la pantalla principal, generalmente deshabilitando el uso de la pantalla principal y exigiendo una acción inmediata del usuario. Este componente utiliza el elemento HTML nativo <dialog> para la accesibilidad y la funcionalidad incorporadas, mejoradas con transiciones suaves.
Algunas características (accesibilidad) del modal :
<dialog> para la accesibilidad incorporadaid y aria-labeledby@starting-style y 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 > Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .modal) , por ejemplo, o configurar una etiqueta de estilo global y definir sus estilos allí:
< 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 > Las notificaciones a menudo se usan para mantener al usuario actualizado sobre el cambio de estado en un sitio web o aplicación. También se pueden utilizar como una forma general de mostrar alguna información resaltada en un artículo, por ejemplo. Hay dos reglas generales cuando se trata de notificaciones y esas siempre deben agregar información contextual sobre la notificación (como comenzar con "consejo:", "información:", "error:") y al agregar una notificación al DOM en respuesta a una acción del usuario, siempre debe usar role="status" y aria-live="polite" para informar a los usuarios de lector de pantalla. Para agregar algunas imágenes adicionales, puede combinar el componente de notificación con el icono Astro.
Algunas características (accesibilidad) de la notificación :
role="status" y 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 > Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .notification) Por ejemplo, o configurar una etiqueta de estilo global y definir sus estilos allí:
< 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 >Un componente de paginación bastante simple pero efectivo que tiene un botón primero, anterior, siguiente y de la última página. También le dice al usuario cuántas páginas hay y en qué página se encuentran actualmente. El componente de paginación también es totalmente accesible y navegable con el teclado.
Algunas características (accesibilidad) de la paginación :
aria-label S para decirle al usuario si irá a la página anterior o siguiente y qué número de páginaaria-hidden para ocultar los iconos para las páginas anteriores y 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 ) }
/> Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .pagination) , por ejemplo, o configurar una etiqueta de estilo global y definir sus estilos allí:
< 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 proporciona una forma para que los usuarios que usan tecnologías de asistencia omiten contenido repetido en las páginas para ir directamente al contenido principal de un sitio web o aplicación. Para usar este componente correctamente, asegúrese de darle al contenido principal de su proyecto una id de #main-content para que el Skiplink pueda apuntarlo. Como alojamiento, el Skiplink intentará apuntar al h1 de la página. Si ninguno se encuentra, se registrará una advertencia a la consola.
Algunas características (accesibilidad) de los skiplinks :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .skiplinks) , por ejemplo, o configura una etiqueta de estilo global y defina sus estilos allí:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >Un componente de pestañas totalmente accesible que sigue las pautas de Wai-Aria. Las pestañas son una excelente manera de organizar el contenido en diferentes secciones, lo que permite a los usuarios cambiar entre ellos fácilmente.
Algunas características (accesibilidad) de las pestañas :
id , aria-controls y 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 >Cortina a la italiana
class : cadena opcional para clases CSS adicionalesPestaña
class : cadena opcional para clases CSS adicionalesTabstab
id - Cadena requerida para una identificación de pestaña únicacontrols : una cadena requerida que coincida con el ID del panel esta pestaña Controlesselected - booleano opcional para establecer el estado seleccionado inicialclass : cadena opcional para clases CSS adicionalesTabspanel
id - Cadena requerida para una identificación única del panellabelledby : una cadena requerida coincide con la ID de pestaña que etiqueta este panelselected - booleano opcional para establecer el estado seleccionado inicialclass : cadena opcional para clases CSS adicionales Puede aplicar sus propios estilos estableciendo las propiedades individuales utilizando :global(body .tabs) , por ejemplo, o configurar una etiqueta de estilo global y definir sus estilos allí:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >Si descubres que algo no funciona bien, ¡siempre estoy feliz de escucharlo para mejorar estos componentes! Puede contribuir de muchas maneras y formas. Avísame por cualquiera de los dos:
Me gustaría extender mi gratitud a los creadores de Astro y todos aquellos que han utilizado estos componentes y compartieron ideas valiosas para mejorar la accesibilidad web en todo el mundo. Además, me gustaría reconocer las contribuciones de figuras notables en la comunidad de desarrollo web, incluida Zell Liew de Learn JavaScript Today y Heydon Pickering, el autor de los componentes inclusivos, entre otros. Un agradecimiento especial a todos los contribuyentes a este repositorio, con un reconocimiento particular por David Abell, cuyas contribuciones sustanciales, como la adición de soporte mecanografiado, han beneficiado enormemente el proyecto. ¡Sus esfuerzos colectivos son muy apreciados!
