テキストを1文字ずつタグで囲う時のアクセシビリティ対応

テキストの装飾やアニメーションをするため、1文字ずつspanタグなどで囲うことがたまにありますが、そういった実装をする場合のアクセシビリティ的な考慮について考えてみます。

サンプルコード

例として、以下のように1文字ずつspanタグで分割します。

<p>
  <span>あ</span>
  <span>い</span>
  <span>う</span>
  <span>え</span>
  <span>お</span>
  <span>か</span>
  <span>き</span>
  <span>く</span>
  <span>け</span>
  <span>こ</span>
</p>

1文字ずつ分割するデモページ
スクリーンリーダーで確認してみて、VoiceOverやNVDAだと問題なく読み上げされていたのですが、PC-Talkerだと1文字ずつ読み上げられてしまうようでした。

aria-hiddenで分割したテキストは読み上げ対象としないようにした上で、読み上げ用のテキストを別途用意する形で対応をしてみます。
まずはaria-hiddenを設定してみます。

<p>
  <span aria-hidden="true">あ</span>
  <span aria-hidden="true">い</span>
  <span aria-hidden="true">う</span>
  <span aria-hidden="true">え</span>
  <span aria-hidden="true">お</span>
  <span aria-hidden="true">か</span>
  <span aria-hidden="true">き</span>
  <span aria-hidden="true">く</span>
  <span aria-hidden="true">け</span>
  <span aria-hidden="true">こ</span>
</p>

これで該当部分は読み上げに含まれなくなりました。
aria-hiddenを設定するデモページ

次に読み上げ用のテキストを別途用意する方法ですが、まずはaria-labelを試してみます。

<p aria-label="あいうえおかきくけこ">
  <span aria-hidden="true">あ</span>
  <span aria-hidden="true">い</span>
  <span aria-hidden="true">う</span>
  <span aria-hidden="true">え</span>
  <span aria-hidden="true">お</span>
  <span aria-hidden="true">か</span>
  <span aria-hidden="true">き</span>
  <span aria-hidden="true">く</span>
  <span aria-hidden="true">け</span>
  <span aria-hidden="true">こ</span>
</p>

これで問題ないかと思ったのですが、VoiceOverだと「あいうえおかきくけこ、カラのグループ」、NVDAだと「ブランク」と読み上げられ、PC-Talkerだと読み上げ対象とならないようでした。
aria-labelを使用するデモページ

別の方法として、visually-hiddenで読み上げ用のテキストを用意してみます。

<p>
  <span aria-hidden="true">あ</span>
  <span aria-hidden="true">い</span>
  <span aria-hidden="true">う</span>
  <span aria-hidden="true">え</span>
  <span aria-hidden="true">お</span>
  <span aria-hidden="true">か</span>
  <span aria-hidden="true">き</span>
  <span aria-hidden="true">く</span>
  <span aria-hidden="true">け</span>
  <span aria-hidden="true">こ</span>
  <span class="visually-hidden">あいうえおかきくけこ</span>
</p>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

この方法だと、NVDA・PC-Talker共に意図した読み上げがされるようになりました。
visually-hiddenを使用するデモページ