スクリーンリーダー特集:スクリーンリーダーモードの作り方その(2)ルビの振り方マニュアル

       

さんかくすと文がえます

えすとれ先輩
えすとれ先輩

さて、「ふりがなえボタン」と「スクリーンリーダーモード」ができたらいよいよ本題ほんだいです。記事きじ本文ほんぶんにルビタグを使つかってふりがなをつけていきましょう。

どうやってルビ(ふりがな)をればよいの?

えすとれ先輩
えすとれ先輩

Webページないにふりがなをつけるには、<ruby>というタグを使つかいます。

えすとれ先輩
えすとれ先輩

<ruby>漢字<rt>かんじ</rt></ruby>

かたち使つかいます。

<rp>はおまけなので割愛かつあいしますね。

HTMLさん
HTMLさん

こんなふう表示ひょうじされます。

漢字かんじ

WordPressエディタでふりがなを

推奨すいしょう)「HTMLとして編集へんしゅう」にえてふりがなを追加ついかする

えすとれ先輩
えすとれ先輩

まずはカスタムHTMLモードでの編集へんしゅう方法ほうほう紹介しょうかいします。
手順てじゅん以下いかとおりです。

  1. ブロックエディタを使つかって原稿げんこう作成さくせいする
  2. 「HTMLとして編集へんしゅう」モードに変更へんこうする
  3. ふりがな(ルビタグ)を追加ついかする
ルビタグを入力するgifアニメーション
えすとれ先輩
えすとれ先輩

ね、簡単かんたんでしょう?

H松
H松

いやいやいや、れるまでは大変たいへんですって!……というか、入力にゅうりょくがパッとタグにわったのはどうやったんですか?

えすとれ先輩
えすとれ先輩

単語たんご登録とうろく機能きのう使つかって、以下いかのように入力にゅうりょくしたらルビタグに変換へんかんできるようにしているんです。入力にゅうりょくミスもりますし、半角入力はんかくにゅうりょく全角入力ぜんかくにゅうりょくえる手間てまはぶけますよ。

