▶ を押すと文が増えます
さて、その(1)とその(2)で基本はできたんですけれども。ところどころ、使いにくい部分は残っています。その(3)では、それを少しずつ片付けていきましょう。
変更するファイルは、WordPress上でいうと外観 → テーマエディターに置いてあるものです。あ、まなキキでは「cocoon」というWordPressテーマを利用しています。
もっと分かりやすいサイトを作るには?
せっかくなので、もっと分かりやすいサイトに仕上げていきたいですよね?ここからは、まなキキメンバーで試行錯誤しながら、分かりやすいサイトを作りあげてきた過程も含めて、追加の工夫をお伝えします。
ルビタグを勝手に消さないで!
目次でルビタグが消えてしまう
この画像はリリース当初のまなキキの目次です。漢字の後ろにカッコ書きでふりがなが表示されています。指摘してくれたのは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は渡した文字列からすべてのタグを取り除いて平文にしてしまうのですが、第二引数で残すタグを指定することができます。
権限によって使えるタグが違う!?
これ、つい最近の問題でしたよね。「投稿者」の人を増やした途端にルビタグが使えなくなってびっくりしました。
はい、最初は何のことかと思って……よくよく事情を聞いて、背景を調べてようやくわかりました。(気づくまで頓珍漢な返答をしてしまってすみませんでした)
なお、参考リンク後半のビジュアルエディタ「TinyMCE」は「Gutenberg」に変わっているので考慮不要です。
どうしてルビタグが消されちゃうんでしょうね。
ksesはホワイトリスト(OKと確定しているものだけリストアップ)方式なので、ルビタグはまだまだ認知度が低いのかな、と思います。
functions.phpに以下を追記すれば、どの権限でもルビタグが使えるようになります。
ルビ(ふりがな)の問題って、いたるところに出てくるものなのですねえ。
変更箇所:fuctions.php
/*********
* ksesで消されないよう、フィルターフックで追加
*/
add_filter( 'wp_kses_allowed_html', 'customKsesAllowedHtml' );
function customKsesAllowedHtml( $tags ) {
$tags['ruby'] = true;
$tags['rt'] = true;
$tags['rp'] = true;
return $tags;
}
今までは、ふりがながついているサイトが少なかったので、ルビタグの認知度が低くても仕方なかったのかもしれませんが…。オンライン化が急速に進んでいる状況だからこそ、子どもたちもWebサイトの文章にアクセスできるよう、ふりがなへの注目がなされていくと良いなあと切に願っています。ルビタグの認知度、もっと高まってほしいなあ…。
読み上げカスタマイズいろいろ
不要なものは読ませない、あるいは適切な読み方に変える
javascript.jsを更新していきます。まずはページ読み込み時に動く関数として、これを。
ひとつめは、吹き出しアイコンからalt属性を空にします。アイコンのalt属性、アイコンの下にある発言者名、吹き出しの内容の順に読み上げるので実質二重読み上げになっていました。
ふたつめは、検索ボタンの虫眼鏡マークの読み上げを直しています。確か修正前は「ボタン」としか読み上げなかったんですよね。
どうしてスクリーンリーダーモード起動時ではなく、ページ読み込み時に動いているんですか?
吹き出し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", "検索ボタン");
});
});
続いて、スクリーンリーダーモードを起動したときの追加処理についてです。
まなキキの記事の先頭には時計のマークや、ピリオドで区切られた日付がありますね?
スクリーンリーダーモードを使わずに読み上げると、「にせんにじゅう、どっと、ぜろはち、どっと、じゅうろく」のようになっていた部分ですね。最初は日付だとわかりませんでしたし、マークがあることにも気づいていませんでした。
実は更新日と投稿日だったんですよ。そこもわかりやすく変えておきますね。カテゴリ一覧やタグ一覧もアイコン情報しか無かったので、文字の読み上げ情報に直しています。
変更箇所: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);
}
}
アイコンの読み上げ変更
N川さん、投稿日や更新日のアイコンに気が付いていなかったってことは、もしかして……このアイコンボックスの鉛筆マークも……
はい、気づいていなかったです。というか、そのアイコン?は「発音不能」って読み上げられるんですよ。だからスルーしていました。
がーん……
「疑似要素」を使ってアイコンを入れているとそういうこともあるようです。読み上げ対象となる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: 'ページトップへ戻る';
}