閑閑空間
閑閑空間

ウェブサイトの「ルビ」と「フォント」

2025年6月

　ウェブサイトを作るにあたって、《だれ》でも《よ》みやすい《ないよう》にするよう心がけるとしたら、《むずか》しい《かんじ》にはできるだけルビを《ふ》るほうがよい。ルビを振るためのHTMLのコードは、以下のように書く。

  1. <ruby>
  2.   <rb>漢字</rb>
  3.   <rp>《</rp>
  4.   <rt>かんじ</rt>
  5.   <rp>》</rp>
  6. </ruby>
《 かんじ 》

　全体を<ruby>タグで《くく》り、<rb>タグに《おやじ》を書いて、<rt>タグにルビを書く。なお、<rp>タグは、ルビ表示非対応のブラウザだった場合に、親字の後ろでカッコに括って表示する時に記号を指定する。一文字ずつ別で指定すれば、「漢」に「かん」、「字」に「じ」となるように個別で指定することも可能だ。

　見ての通りとても《めんどう》なのだが、親字とルビを入力すると《いつかつ》で上の形式に《へんかん》してくれるウェブサービスが《ゆうし》によって提供されているので、活用するとよい。

ルビを振るときの仕様上の問題

　ただ、このルビの記法には一つ大きな問題がある。それは、音声読み上げアプリを用いて、この記法で書かれた文章を読み上げると、親字とルビを両方読んでしまう、という問題である。（以下の記事に詳しい→Webのルビ仕様にはアクセシビリティを《そがい》している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡）

　たとえば、先の例だと、「かんじかんじ」と二回読み上げてしまう。漢字ごとに《こべつ》でルビを指定していた場合は、「かんかんじじ」と読み上げてしまう。これでは、音声で聞いても意味を理解することができない。

　つまり、難しい漢字を読みやすいようにすると、音声読み上げを必要とする人（例：《しかくしようがいしや》）が困る、という非常にまずい《じようきよう》になっているわけだ。上の記事にあるように、これは仕様がおかしいと言うほかないのだが、一応、ソースコードを工夫することできちんと読み上げさせることは可能である。それが以下のコードである。

  1. <ruby aria-label="かんじ">
  2.   <rb aria-hidden="true">漢字</rb>
  3.   <rp>《</rp>
  4.   <rt>かんじ</rt>
  5.   <rp>》</rp>
  6. </ruby>

　「aria-label=」でその範囲の読み上げ音声を指定し、親字に「aria-hidden="true"」と書くことで、その部分の読み上げをパスさせる。ただでさえ面倒なところに、さらに指定することが増えてより大変だが、何はともあれ、これによって音声読み上げは上手く行くようになる。もちろん、《なんどく》で音声読み上げアプリがきちんと読んでくれないという場合にも、この《ぎじゆつ》は役に立つ。

　ちなみに、「aria-label=」と「aria-hidden="true"」は、<ruby>タグに限らず広く使えるので、「音声で聴くときにこの部分を読んじゃうとかえって分かりにくい」という箇所や、「ここは別の読み方をしてほしい」という箇所で《はばひろ》く応用可能だ。覚えておくと便利な記法である。

ルビの表示・非表示切り替え

　さて、これでルビを問題なく振れるようになったわけだが、次に「ルビが多すぎて読みにくい」という現象があることにも目を向けたい。ルビを振ると、どうしても行間が詰まり、ディスレクシア（《しきじしようがい》）の人などがかえって文字を読み取りにくくなる場合がある。

　これを解消するためには、ルビの表示・非表示を切り替えられるようにすればよい。これをJavascriptで実現するのが以下のコードだ。

  1. function toggleRuby() {
  2. const rtElements = document.querySelectorAll("rt");
  3. rtElements.forEach((rt) => {
  4.   const isHidden = rt.hasAttribute("hidden");
  5.   if (isHidden) {
  6.     rt.removeAttribute("hidden");
  7.   } else {
  8.     rt.setAttribute("hidden", "");
  9.   }
  10. });
  11. }

　このコードを「ruby.js」（仮）などとして保存し（直接同じhtmlファイルの<body>タグの中に書いても良い）、表示したいhtmlファイルの方で以下のように書いて、jsファイルを読み込ませて、ボタンを表示する。

  1. <body>
  2.   <button onclick="toggleRuby()">ルビ</button>
  3.   （ホームページの内容）
  4.   <script src="./ruby.js"></script>
  5. </body>

　こちらは一回作ればずっと使いまわせるので、それほど大変ではない。やっぱり漢字一つ一つに自力でルビを振るほうがはるかに大変だ。Wordでふりがなを《いつかつ》で振るマクロがあるらしいので、そういうのを活用して、html形式で出力する、という方法もありかもしれない（私はWordを持っていないので確かめられないが）。

フォントについて

　ついでに書いておくと、このホームページでは、より多くの人に読みやすい文字を目指して作られた、ユニバーサルデザインのフォントを使うように指定している（BIZ UD 《みんちょう》、BIZ UD ゴシック）。みなさまのお使いのパソコンの環境によっては異なるフォントで表示されるかもしれないが、そのあたりのことは詳しく調べ切れていない。

　これを指定するためには、cssでfont-familyを指定するとよい。数種類のフォントを指定しておくことで、当該のフォントが非対応だった場合に代替案を示すことができる（先に書かれるフォントが優先される）。

  1. BODY { font-family: "BIZ UD明朝", "Helvetica Neue", Meiryo, "Hiragino Kaku Gothic Pro", sans-serif; }
  2. H1 { font-family: "BIZ UDGothic", "Helvetica Neue", Meiryo, "Hiragino Kaku Gothic Pro", sans-serif; }

　このように書くと、全体は明朝体、見出し語（H1タグ）はゴシック体、という形で表示することができる。本サイトもこの方法でフォントを使い分けている。

まとめ

　ウェブサイトのアクセシビリティについては「画像にALTをつける」ことがよく取り上げされるが、じゃあ画像さえ気を付ければ問題ないかというと、そういうわけでもない。みなさんもぜひ音声読み上げ《きのう》を使って、普段見ているウェブサイトを読み上げさせてほしい。するとそのことがよく分かるだろう。

　正直、個人で作っているホームページでは、技術的にも時間的にも《しげん》が限られるため、アクセシビリティを《かんぺき》にすることは難しい。そこで、こうしたシステムを《こうちく》している《そしき》や、資源をたくさん持っている組織（公の組織や大企業など）に、《かいぜん》の要求を出し続けることが重要になってくる。ただ、そうした要求をより《だいきぼ》なものにするためには、結局は個人個人でどこに問題があるのか、何が足りていないのかということを《はあく》し、伝えていく必要があるだろう。

　ごく個人的な《どうき》としては、せっかくウェブサイトで作るのだから、《かみばいたい》では実現できないことをできるだけ盛り込みたい、という気持ちがある。ただ、そもそもルビや漢字以前に、言葉や文章を分かりやすく、読みやすいものにする工夫が全然足りていないので、それも同時に気を付けていきたい。

←戻る