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

さんかくすと文がえます

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

さて、その(1)とその(2)で基本きほんはできたんですけれども。ところどころ、使つかいにくい部分ぶぶんのこっています。その(3)では、それを少しずつ片付けていきましょう。

変更へんこうするファイルは、WordPress上でいうと外観がいかん → テーマエディターにいてあるものです。あ、まなキキでは「cocoon」というWordPressテーマを利用りようしています。

もっと分かりやすいサイトを作るには?

せっかくなので、もっと分かりやすいサイトに仕上げていきたいですよね?ここからは、まなキキメンバーで試行錯誤しながら、分かりやすいサイトを作りあげてきた過程も含めて、追加の工夫をお伝えします。

ルビタグを勝手かってさないで!

目次もくじでルビタグがえてしまう

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

この画像がぞうはリリース当初とうしょのまなキキの目次もくじです。漢字かんじうしろにカッコきでふりがなが表示ひょうじされています。指摘してきしてくれたのはYさんでしたね。

Yさん
Yさん

内容ないよう確認かくにんをしていて、目次もくじだけこうなってしまっているのがづらいなとかんじていました。

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

WordPressが目次もくじ自動生成じどうせいせいするために見出みだしの情報じょうほう取得しゅとくするのですが、そのときにルビタグが無視むしされてしまっていたんです。これは、phpファイルない関数かんすう上書うわがきして対応たいおうしました。

まずはおやテーマから/lib/toc.phpを参照さんしょうし、「if ( !function_exists( ‘get_toc_tag’ ) ):」ではじまる「目次部分もくじぶぶん取得しゅとくよう関数かんすうをfunctions.phpにコピー&ペーストしてください。そして、以下いか箇所かしょ変更へんこうします。

変更箇所:fuctions.php
変更元 :/lib/toc.php get_toc_tag
// 変更前
$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>';
えすとれ先輩
えすとれ先輩

phpのstrip_tagsはわたした文字列もじれつからすべてのタグをのぞいて平文ひらぶんにしてしまうのですが、第二引数だいにひきすうのこすタグを指定していすることができます。

権限けんげんによって使つかえるタグがちがう!?

H松
H松

これ、つい最近さいきん問題もんだいでしたよね。「投稿者とうこうしゃ」のひとやした途端とたんにルビタグが使つかえなくなってびっくりしました。

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

はい、最初さいしょなんのことかとおもって……よくよく事情じじょういて、背景はいけい調しらべてようやくわかりました。(づくまで頓珍漢とんちんかん返答へんとうをしてしまってすみませんでした)

なお、参考さんこうリンク後半こうはんのビジュアルエディタ「TinyMCE」は「Gutenberg」にわっているので考慮不要こうりょふようです。

H松
H松

どうしてルビタグがされちゃうんでしょうね。

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

ksesはホワイトリスト(OKと確定かくていしているものだけリストアップ)方式ほうしきなので、ルビタグはまだまだ認知度にんちどひくいのかな、とおもいます。

functions.phpに以下いか追記ついきすれば、どの権限けんげんでもルビタグが使つかえるようになります。

N川さん
N川さん

ルビ(ふりがな)の問題もんだいって、いたるところにてくるものなのですねえ。

変更箇所:fuctions.php
/*********
 * ksesで消されないよう、フィルターフックで追加
 */
add_filter( 'wp_kses_allowed_html', 'customKsesAllowedHtml' );

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

いままでは、ふりがながついているサイトがすくなかったので、ルビタグの認知度にんちどひくくても仕方しかたなかったのかもしれませんが…。オンラインかか急速きゅうそくすすんでいる状況じょうきょうだからこそ、どもたちもWebサイトの文章ぶんしょうにアクセスできるよう、ふりがなへの注目ちゅうもくがなされていくといなあとせつねがっています。ルビタグの認知度にんちど、もっとたかまってほしいなあ…。

げカスタマイズいろいろ

不要ふようなものはませない、あるいは適切てきせつかたえる

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

javascript.jsを更新こうしんしていきます。まずはページうご関数かんすうとして、これを。

ひとつめは、しアイコンからalt属性ぞくせいからにします。アイコンのalt属性ぞくせい、アイコンのしたにある発言者名はつげんしゃめいしの内容ないようじゅんげるので実質じっしつ二重読にじゅうよげになっていました。

ふたつめは、検索けんさくボタンの虫眼鏡むしめがねマークのげをなおしています。たし修正前しゅうせいまえは「ボタン」としかげなかったんですよね。

H松
H松

どうしてスクリーンリーダーモード起動時きどうじではなく、ページうごいているんですか?

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

しalt属性削除ぞくせいさくじょほうは、スクリーンリーダーモードにしたとき処理しょりふくめてもOKです。スクリーンリーダーモードをおもいつくまえれた処理しょりなので、まなキキではこの位置いちです。

検索けんさくボタンはスクリーンリーダーモードのボタンよりもさきげられるので、ページじじえておく必要ひつようがあります。

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

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

つづいて、スクリーンリーダーモードを起動きどうしたときの追加処理ついかしょりについてです。

まなキキの記事きじ先頭せんとうには時計とけいのマークや、ピリオドで区切くぎられた日付ひづけがありますね?

N川さん
N川さん

スクリーンリーダーモードを使つかわずにげると、「にせんにじゅう、どっと、ぜろはち、どっと、じゅうろく」のようになっていた部分ぶぶんですね。最初さいしょ日付ひづけだとわかりませんでしたし、マークがあることにもづいていませんでした。

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

じつ更新日こうしんび投稿日とうこうびだったんですよ。そこもわかりやすくえておきますね。カテゴリ一覧いちらんやタグ一覧いちらんもアイコン情報じょうほうしかかったので、文字もじ情報じょうほうなおしています。

変更箇所:fuctions.php
/*
 * スクリーンリーダーモード
 * 1.rubyタグとVoiceOverの競合対応
 * 2.日付情報の読みやすさ確保
 * 3.アイコンの補足説明追加
 */
$("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);
  }
}

アイコンの変更へんこう

H松
H松

Nかわさん、投稿日とうこうび更新日こうしんびのアイコンにいていなかったってことは、もしかして……このアイコンボックスの鉛筆えんぴつマークも……

ここは「鉛筆えんぴつのマーク」がついたアイコンボックスです。

N川さん
N川さん

はい、づいていなかったです。というか、そのアイコン?は「発音不能はつおんふのう」ってげられるんですよ。だからスルーしていました。

H松
H松

がーん……

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

疑似要素ぎじようそ」を使つかってアイコンをれているとそういうこともあるようです。対象たいしょうとなるcontent属性ぞくせいがバックスラッシュからはじまる英数字えいすうじになりますので、そりゃげようがいなと……。

これについては力技ちからわざなんですが、CSSファイルないで「スクリーンリーダーモードにえたら、ちいさいフォントでアイコンの情報じょうほうをみっしりめる」で対応たいおうしています。本体ほんたいのphpファイルをつけて、アイコンはせたまま情報じょうほう追加ついかするのがスマートなのでしょうが……。また検討けんとうします。

変更箇所:style.css(一部抜粋)
/* スクリーンリーダーモードにしたときの、アイコン読み上げ変更 */
.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: 'ページトップへ戻る';
}
タイトルとURLをコピーしました