前のエピソード――『░▒⠙⠏⠉⠪キャ⠸⠹ハハ⠸⠹ハハハ⡀⡁⡂ハハ⠚⠛ハ！！！！⠃⠄⠙⠜⠝⠞▒░』

最新話

　当連載の『「秘密基地は大迷宮〈ダンジョン〉に」の呪文を編集』にて「ルビを使って無理やり読ませるなどの手法」と書きましたが、どうやらその方法は気軽には使えないようです。

　NVDA や VoiceOver はもちろん、最大シェアである「PC-Talker」においても、デフォルトでルビは読み上げてくれないからです。

　PC-Talker Neo の豪華版である「Plus」に同梱されているスクリーンリーダー用のウェブブラウザ、「NeoReader」ならデフォルトでルビ優先で読み上げてくれるのですが、Google Chrome や Microsoft Edge、Firefox あたりだと、読み上げながらルビを読ませることができません（少なくともぼくにはその設定がわからなかった）。

　一文字ずつ読み上げる形でならルビつきで読んでくれるのですが、ルビベースとルビテキストを両方読み上げてしまうため、ぼくにはかえって分かりづらく感じました。

　どうやらスクリーン・リーダー界では、まだルビの対応は完璧とは言えないようです。

　▽

　傍点に関しても、カクヨムさんの仕様がアクセシビリティ的にはあまり理想とは呼べない感じです。

　具体的には、「これに傍点がつきます」の場合、コードがこうなります。

こ

れ

に

傍

点

が

つ

き

ま

す

　また、傍点本体は傍点が背景画像としてついています。

　つまり、熟語もなにもかも1文字ずつで分解されてしまうわけです。

　そのため、実際に読み上げてみると、スタッカートっぽくなります。

　上記なら「こっれっにっ傍っ点っがっつっきっまっす」みたいになります。

　それだけなら「むしろ傍点っぽい」で済むのですが、ひと繋ぎで読み上げなければいけない部分も全て分断されてしまうため、意味不明になりがちです。

　つまり「空間」が「そら　あいだ」となってしまうわけです。

　これはいただけません。

　技術的な問題のせいで、等価な情報が提供できなくなっている状態です。

　これなら、文字数をカウントしてルビとし、text-emphasis プロパティの値を filled にするか（古くから使われている手法です）、素直に text-emphasis-style プロパティを使うべきです。

（text-emphasis を filled にすると、ルビをルビベース（元の文字）に対して均等に配置しろという命令で、text-emphasis-style は文字に傍点的な修飾を施すプロパティです）

　これならば、主要ブラウザのほとんどで問題なく表示できたはずです。

　もしかするとかの懐かしき Internet Explorer に対応するためだったのかもしれませんが（上記メソッドはどちらも IE では使えない）、IE が無事に修祓された今、この辺りの設定はちょっと見直したほうがいいのではないか、と考えます。

　▽

　どーでもいい思い出話ですが、ぼくは HTML5 と CSS3 の Working Group の意見交換会みたいなものに参加していたのですが、そこで「ルビは HTML にスタイルを持たせず、配置方法なども含めて完全に CSS 側でコントロールできるようにすべきだ」と強く提唱していました。

　既存の HTML との互換性の問題もあって、少数派だったのですが、CSSでコントロールできない部分があると絶対に後で困ることになるし、そもそも役割分担としてもそれが正しいという確信がありました。

　また、ルビを複数つけたり、ルビにルビを打ちたいなどのシーンも結構あったりしますが、それも HTML にスタイルが一部依存していると、実現が難しくなります（実際、ごく一部のブラウザ以外では完全には実現できていません）。

「原理主義的だ」などの理由で「考えるに値しない」と言われて「がーん」となって、その後すごすごと WG を去ったのですが、最近ようやく「ルビのスタイルが HTML に依存していて CSS だけではコントロール不能（あるいは裏技的に解決する必要がある）なのはおかしい」といった意見を聞くようになりました。

　HTML Living Standard と CSS の次期バージョンあたりで解決してほしいと心から願っています。

　▽

　HTML のルビのコントロールとブラウザ間の差異をなくすために、マークアップエンジニアがどれほど苦労しているかは、下記の記事なんかが参考になるかも知れません。

ふりがなのレイアウト（動くCSSのためのメモ。さま）

https://lopan.jp/ruby-elements/layout/