Accessible Astro Components – Eine Sammlung barrierefreier UI-Komponenten für Astro
Accessible Astro Components ist eine Sammlung von barrierefreien, einfach zu verwendenden Frontend-UI-Komponenten für das Astro-Framework. Diese Komponenten wurden speziell entwickelt, um die Anforderungen der Web Accessibility Initiative (WAI) und der WCAG-Richtlinien zu erfüllen. Sie werden unter anderem in den Themes Accessible Astro Starter und Accessible Astro Dashboard verwendet und bieten hervorragende Beispiele für deren Einsatz.
Zusätzlich enthalten diese Themes eigene spezialisierte Komponenten (wie z. B. tastaturzugängliche und responsive Navigationen) sowie zahlreiche Utility-Klassen, Muster und Design-Primitives (wie Grids, Buttons, Listen, Abstände und mehr).
Installation der Astro Components
Um die Komponenten in Ihrem Projekt zu verwenden, führen Sie den folgenden Befehl im Projektverzeichnis aus:
npm install accessible-astro-components --save-dev
Frontend 2025: Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile der Barrierefreiheit
Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile einer schnellen, sicheren und barrierefreien Webseite. Erfüllen Sie die gesetzlichen Anforderungen und verbessern Sie die Benutzererfahrung Ihrer Webseite. Mit Astro JS können Sie die Ladezeit reduzieren, die Sicherheit maximieren und die SEO-Optimierung verbessern. Kontaktieren Sie uns, um mehr zu erfahren und um Ihre Webseite auf ein neues Level zu heben.
Verwendung der Astro Components
Sie können die verschiedenen Komponenten wie folgt importieren:
Verfügbare Komponenten
Accordion
Breadcrumbs
Card
DarkMode
Media
Modal
Notification
Pagination
SkipLinks
Accordion Component
Wann (und wann nicht) zu verwenden
Accordions eignen sich hervorragend, um große Inhaltsblöcke in übersichtliche Abschnitte zu unterteilen, die Benutzer bei Bedarf erweitern können. Diese Komponente verwendet die nativen HTML-Elemente <details> und <summary>, um Barrierefreiheit und Funktionalität zu gewährleisten.
Merkmale
Native HTML-Elemente für integrierte Barrierefreiheit.
Optionales exklusives Verhalten durch die name-Eigenschaft.
Integrierte Tastaturunterstützung durch den Browser.
Kein JavaScript erforderlich!
Progressiv verbesserte Übergänge zwischen geöffneten und geschlossenen Zuständen.
Beispiel
---
import { Accordion, AccordionItem } from 'accessible-astro-components'
---
<Accordion>
<AccordionItem title="Erster Abschnitt">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Tab zu mir!</a>
</AccordionItem>
<AccordionItem name="gruppe1" title="Zweiter Abschnitt">
<p>Inhalt für den zweiten Abschnitt</p>
</AccordionItem>
<AccordionItem name="gruppe1" title="Dritter Abschnitt">
<p>Inhalt für den dritten Abschnitt</p>
</AccordionItem>
</Accordion>
Stile anpassen
Sie können eigene Stile anwenden, indem Sie entweder die individuellen Eigenschaften überschreiben oder globale Stile definieren:
<style lang="scss" is:global>
body .accordion__wrapper {
background-color: purple;
&[open] {
background-color: peru;
}
}
</style>
Breadcrumbs
Wann (und wann nicht) zu verwenden
Breadcrumbs helfen Benutzern, zu vorherigen Seiten oder Abschnitten zurückzukehren. Sie sind besonders nützlich, um Screenreader-Nutzern zu vermitteln, wo sie sich auf der Website befinden.
Merkmale
Aria-Label zur Identifikation für Screenreader.
Ungeordnete Listenstruktur für eine klare Struktur.
<nav>-Element zur Kennzeichnung als Navigationselement.
Beispiel:
---
import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
---
<Breadcrumbs>
<BreadcrumbsItem href="/" label="Startseite" />
<BreadcrumbsItem href="/blog" label="Blog" />
<BreadcrumbsItem currentPage={true} label="Mein Blogbeitrag" />
</Breadcrumbs>
Card
Merkmale
Ganzes Card klickbar durch das <a>-Element.
Titel als <h3> für flexible Verwendung.
Maximale Textbreite von 70ch für bessere Lesbarkeit.
Beispiel
---
import { Card } from 'accessible-astro-components'
---
<ul>
<li>
<Card
url="/link-to-my-post"
img="/assets/post-cover.jpg"
title="Mein toller Beitrag"
footer="Tony Stark"
>
Lorem ipsum dolor sit amet.
</Card>
</li>
</ul>
DarkMode
Merkmale
Aria-Pressed zur Anzeige des aktuellen Zustands.
Speichert Benutzereinstellungen im localStorage.
Unterstützt Systemeinstellungen für dunklen Modus.
Beispiel
---
import { DarkMode } from 'accessible-astro-components'
---
<DarkMode initialMode="dark" />
Weitere Komponenten
Weitere Komponenten wie Modal, Notification, Pagination, SkipLinks und Tabs bieten ähnliche Barrierefreiheitsfunktionen und sind einfach zu implementieren. Detaillierte Beispiele und Anleitungen finden Sie in der Github-Dokumentation.
Was sind Astro JS Islands?
Isolierte, interaktive UI-Komponenten in einer ansonsten statischen HTML-Seite
Wer hat das Konzept entwickelt?
Ursprünglich von Katie Sylor-Miller geprägt, von Jason Miller erweitert und von Astro popularisiert
Warum sind Islands vorteilhaft?
Sie verbessern die Performance durch reduziertes JavaScript und selektives Hydration
Wie funktionieren Islands?
Sie werden separat geladen und hydratisiert, unabhängig vom Rest der Seite
Wann sollten Islands eingesetzt werden?
Bei Projekten, die statische Inhalte mit dynamischen Elementen kombinieren möchten.
Wo können Islands platziert werden?
An beliebigen Stellen innerhalb einer Astro-Seite.
Welche Frameworks werden unterstützt?
React, Preact, Svelte, Vue, SolidJS und mehr
Wie werden Islands konfiguriert?
Durch Verwendung von client:* Direktiven in Astro-Komponenten
Was sind Server Islands?
Komponenten, die dynamischen Inhalt serverseitig rendern, ohne die Hauptseite zu verzögern
Worin unterscheiden sich Client und Server Islands?
Client Islands fügen Interaktivität hinzu, Server Islands optimieren dynamische Inhalte
Fazit: Barrierefreie UI-Komponenten für Astro
Die Accessible Astro Components bieten eine umfassende Sammlung barrierefreier UI-Komponenten für Astro, die sowohl Entwicklern als auch Endnutzern zugutekommen. Mit Fokus auf Zugänglichkeit, Benutzerfreundlichkeit und modernem Design ermöglichen diese Komponenten die Erstellung inklusiver Webanwendungen, die WCAG-Richtlinien erfüllen und eine hervorragende User Experience bieten.
Astro Accessible Components - Bildergallerie
Bilder zu Astro Accessible Components
Dunkles UI-Design mit verschiedenen Arten von Akkordeon-Komponenten für barrierefreie Webseiten. Navigationselemente oben, die das Thema 'Accessible Astro' zeigen.
Ein Mann mit Bart und Haaren hebt die Faust, trägt ein schwarzes Shirt mit der Aufschrift 'Bug Hunter'. Im Hintergrund das Logo von Astro mit dem Text 'Accessible Astro Components'.
Dunkles Design mit dem Astro-Logo und dem Titel 'Components'. Untertitel: 'An introduction to Astro components'. Lila Farbverlauf am linken Rand.
