▶ を押すと文が増えます
今の形のまなキキを作り上げるまでには、主に3つの点で「大変だー！」と思ったことがありました。前回に続いて二つ目のお話を紹介します。
スクリーンリーダーモードをつくること
「いっそ、まなキキオリジナルの機能をつくってしまおう！」という話になった我々。
しかし、完成するまでには色んな苦労があったのでした……。
登場人物紹介
H松
まなキキの社会担当。大昔に、ウェブサイトを作る授業を大学で学んでいたことから、まなキキのサイト制作にも関わることになってしまった。
えすとれ先輩
まなキキのサイト制作を技術面で支えている。いつも、H松の鬼発注（「これ、頑張ればなんとかなる気がします！」というお願い）に対応している。今回の主役。
HTMLさん
みなさんが使ったり、読んだりする、Webサイトを作っているもとになっている言語の一つ。HTMLさんの本名は、Hyper Text Markup Languageという。でも、本名がとっても長いので、みんなからは名前を略してHTMLと言われています。私たちはWebページを作るときに、どこまでが日本語で、どこからがHTMLさんに伝えたい言葉なのか、<>を使って区別しています。
たとえば、ふりがな付きで「こんにちは。私はHTMLさんと言います。」という文章をHTMLさんに伝えるためにはこのように書きます。下の文章を読んでみてくださいね。
「こんにちは。 <ruby> 私 <rt> わたし </rt> </ruby> は
HTMLさんと <ruby> 言 <rt> い </rt> </ruby>います。」
この話はみなさんにとって、ちょっと難しいかな…？でも、もっと興味があるよ！という人は、次のページの「めざせ！Webマスター」を見てみてくださいね。
VoiceOverさん
Webサイトを読み上げてくれる、スクリーンリーダーの１つ。iPhoneに最初から入っているアプリです。今回、えすとれ先輩が何度もやり取りをすることになります。
スクリーンリーダーモードをつくるまでのお話
よっしゃ！頑張りますわ。じゃ、まずは検証からはじめますかねー。HTMLでいろいろ書いてみて、実際にVoiceOverさんに読み上げてもらおう。
<p>これは段落です。</p>
これは段落です。
うん、普通。
<h2>ページタイトルです。</h2>
ページタイトルです、見出しレベル２。
おお、見出しなら見出しって言ってくれるのね。見出しを活用して階層をはっきりさせたページならVoiceOverでも使いやすそう。
続いて、複数のタグを組み合わせて使ってみると……？
<p>文章の途中で<a href=”#”>ジャンプ</a>してみる？</p>
文章の途中で。ジャンプ、リンク！してみる？
うんうん。読み上げの切れ目はタグなのかな……？じゃあこれ。
<h2>見出しの途中で<a href=”#”>ジャンプ</a>はどうだろう</h2>
見出しの途中で、見出しレベル２。ジャンプ、見出しレベル２、リンク！はどうだろう、見出しレベル２。
うーん……ちょっと鬱陶しい。記事をつくるときは気を付けた方がよさそう。……なんかもう嫌な予感がするけど、本題のふりがなを試さないと……。
<ruby>楽<rt>たの</rt></ruby>しい <ruby>学<rt>まな</rt></ruby>び
らく。しい。がく。び。
…………うん。ちなみにふりがなボタンをオンにすると？
たの。らく。しい。まな。がく。び。
…………そっかー……。
奮闘するえすとれ先輩の頭に、ささやくこんな声が……。
ふりがなをつけるページと、読み上げ用のふりがななしページを別々にしたらどうじゃ？
それじゃ意味ないってー。
では、同じページの中にふりがな原稿と読み上げ原稿を同居させたらどうじゃ？
ページが一緒ってだけで、根本的な問題は解決してないのでは……？うーん、同居……ん？そもそも、ここで言っている「読み上げ用原稿」って、ふりがなを振る前……つまり<ruby>タグが無い文章のことだね！？ということは……
ピコーーーン！！！（えすとれ先輩が閃いた音）
<ruby>楽<rt>たの</rt></ruby>しい<ruby>学<rt>まな</rt></ruby>び
これを
楽しい学び
こう……タグを消せば解決か！！！！！
VoiceOverさん、漢字はそこそこ読んでくれるもんね！そうとわかれば……Javascriptでごりごりっとなー！
カチャカチャカチャカチャ…（えすとれ先輩がパソコンのキーボードを打つ音）
「スクリーンリーダーモード」を追加してみました！N川さん確認お願いします！どうですか！！
読み方がきれいになりましたね。すごい！
これでrubyタグとVoiceOverの問題は解決したかー。あーよかったー。とはいえ、VoiceOverさんが頓珍漢な読み方しちゃうのは仕方ないかなー。
もうさ、こっちが読み方を指定できたらいいんだよね！スクリーンリーダーにさ、こうやって読んでくださいなって。
やっちゃいますか！！例えば、
<ruby>四月一日<rt>わたぬき</rt></ruby>
これを
わたぬき
こうなるように！rubyタグを消すときに、漢字じゃなくてふりがな情報を残すようにすればよさそうだね！ほいできた！ふりがな優先にしたいときは目印つけてねー。
次のページでは、スクリーンリーダーモードの耳心地を体験できる動画をご紹介します！