accessible astro components
v3.0.1
ชุดของส่วนประกอบ UI ส่วนหน้าที่เข้าถึงได้ง่ายและใช้งานง่ายสำหรับ Astro ส่วนประกอบเหล่านี้ส่วนใหญ่ใช้ใน Astro Starter ที่เข้าถึงได้และธีม Astro Dashboard ที่เข้าถึงได้และพวกเขาให้กรณีการใช้งานที่เป็นแบบอย่างสำหรับส่วนประกอบเหล่านี้ เป็นโบนัสธีมเหล่านี้ยังมีส่วนประกอบเฉพาะของตัวเอง (เช่นการเข้าถึงแป้นพิมพ์และการตอบสนองที่ตอบสนองได้) และชั้นเรียนยูทิลิตี้ ระบบการออกแบบ รูปแบบและดั้งเดิม (เช่นกริด, ปุ่ม, รายการ, ระยะห่าง, ขนาดและอื่น ๆ )
ดูตัวอย่างสด
เรียกใช้คำสั่งต่อไปนี้ในโฟลเดอร์โครงการของคุณเพื่อเริ่มต้น:
npm install accessible-astro-components --save-dev คุณสามารถนำเข้าส่วนประกอบต่าง ๆ จากแพ็คเกจโดยใช้คำสั่งนำเข้าต่อไปนี้:
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---ข้ามไปที่ : หีบเพลง, breadcrumbs, การ์ด, darkmode, สื่อ, modal, การแจ้งเตือน, การแบ่งหน้า, skiplinks
หีบเพลงนั้นยอดเยี่ยมสำหรับการจัดกลุ่มเนื้อหาขนาดใหญ่ให้ง่ายต่อการสแกนส่วนหัวซึ่งผู้ใช้สามารถขยายได้เมื่อพวกเขาต้องการอ่านสิ่งที่เกี่ยวข้องกับส่วนหัวนั้น ส่วนประกอบนี้ใช้องค์ประกอบ HTML พื้นเมือง <details> และ <summary> สำหรับการเข้าถึงและการใช้งานในตัว
คุณสมบัติบางอย่าง (การเข้าถึง) ของหีบเพลง :
name Propallow-discrete และ allow-keywords เกี่ยวกับ ::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 >หีบเพลง
title (จำเป็น): ข้อความที่แสดงในส่วนหัวหีบเพลงname (ไม่บังคับ): ชื่อกลุ่มสำหรับพฤติกรรมพิเศษ - รายการที่มีชื่อเดียวกันจะปิดผู้อื่นเมื่อเปิดchildren : เนื้อหาที่แสดงเมื่อมีการขยายหีบเพลง คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .accordion__item) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >Breadcrumbs เป็นวิธีที่ยอดเยี่ยมในการช่วยให้ผู้ใช้นำทางกลับไปยังหน้าหรือส่วนก่อนหน้า พวกเขายังเป็นวิธีที่ยอดเยี่ยมในการช่วยให้ผู้อ่านหน้าจอเข้าใจว่าพวกเขาอยู่ที่ไหนในเว็บไซต์
คุณสมบัติบางอย่าง (การเข้าถึง) ของ breadcrumbs :
aria-label="Breadcrumbs"<nav> เพื่อบอกผู้อ่านหน้าจอว่านี่เป็นองค์ประกอบการนำทาง ---
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 > คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .breadcrumbs__item) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< style lang="scss" is:global>
body .breadcrumbs__item {
li ::after {
content : ' > ' ;
}
}
</ style > การ์ดมักจะใช้เป็นกลุ่ม โดยการห่อไว้ในรายการที่ไม่ได้เรียงลำดับเราให้ผู้ใช้หน้าจอผู้ใช้ทางลัดไปยังรายการและรายการ ตัวอ่านหน้าจอยังแจ้งให้ผู้ใช้ทราบว่ามีรายการกี่รายการในรายการ ในตัวอย่างด้านล่างคุณจะพบโครงสร้างโดยใช้รายการที่ไม่ได้เรียงลำดับและ display: grid ทำให้แน่ใจว่าเราทิ้งช่องว่างระหว่างการ์ดบนอุปกรณ์สัมผัสสำหรับผู้ที่พบว่าพวกเขามีความแม่นยำต่ำเมื่อกำหนดเป้าหมายรายการรวมถึงผู้ที่เป็นโรคพาร์กินสันและโรคไขข้อ การทิ้งช่องว่างที่ใหญ่กว่าจะทำให้การเลื่อนง่ายขึ้นโดยไม่ต้องเปิดใช้งานลิงค์การ์ดโดยไม่ตั้งใจ
คุณสมบัติบางอย่าง (การเข้าถึง) ของการ์ด :
<a> ::after องค์ประกอบหลอก<h3> ดังนั้นจึงสามารถใช้ในหลายบริบท ( <h2> จะ จำกัด เกินไปmax-width ถูกตั้งค่าเป็น 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 > คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .card) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< 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 เป็นส่วนประกอบปุ่มสลับเพื่อเพิ่มและลบคลาสของ .darkmode ไปยัง <body> ตามการตั้งค่าของผู้ใช้สำหรับโทนสีที่มีแสงหรือสีเข้ม การตั้งค่าของผู้ใช้จะถูกบันทึกไปยัง localStorage เพื่อรักษาทางเลือกของพวกเขาสำหรับการเยี่ยมชมในอนาคต
คุณสมบัติบางอย่าง (การเข้าถึง) ของ DarkMode :
aria-pressed เพื่อระบุผู้ใช้ตัวอ่านหน้าจอว่ารูปแบบมืดนั้นสลับหรือไม่aria-label Saria-hidden เพื่อซ่อนไอคอนสำหรับโหมดมืดและแสงและใช้ aria-labels S แทนcolor-scheme เป็น light หรือ dark ตามความชอบของผู้ใช้เพื่อให้คุณสามารถใช้ฟังก์ชั่น light-dark() ใน CSS ของคุณ initialMode (ไม่บังคับ): ตั้งค่าโทนสีเริ่มต้น ยอมรับ 'light' , 'dark' หรือ 'auto' (ค่าเริ่มต้น: 'auto' )'light' : โหมดไฟในการเยี่ยมชมครั้งแรก'dark' : Forces Dark Mode ในการเยี่ยมชมครั้งแรก'auto' : ใช้การตั้งค่าระบบในการเยี่ยมชมครั้งแรก ---
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 > หมายเหตุ: หลังจากการเยี่ยมชมครั้งแรกการตั้งค่าที่ผู้ใช้เลือกจะถูกบันทึกลงใน localStorage และจะมีความสำคัญกว่าการตั้งค่า initialMode
สื่อเป็นองค์ประกอบที่ง่ายมากที่ใช้สำหรับแท็ก <img> มันมีแท็ก alt ที่ว่างเปล่าเริ่มต้นซึ่งจำเป็นสำหรับภาพที่ไม่ได้รับการตกแต่ง หากภาพเป็นคำอธิบายตัวอย่างเช่นเมื่อไม่มีข้อความ (เสริม) คุณควรเขียนแท็ก alt ที่อธิบายได้ดีเสมอ ส่วนประกอบสื่อยังใช้แท็ก loading="lazy" เพื่อเพิ่มประสิทธิภาพประสิทธิภาพจากด้านเบราว์เซอร์
คุณสมบัติบางอย่าง (การเข้าถึง) ของสื่อ :
alt ที่ว่างเปล่าเริ่มต้นซึ่งจำเป็นสำหรับภาพที่ไม่บรรยาย ---
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 "
/> Modals เป็น windows ที่ปรากฏอยู่ด้านบนของหน้าจอหลักโดยปกติจะปิดการใช้งานการใช้หน้าจอหลักและเรียกร้องให้ดำเนินการทันทีจากผู้ใช้ ส่วนประกอบนี้ใช้องค์ประกอบ HTML <dialog> ดั้งเดิมสำหรับการเข้าถึงและการใช้งานในตัวซึ่งได้รับการปรับปรุงด้วยการเปลี่ยนที่ราบรื่น
คุณสมบัติบางอย่าง (การเข้าถึง) ของ Modal :
<dialog> ดั้งเดิมสำหรับการเข้าถึงในตัวid และ aria-labeledby@starting-style 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 > คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .modal) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< 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 > การแจ้งเตือนมักใช้เพื่อให้ผู้ใช้อัปเดตเกี่ยวกับการเปลี่ยนสถานะในเว็บไซต์หรือแอปพลิเคชัน พวกเขายังสามารถใช้เป็นวิธีทั่วไปในการแสดงข้อมูลที่เน้นในบทความเช่น มีกฎสองข้อเมื่อพูดถึงการแจ้งเตือนและสิ่งเหล่านั้นจะต้องเพิ่มข้อมูลบริบทเกี่ยวกับการแจ้งเตือน (เช่นเริ่มต้นด้วย "เคล็ดลับ:", "ข้อมูล:", "ข้อผิดพลาด:") และเมื่อเพิ่มการแจ้งเตือนไปยัง DOM เพื่อตอบสนองต่อการกระทำของผู้ใช้คุณควรใช้ role="status" aria-live="polite" ในการเพิ่มภาพพิเศษบางอย่างคุณสามารถรวมองค์ประกอบการแจ้งเตือนเข้ากับไอคอน Astro
คุณสมบัติบางอย่าง (การเข้าถึง) ของการแจ้งเตือน :
role="status" และ 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 > คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .notification) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< 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 >องค์ประกอบการปนเปื้อนที่ค่อนข้างเรียบง่าย แต่มีประสิทธิภาพซึ่งมีปุ่มหน้าแรกก่อนหน้าถัดไปและหน้าสุดท้าย นอกจากนี้ยังบอกผู้ใช้ว่ามีกี่หน้าและหน้าเว็บที่อยู่ในปัจจุบัน ส่วนประกอบการแบ่งหน้ายังสามารถเข้าถึงได้อย่างสมบูรณ์และนำทางแป้นพิมพ์
คุณสมบัติบางอย่าง (การเข้าถึง) ของการปนเปื้อน :
aria-label S เพื่อบอกผู้ใช้ว่าพวกเขาจะไปที่หน้าก่อนหน้าหรือหน้าและหมายเลขหน้าใดaria-hidden เพื่อซ่อนไอคอนสำหรับหน้าก่อนหน้าและหน้าถัดไป ---
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 ) }
/> คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .pagination) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< 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 เป็นวิธีสำหรับผู้ใช้ที่ใช้เทคโนโลยีช่วยเหลือในการข้ามเนื้อหาซ้ำ ๆ บนหน้าเว็บเพื่อไปยังเนื้อหาหลักของเว็บไซต์หรือแอปพลิเคชันโดยตรง ในการใช้ส่วนประกอบนี้อย่างถูกต้องตรวจสอบให้แน่ใจว่าคุณให้เนื้อหาหลักของโครงการของคุณเป็น id #main-content เพื่อให้ Skiplink สามารถกำหนดเป้าหมายได้ ในฐานะที่เป็นทางเสีย Skiplink จะพยายามกำหนดเป้าหมาย h1 ของหน้า หากไม่พบคำเตือนจะถูกบันทึกไว้ในคอนโซล
คุณสมบัติบางอย่าง (การเข้าถึง) ของ skiplinks :
---
import { SkipLinks } from ' accessible-astro-components '
---
< SkipLinks /> คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .skiplinks) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< style lang="scss" is:global>
body .skiplinks a {
color : white ;
background-color : purple ;
& :hover
& :focus {
background-color : indigo ;
}
}
</ style >ส่วนประกอบแท็บที่เข้าถึงได้อย่างสมบูรณ์ซึ่งเป็นไปตามแนวทางของ Wai-Aria แท็บเป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบเนื้อหาในส่วนต่าง ๆ ทำให้ผู้ใช้สามารถสลับระหว่างกันได้อย่างง่ายดาย
คุณสมบัติบางอย่าง (การเข้าถึง) ของแท็บ :
id , aria-controls และ 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 >แท็บ
class - สตริงเสริมสำหรับคลาส CSS เพิ่มเติมแท็บลิสต์
class - สตริงเสริมสำหรับคลาส CSS เพิ่มเติมแทง
id - สตริงที่ต้องการสำหรับการระบุแท็บที่ไม่ซ้ำกันcontrols - สตริงที่ต้องการจับคู่ ID พาเนลแท็บนี้ควบคุมselected - บูลีนเสริมเพื่อตั้งค่าสถานะเริ่มต้นที่เลือกclass - สตริงเสริมสำหรับคลาส CSS เพิ่มเติมTabspanel
id - สตริงที่ต้องการสำหรับการระบุแผงที่ไม่ซ้ำกันlabelledby - สตริงที่ต้องการตรงกับรหัสแท็บที่ติดป้ายกำกับแผงนี้selected - บูลีนเสริมเพื่อตั้งค่าสถานะเริ่มต้นที่เลือกclass - สตริงเสริมสำหรับคลาส CSS เพิ่มเติม คุณสามารถใช้สไตล์ของคุณเองได้โดยการตั้งค่าคุณสมบัติส่วนบุคคลโดยใช้ :global(body .tabs) หรือตั้งค่าแท็กสไตล์ระดับโลกและกำหนดสไตล์ของคุณในนั้น:
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >หากคุณพบว่ามีบางอย่างไม่ทำงานอยู่ฉันก็ยินดีที่จะได้ยินเพื่อปรับปรุงส่วนประกอบเหล่านี้! คุณสามารถมีส่วนร่วมได้หลายวิธีและรูปแบบ แจ้งให้เราทราบโดย:
ฉันต้องการขยายความกตัญญูต่อผู้สร้าง Astro และทุกคนที่ใช้ส่วนประกอบเหล่านี้และแบ่งปันข้อมูลเชิงลึกที่มีค่าเพื่อเพิ่มความสามารถในการเข้าถึงเว็บทั่วโลก นอกจากนี้ฉันต้องการรับทราบถึงการมีส่วนร่วมของตัวเลขที่โดดเด่นในชุมชนการพัฒนาเว็บรวมถึง Zell Liew จาก Learn JavaScript วันนี้และ Heydon Pickering ผู้เขียน Components รวมถึงคนอื่น ๆ ขอขอบคุณเป็นพิเศษกับผู้มีส่วนร่วมทุกคนในที่เก็บนี้ด้วยการยอมรับเป็นพิเศษสำหรับ David Abell ซึ่งมีส่วนร่วมอย่างมากเช่นการเพิ่มการสนับสนุน TypeScript ได้รับประโยชน์อย่างมากจากโครงการ ความพยายามร่วมกันของคุณได้รับการชื่นชมอย่างมาก!
