スクリーンリーダー特集：ふりがなをつけたページでも、スクリーンリーダーに正しく読ませることができます！

2021.08.12

▶（さんかく） を押（お）すと文が増（ふ）えます

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

このページは、以前いぜん「スクリーンリーダーモードの作つくり方かた」と題だいして3つの記事きじで連載れんさいした内容ないようのまとめです。作成さくせいに必要ひつような工程こうてい・工夫くふうのみを抜粋ばっすいしています。

このページではこんな問題もんだいの解決かいけつができます。これらを解決かいけつする工夫くふうを、まなキキでは「スクリーンリーダーモード」と呼よんでいます。

  • スクリーンリーダー（VoiceOver、PC-Talkerなど）の利用りようを想定そうていしたページだが、難読なんどく漢字かんじや固有名詞こゆうめいしなどの読よみ上あげ方かたが間違まちがっているので補正ほせいしたい。
  • キッズページを作成さくせいしてふりがなをつけたが、スクリーンリーダーで読よみ上あげさせると漢字かんじとふりがなを二重にじゅうに読よみ上あげてしまう。二重にじゅう読よみ。文章ぶんしょうが途切とぎれる。
  1. 簡単かんたんな仕組しくみ
  2. つくりかた
    1. HTMLファイル
    2. CSSファイル
    3. Javascriptファイル
  3. スクリーンリーダーモードの利用りようについて、まなキキからのお願ねがい
  4. おまけ：ふりがな切きり替かえボタン
    1. HTMLファイル
    2. CSSファイル
    3. Javascriptファイル
  5. 関連かんれん記事きじ

簡単かんたんな仕組しくみ

ふりがなのルビタグを含ふくむ、Webページのソースコード構成こうせいがスクリーンリーダーにとって読よみ上あげにくくなっていることが二重にじゅう読よみの原因げんいんです。Javascriptを使つかって一時的いちじてきにHTMLソースを書かき換かえることで、スクリーンリーダーの読よみ上あげに最適化さいてきかします。書かき換かえのついでに、固有名詞こゆうめいしなどはふりがなの方ほうを読よませるようにすれば誤読ごどくもなくなります。

「HTMLソースの書かき換かえ」は各かくクライアントのブラウザ上じょう・そのページでのみ実行じっこうされ、サーバ側がわには影響えいきょうしません。ページを移動いどうしたり、再さい読よみ込こみするたびにスクリーンリーダーモードはリセットとなります。

つくりかた

HTMLファイル

スクリーンリーダーモードを切きり替かえるボタン

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

Webページの可能かのうな限かぎり上うえに配置はいちしてください。スクリーンリーダーを使つかってアクセスした時ときに、真まっ先さきに変更へんこうできるようにしましょう。見出みだし要素ようそで囲かこむことで、見出みだしジャンプ機能きのうでも確実かくじつにみつけることができます。

<!-- スクリーンリーダー向け　ふりがなを取り払ってテキストをまとめる -->
<div class="visually-hidden">
  <h5>
    <button id="sr" type="button">
      <span>スクリーンリーダーモード。このボタンを押すと、
      ご利用中のスクリーンリーダーの読み上げをスムーズにできます</span>
    </button>
  </h5>
</div>

ふりがなをつける箇所かしょ

<!-- 基本の振り方。スクリーンリーダーモードでは「四月一日」が残り、読み上げられます -->
<ruby>四月一日<rt>わたぬき</rt></ruby>

<!-- 漢字ではなくふりがなを読ませる。スクリーンリーダーモードでは「わたぬき」が残り、読み上げられます -->
<ruby class="read_kana">四月一日<rt>わたぬき</rt></ruby>
えすとれ先輩
えすとれ先輩

『四月一日（わたぬき）』、のような括弧かっこ書がきによるふりがなには対応たいおうできません。ルビタグをご利用りようください。

HTML <ruby> ルビ注釈要素 - HTML | MDN
は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。
developer.mozilla.org

CSSファイル

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

スクリーンリーダーモードのボタンを見みせる必要ひつようはないので、隠かくしてしまいましょう。リンク先さきのCSSを書かき写うつしてください。

通称visually-hiddenについて - Qiita
これはなに アクセシビリティ対応意識でのマークアップとして非常に利便性のある通称visually-hiddenというCSSスニペットがあります。 Qiitaで検索した際に特段ヒットしなかったので備忘録件、皆さんもぜひ使ってみてください！ ど...
qiita.com

Javascriptファイル

「スクリーンリーダーモード」のボタンを押おした時ときの処理しょり

/*
 * スクリーンリーダーモード
 */
