アクセシビリティ

Hypermedia Components は状態を HTML 属性(aria-*、data-*、ネイティブの :checked / disabled)に置くため、支援技術は追加の作業なしにセマンティクスを得られます。それに加えて、キットは CSS でユーザーのコンテキストに適応します: Forced Colors、reduced motion、 右から左のレイアウトです。

Forced Colors(Windows ハイコントラスト)

ユーザーがハイコントラスト / forced-colors テーマを有効にすると、ブラウザは作者の色をユーザーのシステムパレットに置き換え、 box-shadow を落とします。そのままでは HC の 2 つのパターンが壊れます:

box-shadow で描くフォーカスリング(入力欄、セレクト、カスタムトグル、スライダー)— リングが消えます。
背景の色味(color-mix)だけで伝える状態 — 選択中のオプション、現在のページネーションページ、チェック済みコントロール — が区別できなくなります。

単一の forced-colors スタイルシート(hc.a11y.css、メインの hc.css バンドルに同梱)が、forced-colors モードでも保持される CSS システムカラーを使って両方を表現し直します:

フォーカスは、コンポーネントが outline: none + box-shadow リングを使っていた箇所すべてで、本物の outline(Highlight)として復元されます。
選択 / アクティブ状態(コンボボックスとコマンドのオプション、タブ、トグルグループ、ページネーション、カレンダーの日、データグリッドの選択行 / 現在セル)は inset の outline でマークされます — outline は forced-colors を生き残るため、マークは常に見えます。
カスタムトグル(hc-checkbox、hc-radio、hc-switch、 hc-slider のつまみ)は forced-color-adjust: none でオプトアウトし、 Highlight / HighlightText / Canvas / CanvasText で塗るため、チェック時の塗りとつまみが見えたままになります。

バンドル版 hc.css を使っていれば自動で適用されます。粒度の細かいエントリを使う場合は、コンポーネント CSS の後にインポートしてください:

@import "@hypermedia-components/core/css/core";
@import "@hypermedia-components/core/css/button";
/* …other components… */
@import "@hypermedia-components/core/a11y.css"; /* last */

hc.a11y.css は hc.components レイヤーの最後のソースファイルとして連結されるため、ソース順により各コンポーネント自身のフォーカス / 状態ルールを上書きします — 追加のカスケードレイヤーも詳細度ハックもありません。

テスト方法

Chromium DevTools で forced-colors をエミュレートするか (Rendering → Emulate CSS media feature forced-colors)、 Playwright で:

await page.emulateMedia({ forcedColors: 'active' });

入力欄にフォーカスし、コンボボックスをタブ移動し、チェックボックスを切り替えてみてください — インジケーターはシステムパレットの中で見え続けます。

Reduced motion

ユーザーが prefers-reduced-motion を設定すると、アニメーションするすべてのコンポーネントが transition の長さを無効化し、状態変化はアニメーションなしで即座に起こります。これは CSS で処理されます — JavaScript も設定も不要です。

自前のスタイルシートでアニメーションするコンポーネント(アコーディオン、ドロワー、プログレス、スケルトン、スピナー、スイッチ、OTP のキャレット、シェルのオーバーレイ、データグリッド)は各自でゲートし、唯一の動きが transition である残りのコントロール(ボタン、チェックボックス、ラジオ、インプット、セレクト、デートピッカー、タブ、ページネーション、トグルグループ)は hc.a11y.css で一括カバー、htmx インジケーターのフェードは hc.htmx.css でカバーされます。正味の効果: reduced-motion 下ではキットの中で何もアニメーションしません。

// Verify in Playwright:
await page.emulateMedia({ reducedMotion: 'reduce' });
// getComputedStyle(button).transitionDuration === '0s'

意味を伝える動き(進行中を示すスピナー)は aria-* によって役割を保ちます。reduced-motion が取り除くのは装飾的なアニメーションだけです。

右から左(RTL)

<html>(または任意のサブツリー)に dir="rtl" を設定すれば、キットが追従します。レイアウトは CSS 論理プロパティ(margin-inline、 inset-inline-start、text-align: start、border-inline-end…)の上に構築されているため、間隔・揃え・枠線・コンポーネント内部のジオメトリは自動でミラーされます — 反転すべき物理的な left / right ルールはありません。

いくつかの箇所は本物の方向認識を必要とし、こちらで処理済みです:

データグリッドの固定列は inline-start 端(RTL では右)に固定され、固定線の影も正しい側に落ちます。
カレンダーの前 / 次シェブロンはミラーされ、「前」が自然な向きを指し続けます。
キーボードナビゲーション。 水平の ← / → は、タブ、トグルグループ、データグリッドのセルグリッド、カレンダー、スプリッターで RTL ミラーされます — ← は inline-end(次)へ移動します。垂直の ↑ / ↓ は変わりません。

ドキュメントサイト全体は、トップバーの Dir ピッカーで RTL に切り替えて全コンポーネントをプレビューできます。