accessible astro components
v3.0.1
Un ensemble de composants d'interface utilisateur accessibles et faciles à utiliser pour Astro. La plupart de ces composants sont utilisés dans le démarreur Astro accessible et les thèmes de tableau de bord Astro accessibles et ils fournissent des cas d'utilisation exemplaires pour ces composants. En prime, ces thèmes ont également leurs propres composants dédiés (comme les navigations accessibles et réactives au clavier) et de nombreuses classes de services de conception , motifs et primitives (tels que les grilles, les boutons, les listes, les espacements, les tailles et plus).
Aperçu en direct
Exécutez la commande suivante dans votre dossier de projet pour commencer:
npm install accessible-astro-components --save-dev Vous pouvez importer les différents composants à partir du package à l'aide de l'instruction d'importation suivante:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---Sautez vers : accordéon, chapelure, carte, moto, média, modal, notification, pagination, skiplinks
Les accordéons sont idéaux pour regrouper de gros morceaux de contenu en en-têtes plus faciles à scanner que l'utilisateur peut étendre lorsqu'il souhaite lire ce qui est associé à cet en-tête. Ce composant utilise les éléments natifs HTML <details> et <summary> pour l'accessibilité et les fonctionnalités intégrées.
Certaines fonctionnalités (accessibilité) de l'accordéon :
name propallow-discrete et allow-keywords sur l'élément 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 >Accordéonité
title (requis): le texte indiqué dans l'en-tête de l'accordéonname (facultatif): nom de groupe pour un comportement exclusif - les éléments du même nom feront fermer les autres lors de l'ouverturechildren : le contenu montré lorsque l'accordéon est élargi Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .accordion__item) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >La chapelure est un excellent moyen d'aider les utilisateurs à retourner vers une page ou une section précédente. Ils sont également un excellent moyen d'aider les utilisateurs des lecteurs à comprendre où ils se trouvent sur le site Web.
Certaines fonctionnalités (accessibilité) de la chapelure :
aria-label="Breadcrumbs"<nav> pour dire aux utilisateurs des lecteurs d'écran qu'il s'agit d'un élément de navigation ---
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 > Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .breadcrumbs__item) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > Les cartes sont généralement utilisées en groupes. En les emballant dans une liste non ordonnée, nous fournissons aux utilisateurs des lecteurs d'écran avec des raccourcis vers les listes et la liste des éléments. Les lecteurs d'écran permettent également aux utilisateurs de savoir combien d'éléments il y a dans une liste. Dans l'exemple ci-dessous, vous trouverez la structure à l'aide d'une liste et display: grid , en vous assurant de laisser suffisamment d'écart entre les cartes sur les appareils tactiles pour les personnes qui constatent qu'ils ont une faible précision lors du ciblage des articles, y compris ceux atteints de la maladie de Parkinson et des rhumatismes. Laisser un écart plus important permet de faire défiler plus facilement sans activer accidentellement un lien de cartes.
Certaines fonctionnalités (accessibilité) de la carte :
<a> ::after un élément pseudo<h3> donc il peut être utilisé dans de nombreux contextes ( <h2> serait trop limitantmax-width est définie sur 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 > Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .card) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< 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 est un composant de bouton à bascule pour ajouter et supprimer une classe de .darkmode au <body> en fonction de la préférence de l'utilisateur pour un schéma de couleurs clair ou sombre. La préférence de l'utilisateur est enregistrée sur le localStorage pour préserver son choix pour les visites futures.
Certaines fonctionnalités (accessibilité) du mode noir :
aria-pressed pour indiquer à l'écran des utilisateurs du lecteur si le schéma sombre est basculé ou nonaria-label saria-hidden pour masquer les icônes pour le mode sombre et lumineux et utilise plutôt les aria-labels Scolor-scheme sur light ou dark en fonction de la préférence de l'utilisateur afin que vous puissiez utiliser la fonction light-dark() dans votre CSS initialMode (facultatif): définit le schéma de couleurs initial. Accepte 'light' , 'dark' ou 'auto' (par défaut: 'auto' )'light' : Force le mode Light lors de la première visite'dark' : force le mode noir lors de la première visite'auto' : utilise les préférences du système lors de la première visite ---
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 > Remarque: Après la première visite, la préférence choisie par l'utilisateur sera enregistrée sur LocalStorage et aura la priorité sur le paramètre initialMode .
Les médias sont un composant très simple utilisé pour les balises <img> . Il a une balise alt vide par défaut qui est requise pour les images non décoratives. Si l'image est descriptive, par exemple lorsqu'il n'y a pas de texte (complémentaire), vous devez toujours écrire une bonne balise alt descriptive. Le composant multimédia utilise également la balise loading="lazy" pour optimiser les performances du côté des navigateurs.
Certaines fonctionnalités (accessibilité) des médias :
alt vide par défaut qui est toujours requise pour les images non descriptives. ---
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 "
/> Les modaux sont des fenêtres qui apparaissent au-dessus de l'écran parent, désactivant généralement l'utilisation de l'écran parent et exigeant une action immédiate de l'utilisateur. Ce composant utilise l'élément html <dialog> natif pour l'accessibilité et les fonctionnalités intégrées, améliorées avec des transitions lisses.
Certaines fonctionnalités (accessibilité) du modal :
<dialog> natif pour l'accessibilité intégréeid et aria-labeledby@starting-style et 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 > Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .modal) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< 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 > Les notifications sont souvent utilisées pour maintenir l'utilisateur au courant de la modification de l'état sur un site Web ou une application. Ils peuvent également être utilisés comme un moyen général d'afficher certaines informations en surbrillance dans un article par exemple. Il y a deux règles de base en ce qui concerne les notifications et celles-ci doivent toujours ajouter des informations contextuelles sur la notification (comme commencer par "Tip:", "Info:", "Error:") et lors de l'ajout d'une notification au DOM en réponse à une action utilisateur, vous devez toujours utiliser role="status" et aria-live="polite" pour informer les utilisateurs de l'écran. Pour ajouter des visuels supplémentaires, vous pouvez combiner le composant de notification avec l'icône Astro.
Certaines fonctionnalités (accessibilité) de la notification :
role="status" et 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 > Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .notification) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< 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 composant de pagination assez simple mais efficace qui a un premier bouton de page première, précédent, suivant et dernière. Il indique également à l'utilisateur combien de pages il y a et sur quelle page il se trouve actuellement. Le composant de pagination est également entièrement accessible et navigable au clavier.
Certaines fonctionnalités (accessibilité) de la pagination :
aria-label S pour dire à l'utilisateur s'il ira à la page précédente ou suivante et quel numéro de pagearia-hidden pour masquer les icônes pour les pages précédentes et suivantes ---
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 ) }
/> Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .pagination) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< 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 > Les skiplinks fournissent un moyen aux utilisateurs utilisant des technologies d'assistance pour sauter du contenu répété sur des pages pour accéder directement au contenu principal d'un site Web ou d'une application. Pour utiliser correctement ce composant, assurez-vous de donner au contenu principal de votre projet un id de #main-content afin que le SkipLink puisse le cibler. En tant que secours, le skiplink tentera de cibler le h1 de la page. Si aucun n'est trouvé, un avertissement sera enregistré à la console.
Certaines fonctionnalités (accessibilité) des skiplinks :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .skiplinks) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >Un composant Tabs entièrement accessible qui suit les directives WAI-ARIA. Les onglets sont un excellent moyen d'organiser le contenu en différentes sections, permettant aux utilisateurs de basculer facilement entre eux.
Certaines fonctionnalités (accessibilité) des onglets :
id , aria-controls et 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 >Onglets
class - chaîne facultative pour les classes CSS supplémentairesTabslist
class - chaîne facultative pour les classes CSS supplémentairesTablate
id - chaîne requise pour l'identification unique des ongletscontrols - String requis correspondant à l'ID du panneauselected - Boolean en option pour définir l'état sélectionné initialclass - chaîne facultative pour les classes CSS supplémentairesTabspanel
id - chaîne requise pour l'identification unique du panneaulabelledby - String requis correspondant à l'ID de l'onglet qui étiquette ce panneauselected - Boolean en option pour définir l'état sélectionné initialclass - chaîne facultative pour les classes CSS supplémentaires Vous pouvez appliquer vos propres styles en définissant les propriétés individuelles en utilisant :global(body .tabs) par exemple, ou configurer une balise de style global et définir vos styles là-dedans:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >Si vous constatez que quelque chose ne fonctionne pas, je suis toujours heureux de l'entendre pour améliorer ces composants! Vous pouvez contribuer de nombreuses façons et formes. Faites-moi savoir par l'un ou l'autre:
Je voudrais exercer ma gratitude aux créateurs d'Astro et à tous ceux qui ont utilisé ces composants et partagé des informations précieuses pour améliorer l'accessibilité du Web dans le monde entier. De plus, je voudrais reconnaître les contributions de chiffres notables dans la communauté du développement Web, notamment Zell Liew de Learn Javascript Today et Heydon Pickering, l'auteur de Inclusive Components, entre autres. Des remerciements particuliers vont à tous les contributeurs de ce référentiel, avec une reconnaissance particulière pour David Abell, dont les contributions substantielles, telles que l'ajout de soutien dactylographié, ont grandement profité au projet. Vos efforts collectifs sont très appréciés!
