Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。

ニュースサイトにおける画像の代替テキストについて

アクセシビリティ・エンジニア 辻

私がインターネットを通じて様々なデータにアクセスできるようになって最もうれしかったことの1つに、スクリーン・リーダーを使用してほとんどタイムラグなくニュース記事を読めるようになったことがあります。

近年、主要なニュースサイトのアクセシビリティも向上し、私自身も様々な選択肢の中から自分が読みたい記事を読むことができるようになりました。

たくさんの記事が読めるようになったことはとてもありがたいのですが、最近、ニュース記事に登場する画像の代替テキストが耳について困ることがあります。

本来、記事中に登場する画像の説明を提供する目的で使用してほしい代替テキストが、スクリーン・リーダーの利用者をはじめとした読み手の意図に反して使用されていることが多いからです。

今回はその一例をご紹介したいと思いますが、具体的な媒体名を挙げてその代替テキストの使い方を批判する目的ではなく、記事執筆に携わる方に、自社の記事を見直すきっかけにしていただければと考えています。

任意の文字列が代替テキストになっている例

記事中に画像が登場するたびに任意の文字列が代替テキストとして設定されている例によく遭遇します。

例えば、新商品を紹介するような記事には以下のような文章がよく登場します。

今回発表されたのはエントリーモデルからプロフェッショナルモデルの3機種で、それぞれの特徴は以下の通り。
ihhflWBCMFN1uopV.jpg
発売日: 9月9日
価格: 15,000円
WUqGxt616MbpY9ruXHxRIkVw7yI3ge1n.jpg
発売日: 9月9日
価格: 21,000円
XlCILCVL138gyRPrdWYlirohmOP4DqVy.jpg
発売日: 9月25日
価格: 75,000円

この例では、画像の代替テキストとして任意の長い文字列が読み上げられるのを待つか、その部分を読み飛ばして先に読み進めなければなりません。

記事を読み終えるまでに時間がかかることはもちろん、内容の理解に支障を来す場合もあります。

記事タイトルを代替テキストに設定している例

画像が登場するたびに記事タイトルが何度も読み上げられるニュースサイトも少なくありません。

記事のタイトルが長い場合、記事を読んでいるときに何度もその記事タイトルが読み上げられるので、本文の理解に支障を来す場合もあります。

「画像には代替テキストを設定しなければならないけど、何を設定したらいいのだろう？悩ましいけど締め切りが！そうだ、取り急ぎ記事タイトルなら間違いではないだろう。」と考えながら記事を書いている方がいらっしゃるかどうかはわかりませんが、もしその画像を説明する必要がある場合は適切な情報を設定していただけるともっと記事が読みやすくなるように思います。

画像の前後のテキストが重複して読み上げられる例

記事を読んでいるとき「あれっ、今の文、さっきも聴いたような気がする！」と気になることがあります。

代替テキストに本文と同じテキストが入っている場合、画面上では記事の本文を違和感なく読むことができるとしても、スクリーン・リーダーでは同じ文言が2度読み上げられてしまうのです。

記事が長くなればなるほど、2度読み上げられる文言が記事の理解を妨げてしまうことがあるので、このようなケースでは代替テキストは空（alt=""）にしていただく方が良いと思います。

今回は、ニュースサイトで私がよく耳にする問題のありそうな代替テキストの例をご紹介しましたが、これらの多くは改善が難しいものではないと考えられます。

記事の内容がより多くの読者に過不足なく伝わるよう、記事を執筆・編集されている方、ニュースサイトを管理・運営されている方に改善をご検討いただけますと幸いです。

パーマリンク

いちスクリーン・リーダーユーザーのFirefox最新版の利用環境について

アクセシビリティ・エンジニア 辻

私は、昨年11月にFirefox 57.0とスクリーン・リーダーの読み上げについてという記事を書いて以降、数日前までFirefoxの延長サポート版を使い続けてきました。

私が普段使用しているアドオンの中に最新版のFirefoxでは利用できないものが少なからずあったこと、仕事で使用している一部のWebアプリケーションのフォームが、NVDAとの組み合わせで意図したとおりに読み上げられなかったことなども相まって、これまで特に仕事の場面では最新版のFirefoxを避けていました。

ところが先日、私が愛用しているアドオン「Tab Mix Plus」で便利だと感じている以下の3つの機能がFirefox 61.0.2では高度な設定を変更することで実現できることを知り、仕事の場面でも積極的にFirefoxの最新版を使っていくことにしました。

