• 広告を利用しています/紹介製品の価格・スペックは記事作成時点のものです

音声読み上げソフトを導入してみる

写真今日は仕事はせず、前からやろうと思っていたことに挑戦。挑戦というほどじゃないんだけど「音声読み上げソフト」の導入だ。あと音声入力ソフトのインストール。

だって自分ら、目を酷使させすぎでしょ。
少しは目を休ませることができるかもしれないし、自分のブログやサイトを視覚障害者など、普段音声読み上げソフトを使っている人にも適切な作りにバージョンアップできるはずだ。

いちおうこのブログも、音声読み上げソフト対応をちょこっとだけ配慮している。

以前知り合いになった視覚障害の方が、ブログで左側にサイドバーがあると、記事を読みにくるたび、長ったらしいサイドバーの読み上げから始まってしまい大変・・・という話をされていた。

確かに~。
言われるまでぜんぜん気づいていなかった。

「どうせ誰もサイドバーの下のほうなんか見ちゃいない」

と思って、余分なリンクとかもべたべた貼り付けてあったが、実は音声読み上げソフトを使っている人にとっては、そこがハードルになっていたのだ。

で、サイドバーは左側にも設置したまま、テンプレートをいじって、HTML的には、

1.真ん中の本文部分
2.サイドバーその1
3.サイドバーその2

という順序で書き出すようにした。
表示する場合には、スタイルシートで表示位置を指定しているので、ちゃんと本文部分が真ん中にくる。

ブラウザで、スタイルシートを無効にするか、このページ(スタイルシートを指定していない)を見てもらうとわかるはず。

簡単に書くとこんな感じ。

▼ページのテンプレート

<html>
<body>

<div ID="container">

<div ID="main">ここに真ん中の本文部分</div>

<div ID="left">ここに左側のサイドバー</div>

</div>

</body>
</html>


▼スタイルシートのテンプレート

#container { position:relative; width: 730px; }

#main {
position: relative;
width: 490px;
float: right;
padding: 0px 30px 0px 30px;
margin: 0px;
}

#left {
position: relative;
width: 180px;
padding: 0px;
margin: 0px;
float: left;
}

あれ?
なんかちょっと変な気もするけど・・・まあ、たぶん大体あってる。

三段組の時はこんな感じにしていた。

あと、その方が主催しているMLに入っていて、その中でも言われて初めて「確かに」と思ったことがあった。

たとえばML内メールでタイトル(Subject)の頭に[wada-blog]など付く場合で、それが何重にも付いているよう時。あるいは「RE:RE:RE:RE・・・」とかなる場合。音声読み上げソフトだと全部読み上げてしまうので余計なものは削ったほうがいいようだ。もちろん人と場合によるのだろうが。

もうひとつ、元メールを引用符付きで残し、その間にちょこちょことレスをつけてゆく「インライン返信」みたいなのがあるけど、音声読み上げだと、いったいどこまで読めばいいのかわからなくなるので、そのあたりも、音声読み上げの人にどう聞こえているのか配慮しながらにしたほうがいいとか。

確かに。

目で見ていれば、「ここまで読めば終わりだな」と下のほうまでざっと見渡して判断できるけど、そうでない場合は、ずっと署名のところまで読み上げてしまうことにもなりかねない。時間もかかるし大変だ。


・・・ということで、前置きが長くなってしまったが、音声読み上げソフトにどんなものがあるのか?から調べてみたい。

> 続く

インターネットで便利&お得&賢くの記事一覧