反転テキストのアクセシビリティ考慮事項

アクセシビリティと反転テキスト

反転テキストや上下反転テキストは楽しくクリエイティブですが、重大なアクセシビリティの課題を提示します。

スクリーンリーダーが反転テキストを処理する方法

スクリーンリーダーはテキストを文字ごとに処理し、視覚的な外観ではなく実際のUnicode文字を読み上げます。

主な問題

1. 理解不能な出力： スクリーンリーダーは"olleH"を"Hello"と読むべきと判断できない
2. Unicode混乱： 上下反転Unicode文字は意図された視覚的意味とは無関係の名前を持つ
3. 検索失敗： 反転テキストはブラウザ検索（Ctrl+F）で元の単語を検索しても見つからない

ベストプラクティス

1. 視覚的に隠された代替テキストを提供：

<span aria-hidden="true">olleH</span>
<span class="sr-only">Hello</span>

2. Unicodeの代わりにCSS変換を使用：

.flipped {
  display: inline-block;
  transform: rotate(180deg);
}

3. 重要な情報に反転テキストを使用しない：

• ナビゲーションリンク
• フォームラベル
• エラーメッセージ

WCAGガイドライン

WCAG 2.1はテキストコンテンツがプログラム的に決定可能であることを要求しています（達成基準1.3.1）。Unicode置換文字を使用した反転テキストは、代替が提供されない場合、技術的にこれに違反します。