accessible astro components
v3.0.1
Satu set komponen UI front-end yang dapat diakses, mudah digunakan, untuk Astro. Sebagian besar komponen ini digunakan dalam starter astro yang dapat diakses dan tema dasbor astro yang dapat diakses dan mereka menyediakan kasus penggunaan yang patut dicontoh untuk komponen -komponen ini. Sebagai bonus, tema -tema ini juga memiliki komponen khusus mereka sendiri (seperti navigasi keyboard yang dapat diakses dan responsif) dan banyak kelas utilitas sistem desain , pola dan primitif (seperti kisi, tombol, daftar, jarak, ukuran, dan banyak lagi).
Pratinjau Langsung
Jalankan perintah berikut di folder proyek Anda untuk memulai:
npm install accessible-astro-components --save-dev Anda dapat mengimpor berbagai komponen dari paket menggunakan pernyataan impor berikut:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---Lewati ke : akordeon, remah roti, kartu, darkmode, media, modal, pemberitahuan, pagination, skiplinks
Accordions sangat bagus untuk mengelompokkan potongan besar konten menjadi header yang lebih mudah dipindai yang dapat diperluas oleh pengguna ketika mereka ingin membaca apa yang terkait dengan header itu. Komponen ini menggunakan elemen HTML <details> dan <summary> asli untuk aksesibilitas dan fungsionalitas bawaan.
Beberapa fitur (aksesibilitas) dari akordeon :
nameallow-discrete dan allow-keywords pada elemen semu ::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 >AccordionItem
title (Diperlukan): Teks yang ditampilkan di header akordeonname (Opsional): Nama grup untuk perilaku eksklusif - item dengan nama yang sama akan menutup orang lain saat dibukachildren : Konten yang ditunjukkan saat akordeon diperluas Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .accordion__item) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >Breadcrumbs adalah cara yang bagus untuk membantu pengguna menavigasi kembali ke halaman atau bagian sebelumnya. Mereka juga merupakan cara yang bagus untuk membantu menyaring pengguna pembaca memahami di mana mereka berada di situs web.
Beberapa fitur (aksesibilitas) dari remah roti :
aria-label="Breadcrumbs"<nav> untuk memberi tahu pembaca layar kepada pengguna bahwa ini adalah elemen navigasi ---
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 > Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .breadcrumbs__item) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > Kartu biasanya digunakan dalam kelompok. Dengan membungkusnya dalam daftar yang tidak teratur, kami memberikan pintasan kepada pengguna pembaca layar ke daftar dan daftar item. Pembaca layar juga memberi tahu pengguna berapa banyak item dalam daftar. Dalam contoh di bawah ini Anda akan menemukan struktur menggunakan daftar dan display: grid , memastikan kami cukup meninggalkan celah di antara kartu pada perangkat sentuh untuk orang yang menemukan mereka memiliki akurasi rendah ketika menargetkan item, termasuk mereka yang menderita penyakit Parkinson dan rematik. Meninggalkan celah yang lebih besar memudahkan gulir tanpa secara tidak sengaja mengaktifkan tautan kartu.
Beberapa fitur (aksesibilitas) kartu :
<a> ::after elemen semu<h3> sehingga dapat digunakan dalam banyak konteks ( <h2> akan terlalu membatasimax-width diatur ke 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 > Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .card) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< 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 adalah komponen tombol sakelar untuk menambah dan menghapus kelas .darkmode ke <body> berdasarkan preferensi pengguna untuk skema warna terang atau gelap. Preferensi pengguna disimpan ke localStorage untuk mempertahankan pilihan mereka untuk kunjungan di masa depan.
Beberapa fitur (aksesibilitas) dari DarkMode :
aria-pressed untuk menunjukkan kepada pengguna pembaca layar apakah skema gelap diaktifkan atau tidakaria-label Saria-hidden untuk menyembunyikan ikon untuk mode gelap dan terang dan menggunakan aria-labels sebagai sebagai gantinyacolor-scheme menjadi light atau dark berdasarkan preferensi pengguna sehingga Anda dapat menggunakan fungsi light-dark() di CSS Anda initialMode (Opsional): Mengatur skema warna awal. Menerima 'light' , 'dark' , atau 'auto' (default: 'auto' )'light' : memaksa mode cahaya pada kunjungan pertama'dark' : memaksa mode gelap pada kunjungan pertama'auto' : Menggunakan preferensi sistem pada kunjungan pertama ---
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 > CATATAN: Setelah kunjungan pertama, preferensi yang dipilih pengguna akan disimpan ke LocalStorage dan akan diutamakan daripada pengaturan initialMode .
Media adalah komponen yang sangat sederhana yang digunakan untuk tag <img> . Ini memiliki tag alt kosong default yang diperlukan untuk gambar non-dekoratif. Jika gambar bersifat deskriptif, misalnya ketika tidak ada teks (komplementer), maka Anda harus selalu menulis tag alt deskriptif yang baik. Komponen media juga menggunakan tag loading="lazy" untuk mengoptimalkan kinerja dari sisi browser.
Beberapa fitur (aksesibilitas) media :
alt kosong default yang selalu diperlukan untuk gambar non deskriptif. ---
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 "
/> Modal adalah jendela yang muncul di atas layar induk, biasanya menonaktifkan penggunaan layar induk dan menuntut tindakan segera dari pengguna. Komponen ini menggunakan elemen HTML <dialog> asli untuk aksesibilitas dan fungsionalitas bawaan, ditingkatkan dengan transisi yang halus.
Beberapa fitur (aksesibilitas) dari modal :
<dialog> asli untuk aksesibilitas bawaanid dan aria-labeledby@starting-style dan 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 > Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .modal) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< 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 > Pemberitahuan sering digunakan untuk menjaga agar pengguna diperbarui tentang mengubah status di situs web atau aplikasi. Mereka juga dapat digunakan sebagai cara umum untuk menampilkan beberapa informasi yang disorot dalam sebuah artikel misalnya. Ada dua aturan praktis ketika datang ke pemberitahuan dan itu harus selalu menambahkan informasi kontekstual tentang pemberitahuan (seperti memulai dengan "tip:", "info:", "kesalahan:") dan ketika menambahkan pemberitahuan ke DOM sebagai tanggapan terhadap tindakan pengguna, Anda harus selalu menggunakan role="status" dan aria-live="polite" untuk memberi tahu pengguna pembaca layar. Untuk menambahkan beberapa visual tambahan, Anda dapat menggabungkan komponen pemberitahuan dengan ikon Astro.
Beberapa fitur (aksesibilitas) dari pemberitahuan :
role="status" dan 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 > Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .notification) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< 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 >Komponen pagination yang cukup sederhana namun efektif yang memiliki tombol halaman pertama, sebelumnya, berikutnya, dan terakhir. Ini juga memberi tahu pengguna berapa banyak halaman yang ada dan halaman apa yang saat ini mereka hadapi. Komponen pagination juga dapat diakses sepenuhnya dan dapat dilayari keyboard.
Beberapa fitur (aksesibilitas) pagination :
aria-label s untuk memberi tahu pengguna apakah mereka akan pergi ke halaman sebelumnya atau berikutnya dan nomor halaman manaaria-hidden untuk menyembunyikan ikon untuk halaman sebelumnya dan berikutnya ---
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 ) }
/> Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .pagination) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< 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 > Skiplink menyediakan cara bagi pengguna yang menggunakan teknologi bantu untuk melewatkan konten berulang pada halaman untuk langsung ke konten utama situs web atau aplikasi. Untuk menggunakan komponen ini dengan benar, pastikan Anda memberikan konten utama dari proyek Anda id #main-content sehingga Skiplink dapat menargetkannya. Sebagai fallback, Skiplink akan mencoba menargetkan h1 halaman. Jika tidak ada peringatan akan dicatat ke konsol.
Beberapa fitur (aksesibilitas) dari skiplink :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .skiplinks) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >Komponen tab yang sepenuhnya dapat diakses yang mengikuti pedoman WAI-ARIA. Tab adalah cara yang bagus untuk mengatur konten ke bagian yang berbeda, memungkinkan pengguna untuk beralih di antara mereka dengan mudah.
Beberapa fitur (aksesibilitas) tab :
id , aria-controls dan 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 >Tab
class - String opsional untuk kelas CSS tambahanTabslist
class - String opsional untuk kelas CSS tambahanTabstab
id - String yang Diperlukan untuk Identifikasi Tab Unikcontrols - String yang Diperlukan Pencocokan ID Panel Kontrol Tab Iniselected - Opsional Boolean untuk mengatur status awal yang dipilihclass - String opsional untuk kelas CSS tambahanTabspanel
id - string yang diperlukan untuk identifikasi panel yang uniklabelledby - String yang Diperlukan Pencocokan ID tab yang memberi label panel iniselected - Opsional Boolean untuk mengatur status awal yang dipilihclass - String opsional untuk kelas CSS tambahan Anda dapat menerapkan gaya Anda sendiri dengan mengatur properti individual menggunakan :global(body .tabs) misalnya, atau mengatur tag gaya global dan menentukan gaya Anda di sana:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >Jika Anda menemukan bahwa sesuatu tidak berfungsi dengan baik maka saya selalu senang mendengarnya untuk meningkatkan komponen ini! Anda dapat berkontribusi dalam banyak cara dan bentuk. Beri tahu saya dengan baik:
Saya ingin menyampaikan rasa terima kasih saya kepada para pencipta Astro dan semua yang telah memanfaatkan komponen -komponen ini dan berbagi wawasan berharga untuk meningkatkan aksesibilitas web di seluruh dunia. Selain itu, saya ingin mengakui kontribusi tokoh -tokoh penting dalam komunitas pengembangan web, termasuk Zell Liew dari Learn Javascript Today dan Heydon Pickering, penulis komponen inklusif, antara lain. Terima kasih khusus untuk semua kontributor untuk repositori ini, dengan pengakuan khusus untuk David Abell, yang kontribusinya yang substansial, seperti penambahan dukungan naskah, telah sangat menguntungkan proyek. Upaya kolektif Anda sangat dihargai!