実際に変更した設定項目

それでは、私がFirefox最新版を利用するために変更した高度な設定の項目を具体的に紹介します。

現在のところ、私が設定を変更したFirefoxは問題なく動作しておりますが、これらの設定を変更することで予期しない問題が発生する可能性もあります。

Firefox の設定エディターもご確認いただき、設定を変更いただく際は十分にご注意ください。

Firefoxの高度な設定を変更するには、ロケーションバーに「about:config」と入力してEnterキーを押します。

ロケーションバーを別のタブに開く

私は、ページを閲覧中にロケーションバーから別のページを開いたり、何かを検索したりしたときの検索結果が新しいタブに表示された方が便利だと考えています。

この設定を変更すると、例えば調べ物をしているときなど、タブを切り替えることで元のページと検索結果の間を行き来できます。

設定エディターで以下の項目を検索し、Enterキーを押して値を「True」に変更します。

browser.urlbar.openintab

ブックマークを別のタブに開く

ブックマークしておいたページも、ロケーションバーと同じように別のタブに開けると便利です。

この設定を変更するには以下の項目を検索し、Enterキーを押して値を「True」に変更します。

browser.tabs.loadBookmarksInTabs

最後のタブを閉じてもFirefoxのウインドウを閉じなくする

私はCtrl+Wを押して複数のタブを閉じているとき、誤ってブラウザーのウインドウを閉じてしまうことがよくあります。

もちろん、Firefoxを立ち上げ直せば問題はないのですが、できれば最後のタブが閉じてしまってもウインドウが残っていると便利だなと感じています。

この設定を変更するには以下の項目を検索し、Enterキーを押して値を「True」に変更します。

browser.tabs.closeWindowWithLastTab

今回は最新版Firefoxを私にとって使いやすくするための設定を紹介しましたが、この設定変更はスクリーン・リーダーを使って問題なく行うことができます。

NVDA等のスクリーン・リーダーでFirefoxを利用している方で、同じような問題で最新版のFirefoxを使用することを諦めていた方のお役に立てれば幸いです。

パーマリンク

エクストラの最新支援機器セミナーに参加しました

アクセシビリティ・エンジニア 辻

去る8月19日に都内で開催された、音声・点字携帯情報端末 ブレイルセンスポラリス日本語版を紹介するセミナーに参加してきました。

これは文字通り、音声と点字で情報を表現する携帯型の支援技術で、7月末に有限会社エクストラから発売されている製品です。

私は古いモデルのブレイルセンスを所有していますが、最近内蔵されているWebブラウザーでWebサイトにアクセスできなくなってしまったこともあり、その最新動向が気になっていました。

セミナーは2部構成になっており、前半は開発元であるHIMSのテクニカルサポートマネージャーであるジェニファー・アクスラー氏の講演、後半は静岡県立大学国際関係学部の石川准教授によるブレイルセンスポラリス日本語版の機能紹介でした。

ブレイルセンスポラリス（Braille Sense Polaris）とは

今回紹介されたブレイルセンスポラリスは多機能な点字ディスプレイで、32セルのディスプレイと文字を入力したり機器を制御したりするためのキーで構成されています。

音声と点字を出力できるので、利用者は用途に応じてどちらか一方、または両方を活用して情報にアクセスすることができます。

様々な形式のファイルに対応しており、PDFやEPUBのドキュメントを読むことができたり、様々な形式の音声ファイルを再生できるとのことでした。 また、気になっていたWebサイトへのアクセスも問題なくできるようになったとの説明を聞いてとても安心しました。

オペレーティングシステムにはAndroid 5.1が使用されており、ワードプロセッサーや電子メール、Webブラウザやメディアプレーヤーといった基本機能を始め、一般的に普及しているAndroid向けのアプリケーションを使用することもできます（アプリケーション側のアクセシビリティの対応状況によっては利用できない可能性もあります）。

本体底面にはカメラが内蔵されており、商品検索や文字認識などに利用することができるそうです。

印象に残ったデモンストレーション

私が使用している旧型のブレイルセンスは、メーカーから提供されているアプリケーションでできる以上のことはできませんが、セミナーで紹介されたブレイルセンスポラリスは基本機能は少なくなったものの、様々なAndroidアプリが使用できるようになったことで、可能性が広がったような印象を受けました。

