スクリーンリーダー特集：スクリーンリーダーモードの作り方その(1)

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

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

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

/* ふりがな */
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;
}

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

/*
 * スクリーンリーダーモード
 */
$("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();
    }
});