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

       

さんかくすと文がえます

H松
H松

こんにちは。今回こんかいはみなさまに、まなキキ独自どくじ工夫くふう、「スクリーンリーダーモード」のつくかた解説かいせつしていきたいとおもいます!

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

ふりがながあっても、スクリーンリーダーがただしくげをおこなうことができる工夫くふうです。Webサイトをつくひとが、「この漢字かんじはこうんでほしい!」とおもった場合ばあい、スクリーンリーダーのかた指定していすることもできます。

こうした工夫くふうは、おそらく、日本初にほんはつみだとおもいます。

N川さん
N川さん

この記事きじんでいただければ、プログラミングの知識ちしきがないかたでも、ご自身じしんのサイトにスクリーンリーダーモードを導入どうにゅういただけます!是非ぜひ是非ぜひ、ご一読いちどくください。

スクリーンリーダーモードのつくかた公開こうかいする理由りゆう

いままで見過みすごされてきた、ふりがなとスクリーンリーダーのげの共存きょうぞん

まなキキの制作せいさく開始かいしした当初とうしょ、ふりがなをつけた途端とたんにスクリーンリーダーのげのおとがおかしくなった!という大問題だいもんだいこりました。解決かいけつ方法ほうほうさがしたわたしたちでしたが、「ふりがな(ルビ)とスクリーンリーダーの相性あいしょうわるいらしい」というコメントはつかっても、どのようにしたら解決かいけつできるのかを説明せつめいしているサイト・研究けんきゅうつかりませんでした……。

N川さん
N川さん

じつは、ルビ(ふりがな)とスクリーンリーダーのげの共存きょうぞん方法ほうほうかんがえる工夫くふういままで十分じゅうぶんになされてこなかったんですよね。

H松
H松

そうなのです。頑張がんばって色々いろいろ調しらべたのですが。スクリーンリーダーが漢字かんじ間違まちがったかたんでしまうことをなんとかしようというみはあっても、ふりがなとの共存きょうぞんなんとかしなければ!というみが十分じゅうぶんにはないということがかったんです。

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

それで、結構けっこう苦労くろうして、スクリーンリーダーモードという解決策かいけつさくしたんですよね。

わたしたちがどのようになやみ、どのようにかんがえ、どのようなコンセプトでスクリーンリーダーモードという工夫くふうつくげていったかについては下記かきのまなキキ記事きじをごらんください。

スクリーンリーダー特集とくしゅう社会科しゃかいか合同ごうどう企画きかく「みんながみやすいサイトってなんだ?」その1

スクリーンリーダー特集とくしゅう社会科しゃかいか合同ごうどう企画きかく「みんながみやすいサイトってなんだ?」その2

H松
H松

なんだか、なつかしいですね。

N川さん
N川さん

当時とうじわたしたちは、まえ課題かだいに1つ1つぶつかっていって、その都度つど「どうしよー」と、無我夢中むがむちゅう対処たいしょしてたんですよね。

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

無事ぶじにスクリーンリーダーモードが完成かんせいして、ちょっとホッとしたところで、「もしかしたら、制作過程せいさくかてい言語化げんごかしておいたほうがいいのかも…。」というはなしになったんですよね。それで、2020年度ねんどだい1かいIESアイイーエス研修けんしゅう講演会こうえんかい「スクリーンリーダーとWEBアクセシビリティ」の開催かいさいいたったという。

H松
H松

いやはや。それもなつかしいですね。この講演会こうえんかいいたいた意見いけんが1つのきっかけになって、「スクリーンリーダーモードを公開こうかいしよう!」というはなしになったんですもんね。

自分のサイトでも、ふりがなとスクリーンリーダーのげを両立りょうりつさせたいというこえ

2020ねん7がつ6開催かいさいスクリーンリーダーとWEBアクセシビリティ」の講演会こうえんかい終了後しゅうりょうご参加者さんかしゃ大学生だいがくせいからこんなコメントをいただきました。

参加者Aさん
参加者Aさん

ふりがなとスクリーンリーダーの両立りょうりつ大変たいへん興味深きょうみぶかいなとおもいました。しかし基準きじゅんたしているサイトはとてもすくないのではないかとおもいました。晴眼者せいがんしゃにとってやすいとおもわれるサイトが、すべてのひとにとってわかりやすいものなのか、今一度いまいちどかんがえなおすべきだとおもいました。
 わたし既存きぞんのブログサイトを利用りようしてブログを投稿とうこうしたり、ホームページ作成さくせいサイトのテンプレートを使用しようしてページの作成さくせいおこなうことがあります。ふりがなとスクリーンリーダーが両立りょうりつするようなインクルーシブなサイトを作成さくせいするためには、htmlを使用しようして自分じぶん作成さくせいする必要ひつようがあるのでしょうか。既存きぞんのサイトを利用りようして工夫くふうできることはありますか。

