質問: 漢字の読みが難しいタイトルを、正しく読み上げさせたいのですが良い方法はありませんでしょうか。 チェック端末は、androidのchromeで、ユーザー補助のTalkbackを使って読ませています。 仮にタイトルを次のものとします。 真備町妹千歳楽(まびちょうせ せんだいろく)保存会 このままでは、『まびちょういもうとちとせらくほぞんかい』と読まれます。 タグ内はタグが使えないため、 ``` 真備町妹 千歳楽 ``` このようにルビを使った場合は、 ``` 真備町妹千歳楽 ``` そのまま出力されます。 理想的な目標は、 ■ブラウザ上部へのタイトル表示 『真備町妹千歳楽保存会』 ■Googleへ掲載されるタイトル 『真備町妹千歳楽(まびちょうせ せんだいろく)保存会』 ■音声で読み上げられる内容 『まびちょうせ せんだいろく ほぞんかい』 となることです。 ``` 真備町妹千歳楽保存会 まびちょうせ せんだいろく ほぞんかい ``` 2重に表記するとこで、aria-hidden="true" で読み上げをスキップできないか、 @media only speech {.not_voice {display:none;}} メディアクエリで回避できないかと試してみたのですが、上手くいきませんでした。 どなたかよい方法があれば、教えていただけると助かります。
回答: これとかどうでしょう。 【知っていると便利なaria-label属性の使い方 – ofujimiki】