アクセシビリティとテーマ

組み込まれているもの

• キーボード。 コレクションの表示ボタンはラジオグループで、タブ停止は1つ、矢印キーで選択が動きます。表示の中のカードは、アクセシブルな名前が「Inspect」とカード名のボタンで、EnterかSpaceで開きます。表示にフォーカスがあるとき、+、-、0でズームとFitができます。カードのAnimateボタンはaria-pressedを持つ本物のボタンです。
• タッチ。 すべての操作は48 px四方以上です。カードの上から始めたドラッグやピンチも使え、動かなかったタップは、クリックとしてカードに渡されます。
• 動きの軽減。 prefers-reduced-motion: reduceのときは、カードの回転、裏返しの遷移、画像のパン、自動再生、ライブ3Dのカードがすべて止まります。飛ぶ動きと扇は、アニメーションなしで移り、どの動きも、動きありの場合と同じ位置で終わります。有効にするための設定は要りません。
• 予期しない動きはない。 カードが勝手に自動再生することはなく、閲覧者が動きの軽減を求めている場合は、自動回転も始まりません。
• 画像の説明は利用側の役目。 カードの絵は、スロットに入れたものそのものです。各<img>にaltを付けてください。コレクションの項目では、スクリーンリーダーが読み上げるのはnameです。

利用側に任されていること

渡す画像のコントラスト、画像の説明、要素のまわりのページです。ブラウザー、支援技術、端末の確認範囲は限られています（制限を参照）。ここにあるものは、デスクトップとスマートフォンの大きさのヘッドレスChromiumで確かめたもので、実機のスマートフォン、Safari、Firefoxでは確かめていません。

ライトとダーク

コレクションは、初期値では閲覧者のライト／ダークの設定に従います。要素にtheme="light"かtheme="dark"を付けると、ページ側で決められます。カードスタジオとデモも、同じ理由でURLの?theme=を読みます。

<fuda-collection view="deck" theme="dark"></fuda-collection>
<script type="module">
  import '@johnmorrisdotca/fuda-cards/collection-element';
  document.querySelector('fuda-collection').cards = [{ name: 'Alpha', image: '/a.jpg' }];
</script>

大きさと余白

シャドウルートは外部のスタイルシートからは閉じているので、これらのカスタムプロパティが外へ開かれたインターフェースです。枠の色はvariantとfinishで決まります。

ステージを画面に収める

ズームバーは表示の下にあります。ビューアーの上に置くものを短くして、操作が最初の画面に収まるようにしてください。低いウィンドウでは、--fuda-stage-heightを小さくします。

<style>fuda-collection { --fuda-stage-height: clamp(260px, calc(100svh - 620px), 620px); }</style>
<fuda-collection view="case"></fuda-collection>
<script type="module">
  import '@johnmorrisdotca/fuda-cards/collection-element';
  document.querySelector('fuda-collection').cards = [{ name: 'Alpha', image: '/a.jpg' }];
</script>

関連

カードが空白、またはちらつく場合は困ったとき・よくある質問、動くものすべては動きと回転を参照してください。