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

       

さんかくすと文がえます

いまかたちのまなキキをつくげるまでには、おもに3つのてんで「大変たいへんだー!」とおもったことがありました。前回ぜんかいつづいてふたのおはなし紹介しょうかいします。

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

「いっそ、まなキキオリジナルの機能きのうをつくってしまおう!」というはなしになった我々われわれ

しかし、完成かんせいするまでにはいろんな苦労くろうがあったのでした……。

登場人物とうじょうじんぶつ紹介しょうかい

H松えいちまつ

まなキキの社会しゃかい担当たんとう大昔おおむかしに、ウェブサイトをつく授業じゅぎょう大学だいがくまなんでいたことから、まなキキのサイト制作せいさくにもかかわることになってしまった。

えすとれ先輩せんぱい

まなキキのサイト制作せいさく技術面ぎじゅつめんささえている。いつも、H松えいちまつ鬼発注おにはっちゅう(「これ、頑張がんばればなんとかなるがします!」というおねがい)に対応たいおうしている。今回こんかい主役しゅやく

HTMLさん

みなさんが使つかったり、んだりする、Webサイトをつくっているもとになっている言語げんごひとつ。HTMLさんの本名ほんみょうは、Hyperハイパー Textテキスト Markupマークアップ Languageランゲージという。でも、本名ほんみょうがとってもながいので、みんなからは名前なまえりゃくしてHTMLとわれています。わたしたちはWebページをつくるときに、どこまでが日本語にほんごで、どこからがHTMLさんにつたえたい言葉ことばなのか、<>山かっこ使つかって区別くべつしています。

H松
H松

たとえば、ふりがなきで「こんにちは。わたしはHTMLさんといます。」という文章をHTMLさんにつたえるためにはこのようにきます。した文章ぶんしょうんでみてくださいね。

「こんにちは。 <ruby>ルビタグはじめ。<rt>ルビテキストタグはじめ。 わたし </rt>ルビテキストタグおわり。 </ruby>ルビタグおわり。
HTMLさんと <ruby>ルビタグはじめ。<rt>ルビテキストタグはじめ。</rt>ルビテキストタグおわり。 </ruby>ルビタグおわり。います。」

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

このはなしはみなさんにとって、ちょっとむずかしいかな…?でも、もっと興味きょうみがあるよ!というひとは、つぎのページの「めざせ!Webマスター」をてみてくださいね。

VoiceOverさん

Webサイトをげてくれる、スクリーンリーダーの1つ。iPhoneに最初さいしょからはいっているアプリです。今回こんかい、えすとれ先輩せんぱい何度なんどもやりりをすることになります。

スクリーンリーダーモードをつくるまでのおはなし

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

よっしゃ!頑張がんばりますわ。じゃ、まずは検証けんしょうからはじめますかねー。HTMLでいろいろいてみて、実際じっさいにVoiceOverさんにげてもらおう。

HTMLさん
HTMLさん

<p>pタグはじめ。これは段落だんらくです。</p>pタグおわり。

VoiceOverさん
VoiceOverさん

これは段落だんらくです。

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

うん、普通ふつう

HTMLさん
HTMLさん

<h2>h2タグはじめ。ページタイトルです。</h2>h2タグおわり。

VoiceOverさん
VoiceOverさん

ページタイトルです、見出みだしレベル2。

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

おお、見出みだしなら見出みだしってってくれるのね。見出みだしを活用かつようして階層かいそうをはっきりさせたページならVoiceOverでも使つかいやすそう。

つづいて、複数ふくすうのタグをわせて使つかってみると……?

HTMLさん
HTMLさん

<p>pタグはじめ。文章ぶんしょう途中とちゅう<a href=”#”>aタグはじめ。ジャンプ</a>aタグおわり。してみる?</p>pタグおわり。

VoiceOverさん
VoiceOverさん

文章ぶんしょう途中とちゅうで。ジャンプ、リンク!してみる?

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

うんうん。げのはタグなのかな……?じゃあこれ。

HTMLさん
HTMLさん

<h2>h2タグはじめ。見出みだしの途中とちゅう<a href=”#”>aタグはじめ。ジャンプ</a>aタグおわり。はどうだろう</h2>h2タグおわり。

VoiceOverさん
VoiceOverさん

見出みだしの途中とちゅうで、見出みだしレベル2。ジャンプ、見出みだしレベル2、リンク!はどうだろう、見出みだしレベル2。

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

うーん……ちょっと鬱陶うっとうしい。記事きじをつくるときはけたほうがよさそう。……なんかもういや予感よかんがするけど、本題ほんだいのふりがなをためさないと……。

HTMLさん
HTMLさん

<ruby>楽<rt>たの</rt></ruby>しい楽しい学び、という文に「たの」と <ruby>学<rt>まな</rt></ruby>び「まな」のふりがなをふっています

VoiceOverさん
VoiceOverさん

らく。しい。がく。び。

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

…………うん。ちなみにふりがなボタンをオンにすると?

VoiceOverさん
VoiceOverさん

たの。らく。しい。まな。がく。び。

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

…………そっかー……。

奮闘ふんとうするえすとれ先輩せんぱいあたまに、ささやくこんなこえが……。

天の声
天の声

ふりがなをつけるページと、ようのふりがななしページを別々べつべつにしたらどうじゃ?

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

それじゃ意味いみないってー。

天の声
天の声

では、おなじページのなかにふりがな原稿げんこう原稿げんこう同居どうきょさせたらどうじゃ?

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

ページが一緒いっしょってだけで、根本的こんぽんてき問題もんだい解決かいけつしてないのでは……?うーん、同居どうきょ……ん?そもそも、ここでっている「よう原稿げんこう」って、ふりがなをまえ……つまり<ruby>ルビタグが文章ぶんしょうのことだね!?ということは……

ピコーーーン!!!(えすとれ先輩せんぱいひらめいたおと

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

<ruby>楽<rt>たの</rt></ruby>しいルビタグの<ruby>学<rt>まな</rt></ruby>びふられた文章

これを

楽しい学びルビタグの無い文章

こう……タグをせば解決かいけつか!!!!!
VoiceOverさん、漢字かんじはそこそこんでくれるもんね!そうとわかれば……Javascriptジャバスクリプトでごりごりっとなー!

カチャカチャカチャカチャ…(えすとれ先輩せんぱいがパソコンのキーボードをおと

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

「スクリーンリーダーモード」を追加ついかしてみました!N川さん確認かくにんねがいします!どうですか!!

N川さん
N川さん

かたがきれいになりましたね。すごい!

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

これでrubyルビタグとVoiceOverの問題もんだい解決かいけつしたかー。あーよかったー。とはいえ、VoiceOverさんが頓珍漢とんちんかんかたしちゃうのは仕方しかたないかなー。

H松
H松

もうさ、こっちがかた指定していできたらいいんだよね!スクリーンリーダーにさ、こうやってんでくださいなって。

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

やっちゃいますか!!たとえば、

<ruby>四月一日<rt>わたぬき</rt></ruby>四月一日と書いて、わたぬきと読む

これを

わたぬきわたぬき、という読み方だけ残す

こうなるように!rubyルビタグをすときに、漢字かんじじゃなくてふりがな情報じょうほうのこすようにすればよさそうだね!ほいできた!ふりがな優先ゆうせんにしたいときは目印めじるしつけてねー。

つぎのページでは、スクリーンリーダーモードの耳心地みみごこち体験たいけんできる動画どうがをご紹介しょうかいします!

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