よみ(変換前へんかんまえ単語たんご変換後へんかんご
rb<ruby>
rt<rt>ふりがな</rt></ruby>
ルビタグを素早すばや入力にゅうりょくするための単語たんご登録とうろく一例いちれい

ブロックエディタのふりがな機能きのう使つか方法ほうほう

えすとれ先輩
えすとれ先輩

WordPressのブロックエディタにも、ふりがなをつける機能きのうはありますが……。

  1. ブロックエディタで原稿げんこう作成さくせいする
  2. ふりがなをりたい範囲はんい選択せんたくする
  3. 「よりリッチなテキスト制御せいぎょ」→「ふりがな(ルビ)」を選択せんたく
  4. ポップアップウィンドウがるのでふりがなを入力にゅうりょく
H松
H松

こっちのほうらくでいいじゃないですか!

えすとれ先輩
えすとれ先輩

たしかに簡単かんたんなんですけどね。たとえば選択せんたく範囲はんいやふりがなの内容ないよう間違まちがえたりした場合ばあいへんかたちでタグがはいってしまうことがあります。ただしくなおすにはHTML編集へんしゅうモードにする必要ひつようがあるので……。

それに、これからおはなしする「ふりがなのカスタマイズ」も、やっぱりHTML編集へんしゅうモードでないと実行じっこうできないんですよ。

ふりがなをカスタマイズする

えすとれ先輩
えすとれ先輩

さて、基本きほんのふりがなはれましたが、ここからカスタマイズをしてみましょう。
HTMLタグにはclassという属性ぞくせい付与ふよすることができ、CSSやJavascriptから参照さんしょう利用りようすることができます。

まなキキで使用しようしている属性ぞくせいについては、「スクリーンリーダーモードのつくかたその(1)」の記事きじ参照さんしょうください。

<ruby class=”hoge”>

<ruby class=”hoge piyo”>

かたち使つかいます。半角空白はんかくくうはく区切くぎることで、classは複数ふくすう指定していできます。

H松
H松

ほ、ほげ? ぴよ?

先輩せんぱい突然とつぜん呪文じゅもんとなえだした……

えすとれ先輩
えすとれ先輩

ほげぴよはたとえです。メタ構文こうぶん変数へんすうばれるものですね。

ふりがなをつね表示ひょうじする

M先生
M先生

すみませ~ん! ふりがなについて相談そうだんです。おさかなかんする漢字かんじ記事きじこうとおもっているんですが、難読漢字なんどくかんじおおいんですよ。ふりがなボタンをさなくても、その漢字かんじだけはつねにふりがなを表示ひょうじすることってできますか?

えすとれ先輩
えすとれ先輩

<ruby class=”rb_display_always”>といてふりがなをってください。これをつけたら、ボタンのオン・オフにかかわらずふりがなを表示ひょうじするようにしておきますね。

M先生
M先生

ありがとうございます! あ、さかな記事きじはこちらです。よかったらんでみてください。

ふりがな情報じょうほうませる

H松
H松

せんぱーい! VoiceOverに中島なかじまあつし山月記さんげつきませたら「なかしまとんのやまつきき」になりました!

えすとれ先輩
えすとれ先輩

あっちゃー。VoiceOverさんの誤読ごどくかぁ。でも、誤読ごどくじゃなくてもかた複数ふくすうあるときにどうむか、えらべるとさそうですね。たとえば四月一日しがつついたち、って書いて「しがつついたち」ってませたいときと「わたぬき」ってませたいときとか。「方角ほうがくほう」でも文脈ぶんみゃくによって「ほう」だったり「かた」だったりしますし。

えすとれ先輩
えすとれ先輩

<ruby class=”read_kana”>っていてふりがなをってくださいな。これで、スクリーンリーダーモードのときはふりがな情報じょうほうむようにしておきます。

H松
H松

山月記さんげつきげのちがいをためせるページはこちらです。スクリーンリーダーモードを起動きどうして、VoiceOverなどでげてみてください。VoiceOverの使つかかたはこちらに記事きじがあります。

まとめ

  1. ふりがな編集へんしゅうは「HTMLとして編集へんしゅう」でタグの直打じかうちが推奨すいしょう
  2. タグのかたパターンは以下いかとお
    1. 基本形きほんけい
      <ruby>漢字かんじ<rt>かんじ</rt></ruby>
    2. つねにふりがな表示ひょうじ
      <ruby class=”rb_display_always”>漢字かんじ<rt>かんじ</rt></ruby>
    3. 漢字かんじではなくふりがなをむ:
      <ruby class=”read_kana”>漢字かんじ<rt>かんじ</rt></ruby>
    4. 2.と3.をわせてもOK:
      <ruby class=”read_kana rb_display_always”>漢字かんじ<rt>かんじ</rt></ruby>
  3. タグは単語たんご登録とうろくしておくと便利べんり
  4. ルビタグは構造こうぞう一番いちばん内側うちがわへ!
よみ(変換前へんかんまえ単語たんご変換後へんかんご
rb<ruby>
rt<rt>ふりがな</rt></ruby>
rbr<ruby class=”read_kana”>
rbdrb_display_always
ルビタグを素早すばや入力にゅうりょくするための単語たんご登録とうろく一例いちれい
H松
H松

最後さいご項目こうもくなんですか?

えすとれ先輩
えすとれ先輩

ルビタグのなかほかのタグがはじまると、うまくスクリーンリーダーモードで変更へんこうできないんです。<ruby>と<rt>はセットで使つかってください。

// 入れ子構造をわかりやすくするため改行しています

// NGの例 rubyタグの中にspanタグがある
<p>
  <span class="marker-under">ルビと</span>
  <ruby>
    <span class="marker-under">漢字</span>
    <rt>かんじ</rt>
  </ruby>
  <span class="marker-under">とスクリーンリーダー</span>
</p>

// OKな例 rubyタグの中に他のタグが無い
<p>
  <span class="marker-under">ルビと
    <ruby>
      漢字
      <rt>かんじ</rt>
    </ruby>
    とスクリーンリーダー
  </span>
</p>

ふりがなのかた以上いじょうです!次回じかい、スクリーンリーダーモードのつくかたその(3)につづく!

タイトルとURLをコピーしました