板橋かずゆきさんのサイトリニューアルとアクセシビリティ施策

板橋かずゆきさんサイトWeb系のセミナーでご一緒したりコンサートをライブ中継させていただいたりなど、何かと関わらせていただいている盲目のシンガーソングライター板橋かずゆきさんのサイトをリニューアルさせていただきました。

最初にリニューアルしようと話し合ってから時間は経ちましたが、ようやく第一段階完了という感じで公開しました。

板橋さんのサイトということで、制作作業の確認は主に板橋さんが普段使われている音声読み上げソフトでチェックをしていただきました。板橋さんはスクリーンリーダー(Windowsの操作補助ソフト)としてPCトーカー、音声ブラウザ(ブラウザ操作に特化したソフト)としてボイスサーフィンを使用されています。

ちなみに私の方はスクリーンリーダーはNVDA、音声ブラウザはホームページリーダーを使ってチェックを行いました。計4つの音声読み上げソフトを使用しての制作チェックは自分にとっては初めてでしたが、青森県内でも珍しいのではないかと思っています。

以前からアクセシビリティに配慮した作りを続けてきたつもりなので、制作とチェックの大方は予想していたよりもスムーズに進んだのではないかと思います。板橋さんもこちらが制作したものに対して随時適切な修正指示を返してくださいました。

今回のように音声読み上げソフトが制作過程に多く関わったケースはなかったので、気づいた点をいくつかピックアップしたいと思います。

目次

画像に代替テキストを入れれば画像もチェックしてもらえる

至極当たり前のことですが、目の不自由な方はサイトに表示してある画像を視覚的に理解することはできません。しかし、どんな画像かを客観的に説明する説明文(代替テキスト)を画像に入れておけば、音声読み上げソフトがその内容を読み上げてくれるため、画像についてもチェックを行っていただけます。

実際今回でも「全盲」か「盲目」かの表記について、代替テキストを入れて説明することで内容を漏らさず板橋さんに伝え、レスポンスをいただくことができました。

箇条書きリストは番号を読み上げない場合がある

ちょっと専門的な話ですが、数字付きの箇条書きリスト(ol要素)でコードを書くと、標準では数字付きの箇条書きリストとして表示されます。しかし読み上げソフトによってはこの数字を読み上げてくれる場合と読み上げてくれない場合がありました。

これに気づいたのはCDに収録されている曲名を番号付きで紹介したいという板橋さんのご意見から把握したもので、最初はol要素で記述していたのにおかしいなと思っていました。が、確かに読み上げソフトによっては番号付きで読み上げてくれる場合と、番号を読み上げてくれない場合があることが分かりました。ちなみにソフトによっては箇条書きリスト(ul要素)で書いても数字を読み上げてくれるケースもありました。

この問題については何度かコードの書き方を直してみました。まずは数字付きの箇条書きリストol要素でCDの曲名を書く際に、各曲名の頭に曲順の数字も手入力して付けてみました。しかしイメージ通りに数字と曲名を読み上げてくれるケースと、数字を二度読み上げてしまうケースが出てきたのでこれは却下。

次に、箇条書きリスト(ul要素)でCDの曲名と、曲名の頭に数字を手入力して入れてみたところ、ほぼどの読み上げソフトでも「数字:曲名」が意図したとおりに読み上げられました。こうした結果から、CD紹介のページでは曲番号を手入力してあります。ちょっとHTML(ホームページを構築する言語)を知っている方からみればおかしいと思われるかもしれませんが、こうした理由があるということで理解していただけるとありがたいです。

PCトーカーでは、リンクの文字(アンカーテキスト)を読み上げず、アドレスを読み上げる

