Skip to content
fandhe-frontend
GitHub

Visually Hidden

fandhe-frontend-pre-styled-ui の visually_hidden mod が提供するスタイル済み Visually Hidden 部品です。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

視覚的には隠す（clip 手法）が支援技術には読ませ続けるテキストコンテナ。アイコンのみのボタンに補足テキストを添える用途などに使います。aria-hidden は一切出力しません。

Features

  • 視覚的には隠す（clip 手法）が支援技術には読ませ続けるテキストコンテナ
  • aria-hidden は一切出力しない（子孫テキストをアクセシブルネームとして読ませる用途）
  • アイコンのみのボタンへ補足テキストを添える等の用途に使う

Anatomy

root

Examples

アイコンのみのボタンへの補足テキスト

装飾アイコン（aria-hidden）+ VisuallyHidden のテキストでアクセシブルネームを与えます。aria-label を併用すると accessible-name 計算で aria-label が勝ち VisuallyHidden テキストが読み上げられなくなるため併用しません。