$("button#sr").click(function() {
  if ($('body').hasClass( 'sr_mode_flg' )) {
    // <ruby>タグを復活させるため、ページを再読み込みする
      location.reload();
	
  } else {
    // スクリーンリーダー向けにふりがなデータを編集する
      $('ruby').each(function(){
        // thisを消す前に親要素を取得しておく
        var parent = $(this).parent().get(0)

        if (parent !== undefined && parent !== null) {

          var readText;

          if ( $(this).hasClass('read_kana') ) {
            // ふりがなを読み上げテキストとして取得する場合
            readText = '　'+$('rt', this).text()+'　';
        } else {
          // 漢字を読み上げテキストとして取得する場合

          // <ruby>直下の漢字だけ取得できればいいのでふりがなは削除
          $(this).children().remove();
          readText = $(this).text();

        }
        // 自分の要素の手前に読み上げテキストを配置し、<ruby>タグ自身は削除
        $(this).before(readText);
        $(this).remove();					

        // 親のテキストをひとかたまりにする
        parent.normalize();
      } 
      /*
       *  <ruby>タグに誤りがある場合でも、スキップして最後まで処理を終わらせる
       *  スクリーンリーダーの読み＆画面表示がおかしくなるので発見次第本文を修正すること。
       */
    });

    // ボタンのテキストを変更し、目印のclassをつける
      $("#sr>span").text("変更完了しました。ページを再読み込みするか、他のページに移動すると元に戻ります");
      $('body').toggleClass( 'sr_mode_flg' ); 
	
      //<ruby>タグを消してしまったので、ふりがなボタンは隠す
      $("#rubyChange").hide();
    }
});
えすとれ先輩
えすとれ先輩

末尾まつびで隠かくしている「ふりがなボタン（ふりがな切きり替かえボタン）」については後述こうじゅつしています。必要ひつようがあればそちらもご利用りようください。

スクリーンリーダーモードの利用りようについて、まなキキからのお願ねがい

スクリーンリーダーモードの制作方法せいさくほうほうは、無料むりょうで公開こうかい・提供ていきょういたします。

まなキキの想おもいにご賛同さんどう頂いただけましたら、是非ぜひご自身じしんのWebサイトにスクリーンリーダーモードを設置せっち下ください。

スクリーンリーダーモードの制作方法せいさくほうほうのシェアも、歓迎かんげいいたします！

設置せっち頂いただく際さいには、Webサイトのどこかに「まなキキプロジェクト」（津田塾大学つだじゅくだいがくインクルーシブ教育きょういく支援室しえんしつLearning Crisis研究会けんきゅうかい提供ていきょう）と出典しゅってんの明記めいきをお願ねがい致いたします。

＊上記じょうき表記ひょうきは、スクリーンリーダーモードを制作せいさくした私わたしたちの励はげみになります！

*なお、スクリーンリーダーモードの制作方法せいさくほうほうは、2020年ねん10月がつ22日にち・23日にち開催かいさいの「第だい108回かい（令和れいわ2年度ねんど第だい3回かい）福祉ふくし情報じょうほう工学こうがく研究会けんきゅうかい」において学まなナビメンバーが報告ほうこくを行おこなっております。

おまけ：ふりがな切きり替かえボタン

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

ふりがな切きり替かえボタンを設もうけることで、ふりがなを見みせたり隠かくしたりできます。切きり替かえにかかわらず、常つねに表示ひょうじすることもできます。

HTMLファイル

ふりがな切きり替かえボタン

<!-- ふりがな切り替えボタン -->
<button id="rubyChange" type="button">
  <span>ふりがなをつける</span>
</button>

ふりがなをつける箇所かしょ

<!-- 基本の振り方。スクリーンリーダーモードでは「四月一日」が残り、読み上げられます -->
<ruby>四月一日<rt>わたぬき</rt></ruby>

<!-- 常にふりがなを表示。スクリーンリーダーモードでは「四月一日」が残り、読み上げられます -->
<ruby class="rb_display_always">四月一日<rt>わたぬき</rt></ruby>

<!-- 漢字ではなくふりがなを読ませる。スクリーンリーダーモードでは「わたぬき」が残り、読み上げられます -->
<ruby class="read_kana">四月一日<rt>わたぬき</rt></ruby>

<!-- classは複数指定できます。常にふりがなを表示。スクリーンリーダーモードでは「わたぬき」が残り、読み上げられます -->
<ruby class="rb_display_always　read_kana">四月一日<rt>わたぬき</rt></ruby>

CSSファイル

/* ふりがな */
button#rubyChange{
  padding:7px;
  margin:0px;
  line-height: 100%;
}
button#rubyChange > span{
  line-height: 100%;
}
/* ふりがなが非表示のとき */
ruby {
  display:inline;
}
rt {
  display:none;
}
rp {
  opacity:0;
}
/* ふりがなが表示されているとき、いつも見せたいとき */
.ruby_flag ruby,
ruby.rb_display_always{
  display:inline;
  /* firefox向け設定 */
  ruby-position: over;
  ruby-align: center;
  display:ruby !important;
}
.ruby_flag rt,
ruby.rb_display_always rt{
  line-height: 100% !important;
  display:block;
  /* firefox向け設定 */
  display:ruby-text !important;
}
.ruby_flag rp,
ruby.rb_display_always rp{
  opacity:1;
}

Javascriptファイル

/*
 *  振り仮名切り替えボタンを押した時の処理
 */
$("button#rubyChange").click(function() {
  $('body').toggleClass( 'ruby_flag' ); 

  if ($('body').hasClass( 'ruby_flag' )) {
    $("#rubyChange>span").text("ふりがなをけす");
  }else{
    $("#rubyChange>span").text("ふりがなをつける");
  }
});

関連かんれん記事きじ

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

本記事ほんきじの内容ないようの初出しょしゅつは「スクリーンリーダー特集とくしゅう：スクリーンリーダーモードの作つくり方かた」です。制作せいさくに至いたった経緯けいいも含ふくめて紹介しょうかいしています。

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