VoiceOverの読み上げを意識したコンポーネントを作成しました

きっかけ

4月に弊社がアクセシビリティプロジェクトを立ち上げた事もあり、日々のプロダクトに対するアクセシビリティの課題に取り組んでおります。

上記の記事でも書かれていますが、2024/7/5のような日付はにせんにじゅうよん すらっしゅ なな　すらっしゅ　ごとVoiceOverに読まれてしまいます。

ではtimeタグにしてdatetimeに正しい文字をいれてみてはどうかと考えました。

<time datetime="2024年7月5日">2024/7/5</time>

それでもVoiceOverでの読み上げはにせんにじゅうよん すらっしゅ なな　すらっしゅ　ごです。

そこで「aria-labelが使えないタグで読み上げを設定したいときの対処方法」の記事にも書いてあった実装方法を応用したコンポーネントを作成してみました。

実際のコード

ReadItem.tsx

import { css } from "@emotion/css" //css in jsはemotionを使っています
import { ReactNode, ElementType, AllHTMLAttributes } from "react"

interface Props extends AllHTMLAttributes<HTMLElement> {
  children: ReactNode
  readText: string
  tagType: ElementType
}

export const ReadItem = ({
  children,
  readText,
  tagType: Tag = 'span',
  ...props
}: Props) => {
  return (
    <>
      <Tag {...props} aria-hidden="true">
        {children}
      </Tag>
      <span css={hasAriaLabelStyle}>{readText}</span>
    </>
  )
}

const hasAriaLabelStyle = css({
  transform: 'scale(0,0)',
  position: 'absolute',
})

Propsにchildrenと読み上げ用のreadText、HTML要素も汎用的に変更できるようにtagTypeを渡しています。
ではこのコンポーネントを使用して先程の日付を読み上げるように文章をつくってみます。

App.tsx

import { ReadItem } from "./ReadText";

export default function App() {
  return (
    <div className="App">
      <p>
        <ReadItem
          tagType="time"
          readText="2024年7月24日"
          dateTime="2024年7月24日"
        >
          2024/7/24
        </ReadItem>
        は土用の丑の日
      </p>
    </div>
  );
}

実際のHTMLではこんな感じになっています。

<p>
    <time datetime="2024年7月24日" aria-hidden="true">2024/7/24</time>
    <span class="css-1afofdy">2024年7月24日</span>
    は土用の丑の日
</p>

VoiceOverでも正しく読まれたようです。

実際に作成したdemoがこちらです。