読み上げられない、divやspanのaria-label

星とトラックは CSS の背景画像なので、各 span の中身は空です。

span は空でロールがないため、ラベルが読まれないことがあり、多くのスクリーンリーダー利用者には評価と送料の条件が届きません。

role="img" で各 span は一つの画像になり、画像には名前を付けられるため、スクリーンリーダーは「5点中4点の評価、画像」「送料無料、画像」と読みます。各要素に属性を一つ足すだけの、最も小さな変更です。ただし、span の中身が画像だけだから成り立ちます。role="img" は中身をすべて隠すため、テキストやリンクを含む要素には付けないでください。言葉は支援技術にしか届かず、トラックの意味を知らない見える人には何も伝わらないままです。

どの方法でも、評価と送料の条件がスクリーンリーダーに読まれる場所に置かれるため、1.1.1を満たします。role="img" は最も小さな変更ですが、言葉は支援技術にしか届かず、aria-label を翻訳しない翻訳ツールもあります。隠したテキストはどのスクリーンリーダーでも読まれ、翻訳もされますが、見える人にはアイコンしか残りません。カードに言葉を書く方法は普通のHTMLで済み、ページを読むすべての人に届き、ARIAに任せるものが残りません。こちらを使ってください。言葉を置く余白が本当にない場所に限り他の二つを使い、その場合はロールが不要で翻訳される、隠したテキストを選びます。

名前を持てる要素。 aria-label が働くのは、名前を付けられるロールの要素です。ボタン、リンク、入力欄などの操作要素、nav などのランドマーク、画像、iframe、ダイアログ、表、グループがそうです。ARIAは、次のようなロールに名前を付けることを禁止しています。

• generic。ほかのロールのない div と span のロールです。
• paragraph。p のロールです。
• presentation と none。要素のロールを意図的に取り除きます。
• strong、emphasis、code、time、mark、deletion、insertion、subscript、superscript、term、definition などの文字レベルのロールと、caption。

aria-labelledby も同じロールでは禁止されているため、隠したテキストを指しても解決しません。

読み方を変えたいテキスト。 <time aria-label="2026年10月3日">10/3</time> や <span aria-label="12点">12</span> のように、テキストの読み方を変えるためにラベルを付けることがよくあります。どちらの要素にも名前は付けられません。詳しい言葉を見えるテキストで書くか、短い表記の隣に視覚的に隠したテキストを置き、短い表記を aria-hidden="true" で隠します。スクリーンリーダーは短い日付や数字をすでにうまく読むため、変更が本当に必要か先に確認してください。

title や aria-describedby は代わりにならない。 title 属性は、一部のスクリーンリーダーが一部の要素でだけ読み、画面上はマウスを乗せたときにしか表示されません。aria-describedby はどの要素にも付けられますが、スクリーンリーダーが説明を読むのは主に操作要素にフォーカスが移ったときで、span の説明は聞き逃されやすくなります。

role="img" は中身を隠す。 role="img" の要素の中身は、すべて画像の一部として扱われ、読まれません。画像だけを持つ要素にだけ使い、件数やリンクは外に置きます。

コンポーネントのprops。 label を受け取り、外側の div に aria-label として渡すコンポーネントは多くあります。実際に出力されるHTMLを確認してください。ロールのない囲みのラベルは失われます。共通のアイコンや評価のコンポーネントでは、ラベルを受け取ったら role="img" を付けるか、ラベルを隠したテキストとして出力します。