板橋さんに指摘していただいて気づいたのですが、PCトーカーではリンクを設定している文字、いわゆるアンカーテキスト部分の読み上げについて、文字を読み上げずリンク先のアドレス(http://といった部分)を読み上げるようです。

これについての対策として、リンク要素にtitle属性として、アンカーテキストと同じような、もしくはリンク先のページを端的に表す文字情報を入れることで、PCトーカーにtitle属性の内容を読み上げさせることができるそうです。しかしtitle属性に入力した文字情報は、他の音声読み上げソフトではアンカーテキストとtitle属性の内容二つを読み上げるケースもあるようでした。

アクセシビリティ関連の情報と照らし合わせて検討しましたが、title属性は設定せずそのままにすることにしました。このことから、アドレス自体もそのページの内容を想起させるような文字列になっていると、ページ移動する前になんとなく次のページの内容が想像つく場合があることもわかりました(板橋さん談)。

その他気を付けた点としては、リンクをクリックした際に極力新規でウインドウが立ち上がらないようにしました。これは音声読み上げソフトユーザーとしては強制的にページが切り替わることになり、混乱するきっかけになることがあるからという理由です。ページ内に埋め込んでいるtwitter(ツイッター)のリンク(新規ウインドウが立ち上がるリンク)についてはこちらで制御できないのでやむを得ませんでしたが、その他のリンクは極力同一ページで移動するようにしています。

また、最近よく見かける、ページ内をスムーズにスクロールして移動する機能(ページ下からページの上までスルスルっとアニメーションして移動するようなタイプ)については今回設定しませんでした。理由としては、あの機能については大抵Javascriptが使用されているのですが、あのリンクをクリックした場合、読み上げソフトによっては正常に読み上げ順序が移動しない場合があるからです。ページ上には表示していない、ナビゲーションスキップや本文へのスキップリンク等の挙動もこれに関連して正常でなくなる場合があります。この機能について今回はベストな解決策が見つからなかったため、機能として付けないことにしました。

大体以上のようなことに配慮しましたが、同時に作りきれなかった部分もまだ多くあります。例えば音声読み上げソフトでも正常に操作できる動画プレイヤーの実装や、お問い合わせフォームの適切なアクセシビリティ配慮、ブログ更新情報部分の適切なマークアップなどは諸所の理由からできなかったので、いずれ機会をみて実装したいと考えています。

関連記事一覧

  • コメント ( 2 )

  • トラックバックは利用できません。

  1. narajin

    やはりhpstylingさんのお仕事でしたか。

    視覚障がい者むけパソコン講習の席で、NetReaderの勉強がてら板橋さんのサイトを拝見してまして、講師の方も「あれ? キレイになってる」と話してました。

    このサイトがお手本になり、県内でもアクセシブルなWEBが広まるといいですねー
    宣伝します

    ご指摘のとおり、PCTalker(+NetReader)はHTMLの構造をつかむのが苦手みたいです。MyEditにコピペして読むという裏技もあるみたいですが….最新のVerはどうなんでしょうか? 制作側だけでなく開発側もユーザの意見をもっと反映してほしいです

    ページ内リンク、外部リンクのお話は、前から問題になってましたね
    ていうか、まず自分のブログから直さないと!

  2. admin

    >narajinさん

    コメントありがとうございます。
    まだまだやれなければならない部分はあるのですが、一区切りついたのと板橋さんがメディアに頻繁に出る機会が増えるということもあっていったん公開しました。

    PCトーカーは見出しスキップ機能もないですもんね。ユーザー数は多いはずなので、色々とパワーアップしていただきたいところですね。

    naraさんの言われるように、利用者だけではなくて制作者やベンダーがそれぞれ自分以外の視点から見つめ直したり、フィードバックを得ることが大切ですね。これはサイトのアクセス解析を分析するのと似ていると思います。

    ページ内リンクや外部リンクって意外と大したことないと思ったりしますが、実際に自分で読み上げソフト使ってみるとこれがなかなか不便だったりするものですね。

    かくいう自分も新規ウインドウを起動してしまう場合もありますし、AmazonやTwitterなど外部サービスを利用した場合は制御できない場合もあったりでなかなか難しいところですね。まずはできるところからということで!