コメントをいただいたときの、わたしたち(H松・えすとれ先輩・N川さん)の会話かいわ

H松
H松

自分じぶんでサイトをつくっているかたから、こんなコメントをいただきましたー。うれしいですねえ。

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

でも、講演会こうえんかい紹介しょうかいした内容ないようをヒントに、スクリーンリーダーモードを自力じりきつくるのは、プログラミングの知識ちしきがないとちょっときびしいかも…。

N川さん
N川さん

スクリーンリーダーモードを導入どうにゅうすることによって、ふりがなとスクリーンリーダーのげの共存きょうぞん可能かのうになるんですよね?ふりがながあっても、スクリーンリーダーを使つかってげることができるサイトがもっとえればいいなとこころからおもうのですが…。

H松
H松

スクリーンリーダーモードがたりまえになったら、Webサイトの文章ぶんしょういままでのように苦労くろうしてまなくてよくなるもんね。どのサイトにいっても、スクリーンリーダーモードがあって、ボタンをすだけで、スクリーンリーダーのげにてきしたページにわってくれれば。

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

だったら、だれでもスクリーンリーダーモードをつくれるように、つくかた公開こうかいしてしまいましょうよ!まなキキからおりしました、って

H松
H松

おそらく日本初にほんはつ工夫くふうだから、やろうとおもえば、特許とっきょをとれてしまうかもしれないけれど(笑)わらい。でもそれは、まなキキのおもいにはんする行為こういだもんね。

N川さん
N川さん

あ…。H松さん、ちょっとだけおかねがくらみかけましたね?

H松
H松

まったかんがえなかったかとえば、否定ひていはしがたい……)

いやいや、H松はまなキキの社会科しゃかいか担当たんとうですからね!スクリーンリーダーモードが情報格差しょうじょうかくさらす一助いちじょとなるなら、無料むりょうでドンドン公開こうかいしますよ!

と、いうことで。ふりがながあってもスクリーンリーダーのげに対応たいおうできるサイトがえてほしいというねがいから、つくかた無料むりょう公開こうかいすることにしました!

スクリーンリーダーモードを設置せっちすることにかんして…。まなキキからのおねが

スクリーンリーダーモードの制作方法は、無料で公開・提供いたします。

まなキキの想いにご賛同頂けましたら、是非ご自身のWebサイトにスクリーンリーダーモードを設置下さい。

スクリーンリーダーモードの制作方法のシェアも、歓迎いたします!

設置頂く際には、Webサイトのどこかに「まなキキプロジェクト」(津田塾大学インクルーシブ教育支援室Learning Crisis研究会提供)と出典の明記をお願い致します。

*上記表記は、スクリーンリーダーモードを制作した私たちの励みになります!

*なお、スクリーンリーダーモードの制作方法は、2020年10月22日・23日開催の「第108回(令和2年度第3回)福祉情報工学研究会」において学ナビメンバーが報告を行っております。

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

ちいさくいてしまいましたが。じつは、スクリーンリーダーモードの制作過程せいさくかてい方法ほうほうを、学会がっかいでも発表はっぴょうしたんですよね。

H松
H松

4がつにまなキキをはじめたときには、まさか学会発表がっかいはっぴょうおこなうまでになるとは一切いっさいおもっておりませんでした。でも、学会がっかいでは「ルビ(ふりがな)の存在そんざいが、ここまでげに悪影響あくえいきょうあたえていたとはかんがえていなかった。今後こんごどのようにWebアクセシビリティ改善かいぜんびかけをおこなっていけるかをかんがえなければ!」というがたいご意見いけんいただくことができたんですよね。すこしでも、アクセシビリティの向上こうじょうたすけになれば……とおもって学会発表がっかいはっぴょうおこなったこともあって、本当ほんとううれしく、今後こんご議論ぎろん発展はってんにワクワクする気持きもちになりました。

N川さん
N川さん

今後こんご、ルビ(ふりがな)とスクリーンリーダーの共存きょうぞんかんがえる議論ぎろん学術がくじゅつにおいても、もっともっとがったらいいなとおもいますよね。

