JavaScript Advent Calendar9日目。
##この記事のきっかけ
私は、障がい者向けに多目的トイレの情報を提供するウェブサイトを作成しています。あるとき、デモを体験していただこうとその地域の障がいをお持ちの方に集まっていただき、デモ体験会を開いたところ、視覚に障害をお持ちの方から次のようなご指摘をいただきました。
####「多目的トイレの情報をスライドショーで見せるようにしてるみたいだけど、スマホのスクリーンリーダーでその写真の情報が読みとれない」
作っていた私もうかつだった、視覚に障がいがある方がパソコンやスマホでスクリーンリーダーを使っていたことは知ってはいたものの自分が取り組んでるプロジェクトのウエブサイトで、どのように読み込まれるかは想定してなく、まさに盲点を突かれました。
早速、この事態に対応しようと取り組んだ話をここでまとめてます。
##まず考えて見たこと
視覚障がい者が普段、どのようにパソコンやスマートフォンを使用しているのか調べて見ました。一般にそれらのIT機器には、画面に表示されている文字や画像の場合は、alt要素に書き込まれた情報を読んでくれるスクリーンリーダーという機能があるようです。それで私は比較的導入しやすいアップルのVoiceOverで試してみることにしました。
####alt要素を付けたいのに
さて、画像にalt要素を付ければスクリーンリーダーが読んでもらえることは分かりましたので、次alt要素を付けていく方法を調べて見ましたが、どこを見てもHTMLに関するページに遭遇します。いや、スライドショーはJavaScriptで配列を持ってDOMを生成したいと考えていましたので欲しい情報にたどり着けませんでした。
それで、ここで一旦停まり自分が書いたスライドショーのJavaScriptのコードを見てみました。
イメージ図
<html>
<body>
<img id="sanplePrev" src="icon/left.png">
<img id="sample_target">
<img id="sampleNext" src="icon/right.png">
</body>
</html>
'use strict';
{
const sampleImages = [
'img/pic/images/sample/sample1.png',
'img/pic/images/sample/sample2.png',
'img/pic/images/sample/sample3.png',
'img/pic/images/sample/sample4.png',
'img/pic/images/sample/sample5.png',
];
const sample_target = document.getElementById('sample_target');
const samplePrev = document.getElementById('samplePrev');
const sampleNext = document.getElementById('sampleNext');
let currentNum = 0;
function setMainImage(sampleImages) {
sample_target.src = sampleImages;
}
setMainImage(sampleImages[currentNum]);
sampleNext.addEventListener('click', () => {
currentNum++;
if (currentNum === sampleImages.length) {
currentNum = 0;
}
setMainImage(sampleImages[currentNum]);
});
samplePrev.addEventListener('click', () => {
currentNum--;
if (currentNum < 0) {
currentNum = sampleImages.length -1;
}
setMainImage(sampleImages[currentNum]);
});
}
###ふと気づけたこと
コードを見ていた次のfunctionに目がとまりました。
function setMainImage(sampleImages) {
sample_target.src = sampleImages;
}
JavaScriptで、スライドショーを実装するとは言え、要はJavaScriptで、動的にDOMを生成しているのであって、ここでsrc属性を配列から持ってきていることに気づきました。つまり同じように配列でalt要素を準備すれば、このfunctionでalt属性を配列から持ってくることができるだろうと仮説を立て上記のJavaScriptのコードを下記のように変更してみました。
'use strict';
{
const sanpleImages = [
{img:'img/pic/image/sanple/sanple1.png', alt:'サンプル画像1です。'},
{img:'img/pic/image/sanple/sanple2.png', alt:'サンプル画像2です。'},
{img:'img/pic/image/sanple/sanple3.png', alt:'サンプル画像3です。'},
{img:'img/pic/image/sanple/sanple4.png', alt:'サンプル画像4です。'},
{img:'img/pic/image/sanple/sanple5.png', alt:'サンプル画像5です。'},
];
const sanple_target = document.getElementById('sanple_target');
const sanplePrev = document.getElementById('sanplePrev');
const sanpleNext = document.getElementById('sanpleNext');
let currentNum = 0;
function setMainImage(sanpleImages) {
sanple_target.src = sanpleImages.img;
sanple_target.alt = sanpleImages.alt;
}
setMainImage(sanpleImages[currentNum]);
sanpleNext.addEventListener('click', () => {
currentNum++;
if (currentNum === sanpleImages.length) {
currentNum = 0;
}
setMainImage(sanpleImages[currentNum]);
});
sanplePrev.addEventListener('click', () => {
currentNum--;
if (currentNum < 0) {
currentNum = sanpleImages.length -1;
}
setMainImage(sanpleImages[currentNum]);
});
}
####変更点の解説
変更を加えたところは2点あります。
まず配列
const sanpleImages = [
{img:'img/pic/image/sanple/sanple1.png', alt:'サンプル画像1です。'},
{img:'img/pic/image/sanple/sanple2.png', alt:'サンプル画像2です。'},
{img:'img/pic/image/sanple/sanple3.png', alt:'サンプル画像3です。'},
{img:'img/pic/image/sanple/sanple4.png', alt:'サンプル画像4です。'},
{img:'img/pic/image/sanple/sanple5.png', alt:'サンプル画像5です。'},
];
ここで配列をイメージファイルのパス用のimgとalt要素に付けたい説明をaltに名前を付けておきました。
次に先程のfunctionをこの付けた名前を使って配列から持ってくるようにしました。
function setMainImage(sanpleImages) {
sanple_target.src = sanpleImages.img;
sanple_target.alt = sanpleImages.alt;
}
これで、スライドショーの画像もスクリーンリーダーによって、alt要素が読み込まれることになります。
#おわりに
実は、こうしてスクリーンリーダーで、スライドショーの画像の情報が読み込まれるようにしたのですが、視覚障がい者の方のためにUIを再度検討したところ、「スライドショー」の切り替えるボタンまでどう誘導するのかという問題に遭遇しました。それで、結局の所自分のプロジェクトでは、この方法は採用していません。しかし大切なことは、どんな人でも使いやすいWebサービスを提供することだと思います。もちろん各障がいのある方の事情を完璧には反映できませんが、これからもそうした方々に寄り添いながらこうしたサービスが作られることを深く願います。