GoogleやAmazonの音声アシスタントを使用して現在地の情報や天気を確認するデモ、Apple Musicのアプリを操作するデモなどが興味深いと感じました。

また、AbemaTVのアプリを使用してインターネット放送局の音声を聞くことができたり、SkypeやLINEでコミュニケーションを取ることができたりすることが確認できたのもとても参考になりました。

これまでのブレイルセンスはどちらかというと単体で使用する機器のイメージが強かったのですが、アプリケーションを介してGoogle カレンダーなどとデータを同期させることができるようになったところも便利そうだと感じました。

会場の様子

セミナーが開催されたのは日曜日の午後でしたが、大変多くの方々が参加されていたことからも、このデバイスへの注目の高さがよくわかりました。

特に、視覚と聴覚の両方に障害のある盲聾の参加者から活発に質問が出ていたことが印象に残りました。

今回紹介されたブレイルセンスポラリスに加えて、秋にはもう少しサイズの小さなモデルの発表も予定されているとのこと、さらに選択の幅が広がりそうです。

パーマリンク

Microsoftが公開しているアクセシビリティ関連のヘルプ動画について

アクセシビリティ・エンジニア 辻

すでにご存じの方もいらっしゃるかもしれませんが、Microsoftがアクセシビリティ関連のヘルプ動画（英語）を公開しています。

現在は以下の12項目が提供されており、Narratorをはじめとしたスクリーン・リーダーやキーボードショートカット、視線コントロール等に関する操作説明を確認することができます。

この記事では動画のタイトルを意訳してご紹介しますが、翻訳の正確性は保証いたしませんので、必要に応じて元のタイトルをご参照ください。

今回この再生リストをご紹介しようと考えた理由は以下の2点です。

今後は日本語を含む多言語での提供にも期待したいと思います。

パーマリンク

防災情報とアクセシビリティ

アクセシビリティ・エンジニア 辻

今年は大きな災害がいくつも発生しており、それに伴って防災情報を見聞きする機会も多くあったのではないでしょうか。 私もここ数年、住んでいる地域の防災情報をメールで受け取れるように登録したり、気象警報などが発表された際に通知を受け取れるアプリをインストールしたりして、できるだけ災害に備えるようにしています。

iPhoneのVoiceOverはメールやアプリの通知内容を読み上げることができるので、届いた情報はほぼタイムラグなく受け取ることができます。 雨雲が近くまで接近してきていること、警報が発表されたこと、避難準備情報が発表されたことなど、近隣の情報を手に入れられるようになったことはスクリーン・リーダーなどの支援技術を活用しながら生活している私にとってとてもありがたいことです。

とはいえ、中には私が把握できない (スクリーン・リーダーで内容を読み上げられない)情報も少なからずあります。 代表的な物は、危険がある地域と避難先の情報が掲載されているハザードマップで、多くの場合は画像だけで情報提供されているようです。

先日、台風12号が接近した際、私が住んでいる自治体からも防災情報のメールが配信されました。 文面には、土砂災害警戒区域や浸水想定区域が記されたハザードマップのリンクをホームページのトップ画面に掲載しているので詳細を確認してほしい旨が記載されておりましたので、私も近隣の情報を確認できればとホームページにアクセスしてみました。

困ったことに、掲載されていたハザードマップは画像だけで構成されており、代替情報も提供されていなかったのでスクリーン・リーダーでは必要な情報を得ることができませんでした。 幸いにも今回、私の住んでいる近隣地域では大きな災害が発生しなかったので事なきを得たのですが、防災情報はそれを必要としている人に過不足なく伝えられるような仕組みが必要だなと感じました。

私の知る限り、現在は防災情報をアクセシブルに提供するためのガイドラインや仕組みがまだありません。 しかしながら、災害はいつどこで発生するかが予想できないので、できるだけ早く情報を整備していく必要があると思います。

今回例に挙げたハザードマップも、例えば表や定義リストを使用したり、地域名から近隣の危険箇所をテキスト情報で提供するような検索システムなどを作ることで、画像以外の手段で情報を発信することも不可能ではないと思います。

とはいえ、私の不十分な知識だけではどうすれば防災情報をアクセシブルな状態で多くの人に届けられるかがわかりません。 機会があれば、皆さんと一緒に防災情報のアクセシビリティについて検討していけたらと考えているところです。

