Edge読み上げ機能でのルビ二重読み上げ問題：ルビだけ読ませる方法

課題

Microsoft Edge の読み上げ機能は、<ruby> タグを正しく解釈できず、ルビ（ふりがな）と本文が二重で読み上げられる。

「edge 読み上げ ruby」で検索すると、同様の問題について指摘されている。

• Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡
• 読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察

---

解決方法

<ruby>タグを、以下のような構造に変換し、CSSで見た目だけは従来のルビ表示を再現するブラウザ拡張を作成した。

変換例：

<ruby>漢字<rt>よみかた</rt></ruby>
↓
<span class="ruby-outer" data-ruby-base="漢字"><span class="ruby-inner">よみかた</span></span>

CSSにて、::before を使用して本文（漢字部分）を表示し、ruby-inner （ルビ）は上に小さく配置する。これにより見た目は元のままで、読み上げ対象をルビのみに限定できる。

作成したプラグイン

https://github.com/lisosia/novel-ruby-fix/