Skip to main content
Designkufu

smarthr-ui-visually-hidden-text

VisuallyHiddenTextは、視覚的には隠しつつスクリーンリーダーには読み上げさせたいテキスト用のコンポーネントです。見出しやラベルが自明で、表示すると視覚的に冗長になるときなどに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-visually-hidden-text
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-visually-hidden-text/SKILL.md -o .claude/skills/smarthr-ui-visually-hidden-text.md

Drops the SKILL.md into .claude/skills/smarthr-ui-visually-hidden-text.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

視覚的には隠しつつスクリーンリーダーには読み上げさせたいテキスト用のコンポーネントです。見出しやラベルが自明で、表示すると視覚的に冗長になるときなどに使います。

import

import { VisuallyHiddenText } from 'smarthr-ui'

Props

（固有 Props なし）

実装ルール

VisuallyHiddenText に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

使い方チェックリスト

使用上の注意

  • [avoid] VisuallyHiddenText を必要以上に使いすぎない
  • [should] 文脈をしっかり考慮し、スクリーンリーダーユーザーにとって価値のある情報を提供する