１ はじめに

ゴールボールをしているほぼ全盲の方と話をしていて、一般向けに行なった講演に興味があるということだったので、発表資料を渡そうとして愕然としました。プレゼンソフトで作成した資料は、テキスト部分を中心に読み上げソフトで理解することは可能ですが、あちこちでテキストの配置などに意味を持たせ、視覚的にでないと分からないように作ってあり、そのまま渡しても理解できないと思われました。

Apple KeynoteやMicrosoft PowerPointのアクセシビリティに関する機能を調べ、読み上げに適したPDFファイルが作れるか調べましたが、そういう機能はないようでした。Adobe Acrobatの機能で、PDFファイルにあとづけで読み上げるテキストを埋め込めるか調べましたが、これも無理そうでした。そこで、テキスト中心の文書をHTMLファイルで作ることにしました。

こうすれば、ほぼ最初から資料を作ることになりますが、音だけでも確実に分かる資料が作れそうです。ただ、これもそう簡単ではなく、macやiPhone等に標準塔載されている読み上げソフトであるAppleのVoiiceOverが、ちょこちょこ読み間違いをしたり、固有名詞をうまく読んでくれなかったりします。

ちょっと調べたところrubyタグで読み仮名をつければよさそうなのですが、残念ながら本体の漢字とルビを二重に読んでくれるので、イマイチです。さらに調べるとCSSとJavaScriptを使って、読み上げモードと閲覧モードを変更するようなボタンをHTMLに組み込めるようにして、さらに、この方法を広く発信しているページを見つけました。

ただ、自分でHTMLに組み込む際に、ちょっと分かりづらかったので、自分がやった手順を説明します。WordPressなどは用いず、HTMLファイルを直接編集することを前提としています。

なお、実際に作ったページ「未来共創スクール＠くまもと森都心プラザのプレゼン資料」も参考のために共有します。こちらでは、CSSでu-visually-hiddenというクラスを用意して、ボタンを見えないようにしています。これで、読み上げを使わない人は、このボタンが見えなくなります。

２ 「まなキキプロジェクト」とスクリーンリーダーモード

この文書で紹介するのは、「学びの危機」 Counter Learning Crisis Projectのページである「スクリーンリーダー特集：スクリーンリーダーモードの作り方その(1)」です。

このプロジェクトは、障害があっても学んでもらいたいと思って、様々な取り組みをされているようです。実際、このページ自体に「ふりがなをつける」や「もじのあいだをひろくする」といったボタンがつけられており、「ふりがなをつける」を押すと、rubyタグ内のrtタグで指定されたふりがなが漢字の上に表示されるようになります。これにより、例えば、難しい漢字が読めない子でも無理なく読めるようになるでしょう。

読み上げに関しては、上記ページの「スクリーンリーダーモードをつくる」のセクションにあります。簡単に仕組みを説明すると、HTMLでボタンをつけ、これに名前をつけておきます。その上で、コンテンツを作成する人はrubyタグにread_kanaというクラス属性を付与しておきます。こうしておいて、上記ページで準備されているJavaScriptのコードを使うと、さきほどのボタンが押された時に、ページ内のrubyタグで囲まれた漢字が、read_kana属性を持つふりがなに置き換えられます。元の漢字は消えて、ひらがなやカタカナになるだけですので、VoiceOver等の読み上げソフトが二重に読むこともありませんし、間違えて読むこともありません。

３ スクリーンリーダーモードの設置の仕方

一つのHTMLページしかない場合、CSSもJavaScriptはHTMLに埋め込んでもよいでしょう。この場合、CSSは下記のようにstyleタグに囲んで、headタグ内に記述しましょう。

<style>
</style>

JavaScriptについては、上記ページには明示的に書いてなかったのですが、著名なライブラリでありjquery.jsを使っているようなので、これも読み込んでおきます。jqueryのバージョンは、まなキキページのソースコードを見て、同じバージョンに揃えています。これもheadタグ内に置いておきます。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js?ver=3.6.1' id='jquery-core-js'></script>

この上で、HTMLファイルのbodyタグ内の最初のほうに、スクリーンリーダー向けのボタンを設置します。この位置は、本文内であれば好きなところで良いのですが、最初のほうにあったほうが良いでしょう。

最後にscriptタグに、上記ページのJavaScriptのコードを貼りつけます。headタグ内でもよいし、bodyタグ内でもよいですがjqueryを読み込んだ後でないといけない気もします。

ここまでは、同じファイルに埋め込むことを前提で説明しましたが、複数のHTMLファイルがある場合は同じコードを大量に書くことになるので、CSSとJavaScriptをそれぞれ.cssと.jsという拡張子をつけたファイルにまとめ、これらをHTMLページから読み込んでも問題ありません。例えば、CSSをfile.cssというファイルに、JavaScriptをfile.jsに保存し、HTMLファイルと同じ場所に置いてあると仮定すれば、以下のような感じになります。

<link rel="stylesheet" type="text/css" href="file.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js?ver=3.6.1' id='jquery-core-js'></script>
<script src="file.js"></script>

４ おわりに

なお、このResearchMapについて調べた限りでは、HTMLのヘッダ部分の編集ができないようで、同様の仕組みを実現することはできませんでした。