メディア
Watermark
文字や画像を低い不透明度でタイル状に重ねる透かし。重ねた層は pointer-events なしで aria-hidden なので、下の中身の操作や読み上げを邪魔しません。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Watermark text="Confidential" rotate={-22} opacity={0.1}>
<p>Protected content</p>
</Watermark>設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
text | string | — | Text to tile as the watermark. |
image | string | — | Image URL to tile instead of text. |
rotate | number | -22 | Rotation in degrees. @default -22 |
gap | [number, number] | — | Gap between repeated tiles as `[x, y]` in pixels. @default [100, 60] |
opacity | number | 0.12 | Opacity of the overlay (0–1). Keep subtle to avoid obscuring content. @default 0.12 |
children | ReactNode | — | Content rendered beneath the watermark. |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。