accessible astro components
v3.0.1
Eine Reihe von zugänglichen, einfach zu bedienenden Front-End-UI-Komponenten für Astro. Die meisten dieser Komponenten werden im zugänglichen Astro -Starter und in den zugänglichen Astro -Dashboard -Themen verwendet und bieten für diese Komponenten beispielhafte Anwendungsfälle. Als Bonus haben diese Themen auch ihre eigenen dedizierten Komponenten (wie Tastaturen zugängliche und reaktionsschnelle Navigationen) und viele Konstruktionssystem -Dienstprogrammklassen, Muster und Primitiven (wie Gitter, Schaltflächen, Listen, Bereiche, Größen und mehr).
Live -Vorschau
Führen Sie den folgenden Befehl in Ihrem Projektordner aus, um loszulegen:
npm install accessible-astro-components --save-dev Sie können die verschiedenen Komponenten mit der folgenden Importanweisung aus dem Paket importieren:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---Überspringen zu : Akkordeon, Brotkrumen, Karte, Dunkelmode, Medien, Modal, Benachrichtigung, Pagination, Skiplinks
Akkordeons eignen sich hervorragend für die Gruppierung großer Inhaltsbrocken in einfachere, die von dem Benutzer erweitert werden können, wenn er lesen möchte, was mit diesem Header zugeordnet ist. Diese Komponente verwendet die nativen HTML-Elemente <details> und <summary> für integrierte Barrierefreiheit und Funktionalität.
Einige (Barrierefreiheit) Merkmale des Akkordeons :
nameallow-discrete und allow-keywords auf dem Pseudoelement ::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 >AkkordeonItem
title (erforderlich): Der im Akkordeonkopf gezeigte Textname (optional): Gruppenname für exklusives Verhalten - Elemente mit demselben Namen schließen andere, wenn sie geöffnet sindchildren : Der Inhalt, der gezeigt wird, wenn das Akkordeon erweitert wird Sie können Ihre eigenen Stile anwenden, indem Sie beispielsweise die einzelnen Eigenschaften mit :global(body .accordion__item) festlegen oder ein globales Style -Tag einrichten und Ihre Stile darin definieren:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >Breadcrumbs sind eine großartige Möglichkeit, um Benutzern zu einer vorherigen Seite oder einem Abschnitt zurückzukehren. Sie sind auch eine großartige Möglichkeit, um den Bildschirm -Leser -Nutzern zu helfen, zu verstehen, wo sie sich auf der Website befinden.
Einige (Barrierefreiheit) Merkmale der Brotkrumen :
aria-label="Breadcrumbs" zu identifizieren.<nav> -Elements, um die Benutzer von Bildschirmlesern zu informieren, dass dies ein Navigationselement ist ---
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 > Sie können Ihre eigenen Stile anwenden, indem Sie entweder die einzelnen Eigenschaften mit :global(body .breadcrumbs__item) festlegen oder ein globales Style -Tag einrichten und Ihre Stile dort definieren:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > Karten werden normalerweise in Gruppen verwendet. Indem wir sie in eine nicht ordnungsgemäße Liste einwickeln, stellen wir den Bildschirmleser -Benutzern Verknüpfungen für Listen und Listenelemente zur Verfügung. Die Bildschirmleser teilen die Benutzer auch mit, wie viele Elemente in einer Liste enthalten sind. Im folgenden Beispiel finden Sie die Struktur mit einer ungeordneten Liste und display: grid und stellen Sie sicher, dass wir genügend eine Lücke zwischen Karten auf Touch -Geräten für Personen hinterlassen, die feststellen, dass sie eine geringe Genauigkeit haben, wenn sie auf Gegenstände abzielen, einschließlich derjenigen mit Parkinson -Krankheit und Rheuma. Wenn Sie eine größere Lücke verlassen, können Sie einfacher scrollen, ohne versehentlich einen Kartenlink zu aktivieren.
Einige (Barrierefreiheit) Funktionen der Karte :
<a> ::after Pseudo angeklickt<h3> , sodass er in vielen Kontexten verwendet werden kann ( <h2> wäre zu einschränkend70ch den lesbaren Text innerhalb der Karte auf größeren max-width aufrechtzuerhalten ---
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 > Sie können Ihre eigenen Stile anwenden, indem Sie beispielsweise entweder die einzelnen Eigenschaften einstellen :global(body .card) oder ein globales Stil -Tag einrichten und Ihre Stile dort definieren:
< 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 ist eine Taste -Taste -Komponente, um eine Klasse von .darkmode zum <body> hinzuzufügen und zu entfernen, basierend auf der Präferenz des Benutzers für ein helles oder dunkles Farbschema. Die Präferenz des Benutzers wird vor der localStorage gespeichert, um ihre Auswahl für zukünftige Besuche beizubehalten.
Einige (Barrierefreiheit) Merkmale des DarkMode :
aria-pressed um den Benutzern der Leser von Lesern anzuzeigen, ob das dunkle Schema umgeschaltet ist oder nichtaria-label S umgeschaltet werdenaria-hidden , um die Symbole für den dunklen und Lichtmodus zu verbergen und verwendet stattdessen die aria-labels Scolor-scheme basierend auf der Präferenz des Benutzers auf light oder dark fest, sodass Sie die Funktion light-dark() in Ihrem CSS verwenden können initialMode (optional): Legt das anfängliche Farbschema fest. Akzeptiert 'light' , 'dark' oder 'auto' (Standard: 'auto' )'light' : erzwingt den Lichtmodus beim ersten Besuch'dark' : erzwingt den dunklen Modus beim ersten Besuch'auto' : Verwendet die Systemeinstellungen beim ersten Besuch ---
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 > Hinweis: Nach dem ersten Besuch wird die ausgewählte Präferenz des Benutzers in LocalStorage gespeichert und hat Vorrang vor der initialMode -Einstellung.
Medien sind eine sehr einfache Komponente, die für <img> Tags verwendet wird. Es hat ein Standard-Leer- alt Tag, das für nicht dekorative Bilder erforderlich ist. Sollte das Bild beschreibend sein, zum Beispiel, wenn es keinen (komplementären) Text gibt, sollten Sie immer ein gutes beschreibendes alt -Tag schreiben. Die Medienkomponente verwendet auch das Tag loading="lazy" um die Leistung von der Browser -Seite zu optimieren.
Einige (Barrierefreiheit) Funktionen der Medien :
alt -Tag fest, das immer für nicht beschreibende Bilder erforderlich ist. ---
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 "
/> Modale sind Windows, die oben auf dem übergeordneten Bildschirm angezeigt werden, und deaktiviert normalerweise die Verwendung des übergeordneten Bildschirms und forderte sofortige Aktionen vom Benutzer. Diese Komponente verwendet das native HTML <dialog> Element für integrierte Zugänglichkeit und Funktionalität, das mit reibungslosen Übergängen verbessert wird.
Einige (Barrierefreiheit) Merkmale des Modals :
<dialog> Element für integrierte Zugänglichkeitid und aria-labeledby@starting-style und 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 > Sie können Ihre eigenen Stile anwenden, indem Sie beispielsweise die einzelnen Eigenschaften mit :global(body .modal) einstellen oder ein globales Stil -Tag einrichten und Ihre Stile dort definieren:
< 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 > Benachrichtigungen werden häufig verwendet, um den Benutzer über den Änderung des Status auf einer Website oder Anwendung auf dem Laufenden zu halten. Sie können auch als allgemeine Möglichkeit verwendet werden, einige hervorgehobene Informationen in einem Artikel anzuzeigen. Es gibt zwei Faustregeln, wenn es um Benachrichtigungen geht, und diese sollen immer kontextbezogene Informationen über die Benachrichtigung hinzufügen (z. B. mit "Tipp:", "Infos:", "Fehler:") und beim Hinzufügen einer Benachrichtigung zur DOM als Antwort auf eine Benutzeraktion sollten Sie immer role="status" und aria-live="polite" zum Bildschirm-Leser-Benutzer verwenden. Um einige zusätzliche Visuals hinzuzufügen, können Sie die Benachrichtigungskomponente mit Astro -Symbol kombinieren.
Einige (Zugänglichkeits-) Merkmale der Benachrichtigung :
role="status" und aria-live="polite" zu ermitteln. ---
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 > Sie können Ihre eigenen Stile anwenden, indem Sie entweder die einzelnen Eigenschaften mit :global(body .notification) einstellen oder ein globales Stil -Tag einrichten und Ihre Stile dort definieren:
< 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 >Eine ziemlich einfache, aber effektive Paginationskomponente, die eine erste, vorherige, nächste und letzte Seite hat. Es sagt auch dem Benutzer, wie viele Seiten es gibt und auf welcher Seite er sich derzeit befindet. Die Paginationskomponente ist auch vollständig zugänglich und Tastatur navigierbar.
Einige (Zugänglichkeits-) Merkmale der Pagination :
aria-label S, um dem Benutzer mitzuteilen, ob er zur vorherigen oder nächsten Seite wechselt und welche Seitenzahlaria-hidden um die Symbole für die vorherige und nächste Seiten zu verbergen ---
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 ) }
/> Sie können Ihre eigenen Stile anwenden, indem Sie beispielsweise die einzelnen Eigenschaften mit :global(body .pagination) festlegen oder ein Global Style -Tag einrichten und Ihre Stile dort definieren:
< 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 bieten Benutzern, die assistive Technologien verwenden, um wiederholte Inhalte auf Seiten zu überspringen, um direkt zum Hauptinhalt einer Website oder Anwendung zu gelangen. Um diese Komponente ordnungsgemäß zu verwenden, stellen Sie sicher, dass Sie den Hauptinhalt Ihres Projekts eine id von #main-content geben, damit der Skiplink darauf abzielt. Als Fallback wird der Skiplink versuchen, den h1 der Seite zu zielen. Wenn keiner gefunden wird, wird eine Warnung an der Konsole angemeldet.
Einige (Barrierefreiheit) Funktionen der Skiplinks :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> Sie können Ihre eigenen Stile anwenden, indem Sie entweder die einzelnen Eigenschaften mit :global(body .skiplinks) festlegen oder ein globales Stil -Tag einrichten und Ihre Stile darin definieren:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >Eine vollständig zugängliche Registerkartenkomponente, die den WAI-Aria-Richtlinien folgt. Registerkarten sind eine großartige Möglichkeit, Inhalte in verschiedene Abschnitte zu organisieren, sodass Benutzer leicht zwischen ihnen wechseln können.
Einige (Barrierefreiheit) Funktionen der Registerkarten :
id , aria-controls und aria-labelledby Verknüpfung ---
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 >Registerkarten
class - optionale Zeichenfolge für zusätzliche CSS -KlassenTabSlist
class - optionale Zeichenfolge für zusätzliche CSS -KlassenTabstab
id - Erforderliche Zeichenfolge für eindeutige Registerkartenidentifikationcontrols - Erforderliche Zeichenfolge, die mit der Panel -ID übereinstimmt. Diese Registerkarte steuert steuertselected - optional Boolean, um den ersten ausgewählten Status festzulegenclass - optionale Zeichenfolge für zusätzliche CSS -KlassenTabspanel
id - Erforderliche Zeichenfolge für eindeutige Panel -Identifikationlabelledby - Erforderliche Zeichenfolge, die mit der Registerkarte ID übereinstimmt, die dieses Panel bezeichnetselected - optional Boolean, um den ersten ausgewählten Status festzulegenclass - optionale Zeichenfolge für zusätzliche CSS -Klassen Sie können Ihre eigenen Stile anwenden, indem Sie beispielsweise entweder die einzelnen Eigenschaften einstellen :global(body .tabs) oder ein globales Style -Tag einrichten und Ihre Stile dort definieren:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >Wenn Sie feststellen, dass etwas nicht funktioniert, bin ich immer froh, es zu hören, um diese Komponenten zu verbessern! Sie können in vielerlei Hinsicht und Formen beitragen. Lassen Sie es mich durch beide wissen:
Ich möchte den Schöpfer von Astro und allen, die diese Komponenten genutzt und wertvolle Erkenntnisse geteilt haben, um die Web -Barrierefreiheit weltweit zu verbessern, meinen Dank auszudehnen. Darüber hinaus möchte ich die Beiträge bemerkenswerter Figuren in der Webentwicklungsgemeinschaft anerkennen, darunter Zell Liew von Learn JavaScript Today und Heydon Pickering, den Autor von inklusiven Komponenten. Besonderer Dank geht an alle Mitwirkenden dieses Repositorys mit besonderer Anerkennung für David Abell, dessen wesentliche Beiträge wie die Hinzufügung von Typscript -Unterstützung dem Projekt stark zugute kommen. Ihre kollektiven Bemühungen werden sehr geschätzt!
