スクリーンリーダー特集：スクリーンリーダーモードの作り方その(3)さらに一工夫！

// 変更前
$toc_list .= '<li'.$hide_class.'><a href="#toc' . $counter . '" tabindex="0">' . strip_tags($headers[2][$i]) . '</a>';

// 変更後
$toc_list .= '<li'.$hide_class.'><a href="#toc' . $counter . '" tabindex="0">' . strip_tags($headers[2][$i], '<ruby><rp><rt>') . '</a>';

/*********
 * ksesで消されないよう、フィルターフックで追加
 */
add_filter( 'wp_kses_allowed_html', 'customKsesAllowedHtml' );

function customKsesAllowedHtml( $tags ) {
  $tags['ruby'] = true;
  $tags['rt'] = true;
  $tags['rp'] = true;
  return $tags;
}

$(document).ready( function(){
  // 吹き出しのアイコン画像からalt属性を削除する（その後に発言者名も読んでくれるため）
  $('.speech-person > .speech-icon').each(function(){
    $("img", this).attr("alt", "");
  });

  // サイト内検索機能の、検索ボタンに関する読み上げを更新
  $('.search-submit').each(function(){
    $(this).attr("aria-label", "検索ボタン");
  });
});

/*
 * スクリーンリーダーモード
 * １．rubyタグとVoiceOverの競合対応
 * ２．日付情報の読みやすさ確保
 * ３．アイコンの補足説明追加
 */
$("button#sr").click(function() {
  if ($('body').hasClass( 'sr_mode_flg' )) {
    // <ruby>タグを復活させるため、ページを再読み込みする
    location.reload();
	
  } else {
    // ルビタグに関する処理は省略しています。
    // その(1)の記事を参照してください。

    //------------------------------------------------------------------

    // 日付情報の読みやすさ確保
    if ( $('body').hasClass('single-post') || $('body').hasClass('page')) {
      // 日付情報の書式変更（記事）
      if ( $(".single-post .entry-date.date.updated.published").length ) {
        // 投稿日=更新日の場合
        changeDateFormat($(".entry-date.date.updated.published"), '.', '投稿：');
      } else {
        // 投稿日と更新日が別々の場合
        changeDateFormat($(".entry-date.date.published"), '.', '投稿：');
        changeDateFormat($(".entry-date.date.updated"), '.', '更新：');
      }
    }else if ($('body').hasClass('category') || $('body').hasClass('tag')) {
      // 日付情報の書式変更（カテゴリ一覧、タグ一覧）
      $('.post-date').each(function(){
        changeDateFormat($(this), '.', '投稿：');
      });
      $('.post-update').each(function(){
        changeDateFormat($(this), '.', '更新：');
      });
    }

    //------------------------------------------------------------------

    // タイトル情報の変更（アイコンから読み上げ情報へ）
    if ($('body').hasClass('category')) {
      // カテゴリ一覧の場合
      addTextToElement($('#archive-title'), 'カテゴリ一覧：', 'before');
    } else if ($('body').hasClass('tag')) {
      // タグ一覧の場合
      addTextToElement($('#archive-title'), 'タグ一覧：', 'before');
    }
  }
});

/*
 * 関数の定義：日付のテキスト変更
 * yyyy年mm月dd日の書式に書き換える
 * element: 日付データをもっているオブジェクト
 * delim: 元の日付の区切り文字
 * dateName: その日付が意味するもの
 */
function changeDateFormat(element, delim, dateName){
  var oldDate = element.text().split(delim);
  var newDate = dateName+oldDate[0]+'年'+oldDate[1]+'月'+oldDate[2]+'日';
  element.text(newDate);
}

/*
 * 関数の定義：テキストの前または後ろに補助情報を追加
 * element: 補助情報を追加したいオブジェクト
 * addText: 追加する補助情報
 * direction: before または after。補助情報の追加位置
 */
function addTextToElement(element, addText, addDierction){
  if (addDierction == "before"){
    element.text(addText + element.text());
  } else if (addDierction== "after") {
    element.text(element.text() + addText);
  }
}

/* スクリーンリーダーモードにしたときの、アイコン読み上げ変更 */
.sr_mode_flg .memo-box::before {
  border: none;
  font-size: 3px;
}
.sr_mode_flg .memo-box::before {
  content: '鉛筆マーク';
}
/* ページ最上部に戻るマーク */
.sr_mode_flg .fa.fa-angle-double-up::before {
	content: 'ページトップへ戻る';
}