▶ を押すと文が増えます
このページの説明
このページでは、スクリーンリーダーを使いながらこのサイトを見てくださっている方に向けて、「まなキキ」の活用の仕方と使い方のヒントを紹介しています。
言葉の説明 見出しとリンクについて
「まなキキ」では、みなさんに伝えたい情報を主に文章を使って説明しています。でも、文章の量がとても多いので、ウェブサイトの最初から最後まできちんと読もうとすると、読み終わるまでに時間がかかりますし、何より集中力が切れてしまいます。そのせいで、必要な情報を見逃してしまったらもったいないですよね。
そこで「まなキキ」では、文章のまとまりごとに「見出し」を付けたり、より詳しい情報にアクセスするための「リンク」を使うことによって、みなさんにとって読みやすいサイトづくりを目指しています。「見出し」と「リンク」は、他のウェブサイトでも利用されているので、「まなキキ」を使いながら、この仕組みの便利な使い方を覚えてしまいましょう！
見出しジャンプとリンクジャンプの方法
スクリーンリーダーには、見出しから見出しへ、または、リンクからリンクへと移動するためのジャンプ機能があります。見出しジャンプやリンクジャンプを使えば、ウェブサイト全部を読まなくても、サイトの大まかな内容と構造を理解することができます。ここではジャンプの方法について、PC-Talker&ネットリーダーの場合とVoiceOver&Safariの場合に分けて説明します。
見出しジャンプ
PC-Talker&ネットリーダー
1.キーボードのhを押すと、次の見出しに移動します。
2.前の見出しに戻りたいときは、shiftキーを押しながらhを押します。
3.自分が読みたい内容の見出しを見つけたら、下矢印キーを押して、文章を読み進めていきます。前の部分を読みたいときは上矢印キーです。
VoiceOver&Safari
1.ローター（人差し指と中指を使ってダイヤルをひねるようなジェスチャー）を何度か繰り返して、「見出し」と読み上げたところで止めます。
2.人差し指で下にフリックすると、次の見出しに移動します。
3.前の見出しに戻りたいときは、人差し指で上向きにフリックします。
4.自分が読みたい見出しを見つけたら、人差し指を右にフリックしながら、文章を読み進めていきます。戻りたいときは左フリックです。
リンクジャンプの方法
PC-Talker&ネットリーダー
1.次のリンクに移動したいときは、tabキーを押します。
2.前のリンクに戻りたいときは、shiftキーを押しながら、tabキーを押します。
3.自分が使いたいリンクを見つけたら、enterキーを押すと、より詳しい情報にアクセスすることができます。
4.リンクに入る前の位置に戻りたいときには、backspaceキーを押します。
VoiceOver&Safari
1.ローターを何度か繰り返して、「リンク」と読み上げたところで止めます。
2.次のリンクに移動したいときは、人差し指で下向きにフリックします。
3.前のリンクに戻りたいときは、人差し指で上向きにフリックします。
4.自分が使いたいリンクを見つけたら、ダブルタップすると、より詳しい情報にアクセスすることができます。
5.前の位置に戻りたいときには、画面左下にある「戻る」ボタンをダブルタップします。
この２種類の操作をうまく組み合わせれば、ウェブサイトのデザインと概要を把握することができるので、必要な情報がありそうな場所をスムーズに見つけることができます。これからは主に見出しとリンクに着目しながら、「まなキキ」の使い方を解説していきますので、しっかり覚えておいてくださいね！
余談：役に立つ、声のトーンの違い
見出しとリンクを読み上げる際に、PC-Talkerでは通常より高い声になります。また、最近使ったことのあるリンクの部分では、音声が低いトーンになります。一方、VoiceOverは、それぞれ「読み上げ機能を利用しているかたへ 見出し」、「サイトマップはこちら リンク」というように、「見出しorリンクのタイトル」のあとにどちらの種別かという順番で読み上げてくれます。声のトーンの違いなどもヒントにすると、ウェブサイトの構造を知ることができるので、ぜひ活用してみてください。
「まなキキ」を使うときに注意してほしいこと
「まなキキ」では、みなさんが読みやすいようにさまざまな工夫をしていますが、技術的な限界によって、スクリーンリーダーを使っている人にとってわかりづらい部分があるのも事実です。使いづらい点は、これから具体的に説明します。
「まなキキ」全体の読み上げについて
スクリーンリーダーで「まなキキ」を読んでいると、ところどころ読み方がぎこちないなと感じるかもしれません。これは、スクリーンリーダーが文章の中の漢字ではなく、漢字に振られたフリガナを読み上げてしまうことに関係しています。スクリーンリーダーにとっては文章が全部ひらがななので、文の切れ目や単語の正しいアクセントがわからなくなってしまうのです。また、操作によっては、単語や文章の途中で丸カッコに入ったフリガナが読み上げられてしまうこともあります。聞き取りづらいところもあるかと思いますが、文章にはわかりやすい言葉をたくさん使うようにしているので、ちょっとだけ頑張って聞いてもらえるとうれしいです。
VoiceOverで読む場合について
VoiceOverで「まなキキ」を読んでいると、単語の途中で文章が途切れていて読みづらい場合があります。一番こまるのは、見出しやリンクを探すときです。本当は一つの見出しやリンクなのに、タイトルが単語の途中でいくつにも切れてしまっているため、見出しやリンクがたくさんあるように感じてしまいます。
この読みづらさを完全に取り除くことはできませんが、「まなキキ」ではみなさんにとって少しでも読みやすくなるように、できるかぎりの工夫をしています。
また、VoiceOverの全文読みのジェスチャー（日本指で下にフリック）をすると、少しだけ文章が聞き取りやすくなります。読み上げを一時停止するときは日本指で一回タップ、読み上げを再開するならもう一度日本指で一回タップします。
現時点での読みづらさの解消法：「スクリーンリーダモード」と「検索ボックス」
「まなキキ」ではスクリーンリーダを使っている人向けに次のような工夫もしてみました。「読み上げが聞き取りづらいな」「情報が多すぎて混乱してきちゃった！」と思ったら、ちょっと試してみてください。
「スクリーンリーダモード」について
ページ内の文章をスクリーンリーダで読みやすくするために開発した、「まなキキ」オリジナルの工夫です。サイトの文章が聞き取りやすくなることはもちろん、VoiceOverで見出しジャンプやリンクジャンプもスムーズに行えるようになります。「まなキキ」の多くのページの冒頭近くにあるので、ぜひ活用してみてください。
「スクリーンリーダモード」の設定方法
1.自分が読みたいページに入ったら、見出しジャンプをします。
2.「スクリーンリーダーモードに変更する」を見つけたら、enterまたはダブルタップをします。
3.「変更完了しました。ページを再読み込みするか、他のページに移動すると元に戻ります」と読み上げられれば、設定完了です。
（補足１）PC-Talker&ネットリーダーをお使いの場合、設定が完了すると読み上げの前に「ピンッ！」というサウンドが流れることがあります。
（補足２）VoiceOverとSafariを使用している場合、設定を完了すると、見出しのタイトルが一部しか読み上げられないことがあります。その際には、画面の上側にある「再読み込み」ボタンを押してからもう一度設定を行ってください。
「検索ボックス」について
自分がほしい情報を早く見つけたいとき、または、国語や社会といった教科に関係なく情報を探したいときに便利です。検索ボックスはほかのウェブサイトでもよく見かける機能なので、「まなキキ」を使って練習しておきましょう。
「検索ボックス」のつかいかた
1.トップページの冒頭から下矢印キーまたは右フリックで進みます。
2.「サイト内を検索」と読み上げたらenterまたはダブルタップをします。文字入力画面が開くので、自分が検索したいキーワードを入力します。
3.PC-Talkerの場合はenterキーを押し、VoiceOverなら画面キーボードの右上にある「完了ボタン」をダブルタップして、入力画面から出ます。
4.PC-Talkerであれば右矢印キー、VoiceOverであれば右フリックで「検索ボタン」に移動してenterキーまたはダブルタップをします。
5.ページが切り替わったら、検索結果が表示されます。検索結果を確認するには、見出しジャンプやリンクジャンプが便利です。
6.読みたい情報へのリンクが見つかったらenterキーまたはダブルタップです。
（補足）PC-Talkerの場合、検索ボックスはキーボードのe、検索ボタンはキーボードのpを押してジャンプすることもできます。
各教科 の「おすすめリンク集」の使い方
それでは、実際に「まなキキ」を使ってみましょう！ここで紹介する「おすすめリンク集」を探すときはトップページからでも構いませんが、サイトマップも便利です。
サイトマップ活用法
1.トップページから「サイトマップはこちら」というリンクに入ります。
2.見出しジャンプをして「スクリーンリーダーモードに変更する」のボタンを見つけ、enterまたはダブルタップします。直後に、「変更完了しました。ページを再読み込みするか、他のページに移動すると元に戻ります」と読み上げられます。PC-Talkerの場合、読み上げの前に「ピン！」という音が鳴ります。
3.見出しジャンプをして、「「まなキキ」を使ってみる」まで移動します。
4.下矢印キー、または右フリックで読み進めていくと、「学べるサイトを知る」と読み上げられます。
5.ここから先が「リンク集」のコーナーなので、自分が興味のあるリンク集のリンクを押してみましょう。
目次の見つけ方
1.「リンク集」に入ってリンクジャンプをすると「目次」が出てきます。
2.ここから下矢印キーまたは右フリックを使って、目次の中の項目を確認します。目次の項目は全部リンクなので、リンクジャンプでもOKです。
3.自分が読んでみたい項目を見つけたら、enterキーまたはダブルタップで、その項目が書かれた本文の見出しに移動します。
例：国語の「おすすめリンク集」の目次で「教科の学習」というリンクを押すと、「教科の学習」という名前の見出しに移動します。
本文の見出しに移動したら
1.下矢印キーや右フリックで本文を確認していきます。
2.見出しの直後には、ここから先に掲載されているコンテンツ全体の内容や使い方について、簡単な説明文が書かれています。
3.さらに読み進めると、「サイト紹介」という見出しが出てきます。ここからお勧めのサイトの紹介が始まります。
4.「サイト紹介」という見出しのあとには、紹介するサイトに直接アクセスできるリンクがあります。
5.さらにサイトの制作者の名前、サイト分類、お勧めのポイント、使い勝手のポイントと文章が続くと、「もっと見る」というリンクが出てきます。ここまでが一つのサイト紹介です。
「もっと見る」の使い方
1.「もっと見る」のリンクを押すと、そのウェブサイトに関するさらに詳しい情報を読むことができます。
2.見出しジャンプを行うと、サイトのタイトル、「読み上げ機能を利用しているかたへ」、「サイト紹介…という順に移動でします。
3.このとき、「サイト紹介」「サイト分類タグ」「おすすめのポイント」「使い勝手のポイント」の見出しがついた文章は、前のページでも読むことのできた文章です。その後ろの「詳細」という見出しから後のコメントが追加の情報です。
4.前のページに掲載されていた情報を読み飛ばして「詳細」に行きたい場合は、このページの冒頭近くにある「読み上げ機能を利用しているかたへ」という見出しの次にあるリンク、「前のページと重複する部分を飛ばし、詳細から読む」を押します。
まとめ
スクリーンリーダーユーザーにとっての「読みやすい/使いやすいウェブサイト」とは、これまで紹介してきたように、「見出しやリンクを活用することによって、自分がほしい情報に簡単にアクセスできるウェブサイト」のことです。「まなキキ」以外にもこうした工夫をしているウェブサイトはいくつもありますし、これからさらに増えていくことを期待しています。
また、スクリーンリーダーの機能には、見出しやリンクにジャンプする以外にも、ウェブサイトを読むときに活用できる便利なものがいろいろと用意されています。ウェブサイトを利用するときには、サイトの内容を確認するだけではなく、スクリーンリーダーのどの機能を使ったら読みやすくなるのかも研究してみてくださいね。
「まなキキ」のサイト制作裏話
スクリーンリーダーで「まなキキ」をよむヒントを読んでいただき、ありがとうございました。ここからは、「まなキキ」の制作裏話をお伝えしたいと思います。なぜ、このように使いにくさが生まれてしまったのか、サイト制作者が感じた技術的な悩みとともに、みなさまにご説明したいと思います。
一般的なウェブサイトでは、そもそも、ふりがなをつけるという機能があまり使われていません。しかし私たちのサイトでは、すべての子どもに学びを提供したいという想いから、一般的なサイトと比べてたくさんのふりがながつけられています。
ふりがなは、ついている方が読みやすいという人もいれば、ついていない方が読みやすいという人もいます。そのため、まなキキではふりがなをつけたり消したり、という機能をつけるためにCSSとJavaScriptの技術を利用して、ふりがなの有無を切り替えられるボタンをつけました。このような工夫も、一般的なウェブサイトではあまりなされていない技術的工夫です。
しかし、スクリーンリーダーでまなキキを読み上げた際に、ふりがなをつけるために使っているHTMLのrubyというタグが、スクリーンリーダーの読み上げの仕組みとうまく対応していないことが分かりました。これは、ルビのついたページをスクリーンリーダーで読むことが想定されていないことによるものと私たちは考えています。
特に、多くの人に使用されているVoiceOverとrubyタグの相性が悪く、まなキキのサイトを作っているボランティア全員で方法を調べたり、考えたりしましたが、未だ解決に至っていない状況です。これは、いかに今の日本のウェブサイトがスクリーンリーダーに対応しにくい制作面での課題を抱えているかを表す、技術的かつ、大変深刻な社会的問題と私たちは考えています。そして、今後、社会科の特集ページに「まなキキ」を作るにあたって感じた技術的な問題点を解説するページをつくって、広く社会にこの問題を訴えていきたいとも考えています。技術的な面を改善し、スクリーンリーダーでの読み上げに対応したサイトを作りたいと考えていますが、現状の「まなキキ」がスクリーンリーダーを使用する方にとって使いづらい部分があることは、このような背景があったという点をご理解いただきたいと思います。