パーマリンク

VoiceOverで利用できるAmazonのショッピングアプリ

アクセシビリティ・エンジニア 辻

全盲の視覚障害者の私がWebを利用するようになって日常生活が便利になったなと思うことの一つに、オンラインショッピングがあります。

2000年代前半は主に、PCを使用して様々なショッピングサイトで買い物をしておりましたが、ここ数年はiPhoneを使って外出先でのちょっとした空き時間に買い物をする機会も増えてきました。 今回は、そんな私が現状もっともアクセシビリティが優れていると感じているiPhone向けのAmazonのショッピングアプリで、VoiceOverを使用してどんな風に買い物をしているのかをご紹介します。

私が外出先で買い物をするのは、電車で通勤しているときやオフィスで昼食を食べた後の時間です。そのちょっとした空き時間に買い物をするには、買い物にかかる時間をできるだけ短くする必要があります。

これまで、いくつかのショッピングアプリを使って商品の購入を試しましたが、現在のところ私はAmazonのショッピングアプリが最も短時間で買い物を完了できると考えています。

商品を検索する

アプリを起動し、以下のような手順で購入したい商品を検索します。

商品をカートに入れる

個々の商品のページでも、ページ内の見出しを活用して商品情報やレビュー、関連商品などに簡単に移動することができます。

ページ内で商品情報を確認したら、ローターをフォームに変更して上下のフリック操作で「カートに入れる」ボタンを探してダブルタップします。 数量を変更するためのボタンも上下のフリックで探すことができます。

商品を購入する

アプリの下側をフリック操作で読み進めると、以下のようなボタンが並んでいる場所があります。 なお、この画面ではローターでフォームを選択することができないので、上下のフリック操作でボタンを探すことができないのが少し残念なところです。

カートに商品が入っていれば、「カート 1」のように商品の個数が読み上げられるので、ダブルタップして開きます。

カートの中身を確認したら「レジに進む」ボタンを押して先に進みます。

開いたページの「注文の確定」という見出しの中にある「注文を確定する」というボタンを押せば注文完了です。

このページには他にも「注文内容」「お届け先住所」「支払い情報」といった見出しがあるので、変更が必要な項目があれば、注文を確定する前に変更することもできます。

ここまで、私がiPhoneを使ってAmazonのショッピングアプリで買い物をする手順をご紹介しましたが、操作に慣れれば、見出しやフォームと言ったページ内の要素へのジャンプコマンドを活用することで短時間で買い物を済ませることが可能です。

このショッピングアプリをVoiceOverの利用者が利用できるのは単なる偶然ではなく、アプリを開発する際にアクセシビリティが考慮されている結果だと思います。 他のショッピングサイトでもこのようなアクセシブルなアプリが提供され、私たちVoiceOverの利用者の買い物する際の選択肢が増えていくことを願っています。

パーマリンク

ウェブアクセシビリティ基盤委員会がセミナー「これから取り組むWebアクセシビリティ 2018 夏」を開催

取締役 木達

私自身を含め、当社からも複数のスタッフが活動に参加しているウェブアクセシビリティ基盤委員会（WAIC）が、来たる8月22日に参加無料のセミナー「これから取り組むWebアクセシビリティ 2018 夏」を都内で開催します。

セッション1の講演「これでわかる！Webアクセシビリティって？JIS X 8341-3って？」は、過去のセミナーにおける同タイトルのセッションの再演。続くセッション2の講演「こうすればできる！ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方」は、制作者の方向けに実装の要点を説く内容となっています。また最後に質疑応答の時間を設けています。

日時
2018年8月22日（水曜日）14:00〜17:00（受付開始13:30〜）
定員
110名
会場
情報通信ネットワーク産業協会（CIAJ）
東京都港区浜松町2丁目2番12号 JEI浜松町ビル3階 B/C/D/E会議室
対象
官公庁、自治体、独立行政法人等の職員の皆様、一般企業のWeb担当者の皆様、Web制作者の皆様
特に、これからWebアクセシビリティに取り組まれようとする方
参加料
無料
主催
情報通信アクセス協議会 ウェブアクセシビリティ基盤委員会（WAIC）

参加をご希望の方は、ウェブアクセシビリティ基盤委員会のWebサイトのページ、これから取り組むWebアクセシビリティ 2018 夏をご覧ください。

パーマリンク

Pick Up