Skip to content
fandhe-frontend
GitHub

Visually Hidden

視覚的には隠すが支援技術（スクリーンリーダー）には読ませ続けるテキストコンテナです。fandhe-frontend-headless-ui の visually_hidden mod は Root（span）の 1 パーツのみで構成され、装飾要素の aria-hidden="true" 固定付与パターンとは逆に aria-hidden を意図的に付与しません。Themes 版と異なり clip 手法の CSS を持たず、構造の出力のみを担います。

スタイル済みの表示例は Visually Hidden を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Total: (screen-reader only) 42 items

Features

  • Root（span）の 1 anatomy パーツのみで構成する最小の状態非依存パーツ（visually_hidden.rs:50-61）。
  • 視覚的には隠すが支援技術（スクリーンリーダー）には読ませ続けるテキストコンテナであり、装飾要素とは逆に aria-hidden を意図的に付与しない（visually_hidden.rs:11-21）。
  • styled 層（fandhe-frontend-pre-styled-ui::visually_hidden）は本モジュールが出力する data-scope="visually-hidden"/data-part="root" セレクタを前提に clip 手法の CSS を当てる（visually_hidden.rs:23-29）。

Anatomy

root

API Reference

Arguments

NameTypeDefaultDescription
root: attrsVec<(&str, &str)>vec![]呼び出し側が追加する属性。data-scope/data-part は本パーツが固定出力するため上書きされない（visually_hidden.rs:58-61）。root が唯一の公開関数であり attrs/children 以外の型付き引数を持たない。
root: childrenVec<Node>vec![]視覚的には隠すがスクリーンリーダーには読み上げさせるテキスト・ノード（visually_hidden.rs:58-61）。

Examples

Status label prefix

視覚的には記号のみを見せつつ、スクリーンリーダーには前置ラベルを読ませる例です。

Build status: ✓ Passing

Accessibility

WAI-ARIA

AttributeDescription
(該当なし)root は固有の role/aria-* を出力しない（visually_hidden.rs 全文の非テスト行で role/aria- grep 0 件）。装飾要素の aria-hidden="true" 固定付与パターンとは逆に、本コンポーネントは aria-hidden を意図的に付与しない（visually_hidden.rs:11-21）。