H松
H松

おっと!ついつい、前置まえおきがながくなってしまいましたね。
それでは、いよいよ。スクリーンリーダーモードのつくかたをご説明せつめいします!

N川さん
N川さん

まずは、ふりがなボタンをつくるところからですね!

H松
H松

そうですね。ふりがなのオンオフをボタン1つでできる機能きのうをつけると、ひと事情じじょうわせてえてもらえますから。ふりがなボタンの設置せっちは、だれしもがみやすいサイトにするための第一歩だいいっぽとも、えるかもしれませんね。

ふりがなえボタンをつくる

ボタンをつくる

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

ふりがなボタンを配置はいちしたい場所ばしょに、以下いかのHTMLコードを入力にゅうりょくしてください。WordPressでは「PRyC WP」というプラグインを導入どうにゅうすると、投稿記事とうこうきじ本文上ほんぶんうえ自動じどう表示ひょうじしてくれるので便利べんりです。

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

ボタンのうごきをつく

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

ボタンをしたとき処理しょりはJavascriptで記述きじゅつします。
WordPressを利用りようしているかたは、外観がいかん → テーマエディター → javascript.jsに追記ついきしてください。

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

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

ふりがなのかた設定せっていする

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

ふりがな表示ひょうじがオンのとき、オフのとき、それぞれどうせるかはCSSで記述きじゅつします。
WordPressを利用りようしているかたは、外観がいかん → テーマエディター → style.cssに追記ついきしてください。

ふりがな切り替えボタン: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;
}
H松
H松

これで無事ぶじ、ふりがなのオン・オフができるようになりましたね!

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

ということで、ここからは、いよいよスクリーンリーダーモードを作成さくせいしていきますよ!

スクリーンリーダーモードをつくる

ボタンをつくる

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

ふりがなえとおなじく、まずはボタンの設置せっちからですね。「記事きじ本文ほんぶんうえ」だとボタンに辿たどくまでに時間じかんがかかってしまうので、「コンテンツ上部じょうぶ」に配置はいちしてみましょう。
WordPressメニューの外観がいかん → ウィジェット → コンテンツ上部じょうぶです。ここにカスタムHTMLを追加ついかして、以下いか入力にゅうりょくします。

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

ボタンの内容ないようながいですね。それに、5レベルの見出みだ要素ようそになっています。

N川さん
N川さん

見出みだしになっていると、見出みだしジャンプを使つかったときでもとさずにむんです。内容ないようも「このボタンをしたらなにこるのか?」がわかるように説明せつめいしてもらっています。

ボタンのうごきをつく

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

ボタンをしたとき処理しょりはJavascriptで記述きじゅつします。
WordPressを利用りようしているかたは、外観がいかん → テーマエディター → javascript.jsに追記ついきしてください。

スクリーンリーダーモードボタン: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();
    }
});

ボタンをかくす

H松
H松

いやー。これで無事ぶじに、「スクリーンリーダーモード」というボタンができましたね。よかったよかった。

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

ちょっとったー! こんなにながいボタン、えっぱなしでいいんですか、いやよくない!

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

画面がめんはばるというのもそうなんですけれどもね。H松さん、「スクリーンリーダーモード」がなにをどうえているかもう一度いちどおもしてください。

H松
H松

スクリーンリーダーとルビの競合きょうごうふせぐために……
あっ、ルビタグをしてますね。ふりがなえボタンもなくなっちゃう。

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

うっかり晴眼者せいがんしゃがこのボタンをすと、かえってではみにくくなるんです。ページのさいみでもともどるとはいえ二度手間にどてまですよね。だから、スクリーンリーダーを使つかったときだけこのボタンをつけられるようにかくしてしまいましょう。

N川さん
N川さん

そんな便利べんりなことができるんでしょうか?

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

はい、これについては先行事例せんこうじれいがあったのでそのまま使つかわせていただきました。「せないけれどもげる」通称つうしょうvisually-hiddenというもので、CSSに追記ついきして使つかいます。詳細しょうさいはリンクさき参照さんしょうしてください。これで、ふりがなえボタンとスクリーンリーダーモードの作成さくせい完了かんりょうです。

ふりがなボタンとスクリーンリーダーモードの作成さくせい方法ほうほう以上いじょうです!次回じかい、スクリーンリーダーモードのつくかたその(2)につづく!

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