accessible astro components
v3.0.1
アストロ用のアクセス可能で使いやすいフロントエンドUIコンポーネントのセット。これらのコンポーネントのほとんどは、アクセス可能なAstroスターターとアクセス可能なAstroダッシュボードのテーマで使用されており、これらのコンポーネントに模範的なユースケースを提供します。ボーナスとして、これらのテーマには、独自の専用コンポーネント（キーボードにアクセス可能でレスポンシブなナビゲーションなど）と、多くの設計システムユーティリティクラス、パターン、プリミティブ（グリッド、ボタン、リスト、間隔、サイズなど）もあります。
ライブプレビュー
プロジェクトフォルダーで次のコマンドを実行して開始します。
npm install accessible-astro-components --save-dev 次のインポートステートメントを使用して、パッケージからさまざまなコンポーネントをインポートできます。
---
import { Accordion , AccordionItem , Card , Modal , ... } from ' accessible-astro-components '
---スキップ：アコーディオン、パン粉、カード、ダークモード、メディア、モーダル、通知、ページネーション、スカイリンクス
アコーディオンは、コンテンツの大きなチャンクを、ユーザーがそのヘッダーに関連付けられているものを読みたいときに拡張できるヘッダーを簡単にスキャンできるようにグループ化するのに最適です。このコンポーネントは、アクセシビリティと機能を組み込んだネイティブHTML <details>および<summary>要素を使用します。
アコーディオンのいくつかの（アクセシビリティ）機能：
nameを使用したオプションの排他的な動作::details-content Pseudo Elementのallow-discreteおよびallow-keywordsを使用して、オープン状態と閉鎖状態の間の徐々に強化された遷移 ---
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 >auctionitem
title （必須）：アコーディオンヘッダーに示されているテキストname （オプション）：排他的な動作のグループ名 - 同じ名前のアイテムは、開いたときに他のものを閉じますchildren ：アコーディオンが拡張されたときに表示されるコンテンツたとえば、 :global(body .accordion__item)を使用して個々のプロパティを設定するか、グローバルスタイルのタグを設定してスタイルを定義することにより、独自のスタイルを適用できます。
< style lang="scss" is:global>
body .accordion__wrapper {
background-color : purple ;
& [ open ] {
background-color : peru ;
}
}
</ style >パン粉は、ユーザーが以前のページまたはセクションに戻るのに役立つ素晴らしい方法です。また、読者ユーザーがウェブサイトのどこにいるかをスクリーンユーザーに理解できるようにするのに最適な方法です。
パン粉のいくつかの（アクセシビリティ）機能：
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は、LightまたはDark Corerスキームのユーザーの好みに基づいて、 .darkmodeのクラスを<body>に追加および削除するトグルボタンコンポーネントです。ユーザーの好みは、将来の訪問のための選択を維持するためにlocalStorageに保存されます。
ダークモードのいくつかの（アクセシビリティ）機能：
aria-pressedを利用して、Dark Schemeが切り替えられているかどうかを読者ユーザーをスクリーンユーザーに示すaria-labelを使用して切り替える状態がどの状態が切り替えられるかをスクリーンリーダーに提供するフィードバックを提供しますaria-hiddenを使用して暗いモードとLightモードのためにアイコンを非表示にし、代わりにaria-labels Sを使用しますcolor-schemeをlightまたはdarkため、CSSでlight-dark()関数を使用できますinitialMode （オプション）：初期配色を設定します。 'light' 、 'dark' 、または'auto'を受け入れる（デフォルト： 'auto' ）'light' ：最初の訪問でライトモードを強制します'dark' ：最初の訪問でダークモードを強制します'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 "
/>モーダルは、親画面の上に表示されるWindowsであり、通常、親画面の使用を無効にし、ユーザーに即時アクションを要求します。このコンポーネントは、スムーズな遷移で強化された、アクセシビリティと機能が組み込まれているために、ネイティブHTML <dialog>要素を使用します。
モーダルのいくつかの（アクセシビリティ）機能：
<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 >通知は、ウェブサイトまたはアプリケーション上の状態の変更に関するユーザーを最新の状態に保つためによく使用されます。また、たとえば記事に強調表示された情報を表示するための一般的な方法として使用することもできます。通知に関しては、2つの経験則があり、それらは常に通知に関するコンテキスト情報（「TIP：」、「情報：」、「エラー：」などなど、ユーザーアクションに応じて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 > Skiprinksは、アシスタントテクノロジーを使用して、ページ上の繰り返しコンテンツをスキップして、Webサイトまたはアプリケーションのメインコンテンツに直接移動する方法を提供します。このコンポーネントを適切に使用するには、プロジェクトのメインコンテンツに#main-contentのidを指定して、Skiprinkがターゲットにできるようにしてください。フォールバックとして、Skiprinkはページのh1ターゲットにしようとします。どちらも見つからない場合、警告がコンソールにログに記録されます。
Skiprinksのいくつかの（アクセシビリティ）機能：
---
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クラスのオプションの文字列Tabslist
class - 追加のCSSクラスのオプションの文字列Tabstab
id一意のタブ識別に必要な文字列controls - パネルIDに一致する必要な文字列このタブコントロールselected - 初期選択状態を設定するためのオプションのブール値class - 追加のCSSクラスのオプションの文字列tabspanel
id一意のパネル識別に必要な文字列labelledbyこのパネルをラベル付けするタブIDに一致する必要な文字列selected - 初期選択状態を設定するためのオプションのブール値class - 追加のCSSクラスのオプションの文字列たとえば、 :global(body .tabs)を使用して個々のプロパティを設定するか、グローバルスタイルのタグを設定してスタイルを定義することにより、独自のスタイルを適用できます。
< style lang="scss" is:global>
body .tabs-list {
background-color : purple ;
}
</ style >何かが正しく機能していないことがわかったら、これらのコンポーネントを改善するためにいつも聞いてうれしいです！多くの方法やフォームで貢献できます。どちらかを教えてください：
アストロのクリエイターと、これらのコンポーネントを利用し、世界中のWebアクセシビリティを強化するために貴重な洞察を共有したすべての人々に感謝の気持ちを広げたいと思います。さらに、Web開発コミュニティでの注目すべき人物の貢献を認めたいと思います。これには、Today TodayのLearn JavaScriptのZell Liewや、特にInclusive Componentsの著者であるHeydon Pickeringなどがあります。このリポジトリへのすべての貢献者に特に感謝します。タイプスクリプトサポートの追加などの多大な貢献がプロジェクトに大きな恩恵を受けたDavid Abellに特に認識されています。あなたの集合的な努力は高く評価されています！
