アクセシビリティ#
ssg.a11y を有効にすると、テーマ付きページに次が付きます。
<body>内で最初にフォーカスできる 本文へスキップ リンク- スキップリンクの行き先としての
<main>のid="ox-main" - ヘッダー、サイドバー、検索、リーダー chrome の余分を隠す印刷 CSS
機能は自分でオンにするまでオフです。オフのページにはスキップリンクも追加の印刷 CSS も出ません。
import { oxContent } from "@ox-content/vite-plugin";
export default {
plugins: [
oxContent({
ssg: {
a11y: true,
},
}),
],
};
false または省略は追加分をオフのままにします。true は既定でオンです。オブジェクトを渡すと機能はオンになり、スキップリンクのラベルだけ上書きできます。
oxContent({
ssg: {
a11y: { skipLinkLabel: "Skip to main" },
},
});
| フィールド | 既定 | 効果 |
|---|---|---|
skipLinkLabel |
"Skip to content" |
スキップリンクの文言。HTML 内ではエスケープされる |
スキップリンクは class="ox-skip-link" と href="#ox-main" です。CSS はキーボードフォーカスを受けるまで視覚的に隠し、最初の Tab 停止位置がスキップリンクになります。
印刷出力は記事を残し、サイト chrome を隠します。ヘッダー、サイドバー、検索モーダル、コピーや先頭へ戻るといったリーダー chrome です。
bare モードはスキップリンクも追加の印刷 CSS も出しません。敵意のあるラベルでもリンク文言の外へは出られません。
埋め込みの状態#
読者のブラウザで解決されるものはほとんどありません。カード、プレーヤー、リンクプレビューはすべてビルド時に一度作られ、静的な HTML として配信されるため、表示すべきローディング状態がありません。解決済みの状態で届きます。ビルド時のフェッチが失敗した場合、配信されるのは最初からフォールバックまたはエラーカードで、読者がその過程を見ることはありません。
例外は island です。コンポーネントタグはブラウザでハイドレートするため、時間経過で状態が変わる唯一の埋め込みです。
| 状態 | マーカー | 見た目 |
|---|---|---|
| loading | .ox-island-loading |
スピナー（短い遅延の後に表示するので、速いハイドレートでは点滅しません） |
| resolved | [data-ox-hydrated] |
コンポーネント自身 |
| error | .ox-island-error |
元の静的コンテンツを、非インタラクティブとして表示 |
いずれも prefers-reduced-motion: reduce を尊重します。
モーションの抑制#
組み込みの埋め込みと island のスタイルは prefers-reduced-motion: reduce を尊重します。Open Graph カード、GitHub カード、未ハイドレートの island のローディングスピナーは回転を止め、island のスケルトンはシマーを止め、タブと YouTube プレースホルダのホバートランジションは無効になります。
各インジケータは形を保つので、読み込み中のカードは読み込み中に見えたままです。消えるのは動きだけです。これらのスタイルは埋め込み自体に同梱され、設定は不要です。