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

アクセシビリティBlog

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

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2014年4月3日

WAICが2014年3月版アクセシビリティ・サポーテッド情報を公開

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

ウェブアクセシビリティ基盤委員会(WAIC)は去る3月31日、2014年3月版アクセシビリティ・サポーテッド情報を公開しました。アクセシビリティ・サポーテッド情報は、ある実装方法(技術)が、ブラウザーや支援技術を通して、ユーザーから利用できるかどうかの判断材料を提供しています。WAICが前回公開したアクセシビリティ・サポーテッド情報は2012年9月版で、今回はおよそ1年半ぶりの更新となります。

今回の検証結果には、次に示す、より新しいバージョンのブラウザーとスクリーン・リーダーが含まれています。

また、今回の検証結果を踏まえて、WAICは実装方法がJIS X 8341-3:2010の達成基準を満たすことができるかどうかの見解も変更しています。前回2012年9月版から見解が変更されたもののうち、達成可能とされたものは次のものがあります。

また、前回よりも見解が悪化したものには次のものがあります。

これはイメージマップが指定されたimg要素のalt属性が、一部のブラウザー(SafariとGoogle Chrome)で画像無効時に表示されないことや一部のスクリーン・リーダー(VoiceOver)で読み上げられないためです。

このように、2014年3月版の結果においても、HTMLなどの仕様に沿った標準的な実装方法にも関わらず達成不可能や要注意になっているものが多くあります。今後ますます、ブラウザーや支援技術が各種仕様への対応を進めることが求められます。

2014年3月28日

NVDAのFocus Highlightアドオン

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

NVDAのFocus Highlightアドオンは、レビュー中のオブジェクトやフォーカスのあるオブジェクトの周りに枠線を表示するアドオンです。

Focus Highlightアドオンの1.1開発版では、レビュー中のオブジェクト(ナビゲーターオブジェクト)には緑色のギザギザの線(緑色の太い線の上に青く細いギザギザの線)が、フォーカスのあるオブジェクトには赤色の線が表示されます。フォーカスのあるオブジェクトをレビューしている場合には、通常よりも太い赤色の線が表示されます。

このアドオンによって、NVDAが読み上げているオブジェクトやフォーカスのあるオブジェクトを視覚的につかみやすくなります。筆者はこのアドオンを、特にNVDAを使ったデモを行う際や動画を作る際に利用しています。NVDAでHTMLページを読み上げる場合には、このアドオンを使わなくても、CSSを調整することでフォーカスのある要素を視覚的にわかりやすく表現することができますが、レビュー中のオブジェクトを強調表示する方法はありません。そのため、NVDAが画面のどの部分を読み上げているのかは視覚的には伝わらない場合がでてきます。一方、このアドオンを使うとレビュー中のオブジェクトも視覚的にもわかりやすく伝えることができます。実際にCSUN 2014の発表用のデモ動画はこのアドオンをインストールしたNVDAを用いて作成しました。

NVDAを使っている皆さんは試してみてはいかがでしょうか。

2014年3月23日

CSUN 2014でセッション発表を行いました

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

以前の記事でも述べていましたが、米国サンディエゴで開催中のCSUN 2014でセッション発表を行いました。

Accessibility and the Power of CSS: Disparities between Ideals and Reality」と題して、ブラウザーが支援技術に提供する情報が、HTMLのセマンティクスを反映していない(CSSの影響を受けてしまう)場合があるという問題を取り上げました。

セッション会場には常時20人以上の方に参加していただきました。ありがたく思います。

なお、セッションで使ったスライドや資料(英語)は公開しています。また、本セッションの内容は4月25日開催のCSUN 2014参加報告セミナーで日本語で紹介する予定です。

2014年3月22日

CSUN 2014展示レポート:新たなタッチディスプレイ

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

引き続き、米国サンディエゴで開催中のCSUN 2014のレポートです。3月21日のレポートではセッションではなく展示会場での見かけたトピックスを紹介したいと思います。CSUN 2014では100を超える企業や団体が出展し、製品やサービスの紹介やデモを行っています。

新たなタッチディスプレイ

この記事ではTactalis HCIの展示ブースを紹介します。Tactalisは主に視覚障害のユーザーを対象にしたタッチディスプレイです。

このディスプレイは中に磁石が入っています。ユーザーが金属のついた指輪をはめて指をディスプレイ上で動かすと、注目すべきオブジェクトに指が自然と引き寄せられます。金属のついたタッチペンでも同様です。これによってユーザーは画面のどこに注目すべきオブジェクトがあるかすばやくわかるようになります。

展示ブースでは実際の端末を操作することができ、筆者も試してみましたが、指をディスプレイ上で動かしていると、磁力で指が注目すべき場所(画面上に表示されたボタン)に引き寄せられ、自然に位置がわかりました。これまで経験したことのない不思議な感覚でした。

Tactalis社のタッチディスプレイでは、ユーザーは指輪をつけてディスプレイに触ります

CSUN 2014でも、触地図(紙などに凹凸をつけて道や施設を表した地図)のデモやグラフを音の高低で表現する(Chart Sonificationと呼ばれていました)デモなどが行われていましたが、このディスプレイはそれらとは違う形でグラフィックスやユーザーインタフェースを表現できるようになるものと期待しています。

説明員のかたによると、このディスプレイは2014年末に注文を開始して、2015年初頭に販売を開始したいとのことでした。日本でも気軽に入手できるようになると良いと思う製品です。

2014年3月21日

CSUN 2014セッションレポート2:WAI-ARIAの基礎

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

米国サンディエゴで開催中のCSUN 2014では、3月20日もセッション発表が行われています。この記事では、3月20日のセッションの中から気になったトピックスを紹介します。

WAI-ARIA 1.0の基礎

今年のCSUNではWAI-ARIA(Accessible Rich Internet Applications)に関する発表が数多く行われています。CSUN 2014では1つの時間枠に最大で20を超えるセッションが並行して行われることもありますが、1つの時間帯にWAI-ARIAに関連するセッションが複数行われることも珍しくありません。

その中でもSSB BART GroupのJonathan Avila氏とBryan Garaventa氏によるThe ARIA Technology Stack: Browsers and Screen ReadersはWAI-ARIAに関する基礎的な内容をまとめたものになっていました。

WAI-ARIAは、Webページの一部として作られたユーザーインタフェースが、HTMLのセマンティクスで表現できる範囲を超えてしまい、支援技術にセマンティクスを伝えることができないという問題に対処するために作られました。WAI-ARIAの語彙は大きく3つの領域にわかれます。文書の大まかな構造(ランドマークなど)、リッチなインタフェース(ツリーやアコーディオンなど)、動的なコンテンツ(ライブリージョン)です。

WAI-ARIAは要素のセマンティクスを変更し、そのセマンティクスはAccessibility APIを通して支援技術に提供されます。WAI-ARIAを指定しても要素の機能や見た目は変わらないため、WAI-ARIAを使ったコンテンツをアクセシブルにするには、開発者が機能と見た目を実装/調整する必要があります。セッションではjQuery UIやDojo/DijitをはじめとするJavaScriptライブラリがWAI-ARIA 1.0への対応を行っていることが紹介されていました。

WAI-ARIAのサポートは環境によって異なるものの、スクリーン・リーダーは何らかのレベルでWAI-ARIAをサポートしているとのことです。今回興味深いと思ったのは、スクリーン・リーダーだけではなく、画面拡大ソフトウェアでもWAI-ARIAは活用されているという話でした。具体的にはZoomTextがaria-activedescendant(子孫の要素の中でアクティブなもの)を拡大画面の中に表示するとのことです。aria-activedescendantは、ユーザーが直接操作している要素とアクティブな要素が異なる、複雑なインタフェースで、アクティブな要素を表します。HTMLではselect要素を使ったドロップダウンメニューなどがこのような複雑性をもっています。具体的には「ユーザーが直接操作している要素」はselect要素、「アクティブな要素」は選択中のoption要素にあたります。

さらに、WAI-ARIAを使う場合に注意すべき点も紹介されていました。WAI-ARIAを使うことでブラウザーが動作を変えることはないものの、支援技術は動作を変える場合があることに注意しましょうという話がありました。特にapplicationロール(role="application")やdialogロール(role="dialog")でスクリーン・リーダーの操作モードが変わることが解説されていました。スクリーン・リーダーには文書を閲覧するためのモード(virtualモードやbrowseモード)とフォームなどで文字を入力するためのモード(formモードやfocusモード)をもっているものがあります。これらのスクリーン・リーダーは、applicationロールやdialogロールが指定された要素に移動すると操作モードが入力用に切り替わります。このモードは、キーボード操作ですべてのコンテンツ(リンクや入力欄だけではなく文字通りすべてのコンテンツ)にアクセス/操作できることを前提としています。つまり、コンテンツ側がキーボード操作を処理する必要があります。なお、スクリーン・リーダーのモードの詳細につきましてはアクセシビリティBlogのスクリーン・リーダーの仮想バッファーをご覧ください。

applicationロールやdialogロールがスクリーン・リーダーに与える影響は他のセッションでも言及されており、私が参加したセッションだけでもこの2日間で3つのセッションが言及していました。それだけ注意が必要な点だと感じます。

また、同じ3月20日、W3CはWAI-ARIA 1.0WAI-ARIA 1.0 User Agent Implementation Guideが勧告に達したことをアナウンスしました(W3C Blogの記事)。WAI-ARIAが安定した勧告になったことで、WAI-ARIAを利用する場面がますます増えるものと思います。注意すべき点は押さえたうえで、活用していこうと改めて思いました。

2014年3月20日

CSUN 2014セッションレポート1:Canvas要素のアクセシビリティ

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

米国サンディエゴで開催中のCSUN 2014では、今日(3月19日)からセッション発表が始まりました。この記事では、3月19日のセッションの中から気になったトピックスを紹介します。

canvas要素のアクセシビリティ

W3CのMark Sadeckiさん(@cptvitamin)が行った「Accessibility Features of HTML5」ではHTML5仕様に含まれるアクセシビリティを高める機能が紹介されていました(スライド)。スライドを見ると予定されていた内容のすべてを発表することはできなかったようですが、セッションでは基礎的な内容から最近の話題まで紹介されていました。

特に私が興味深いと思ったのはcanvas要素をアクセシブルにするための機能です。Canvas 2D Contextには、グラフィックスをアクセシブルにする機能がいくつかあります。

1つは描画領域の特定の部分を「領域(Region)」として指定できるようになることです。さらに「領域」を特定のフォールバックコンテンツ(canvas要素の子孫)と関連付けることもできます。これらはHit Regions(ヒット領域)と呼ばれる機能です。

もう1つの機能はフォールバックコンテンツにフォーカスがあたった場合に、canvas要素上にフォーカスリングを表示させ、支援技術にもフォーカスのあたている領域を通知できるというものです。この機能については、以前の記事「canvas要素のフォーカス領域を指定する」で簡単に紹介しましたが、記事公開後にdrawSystemFocusRing()メソッドの名前がdrawFocusIfNeeded()に変更されました(なお、本記事執筆時点のHTML Canvas 2D ContextのEditor's DraftもdrawFocusIfNeeded()になっています)。

これらの機能は現時点では設定を有効にしたFirefox Nightlyで試すことができるとのことです。セッションでも、canvas要素上に描画されたチェックボックスのOn/Offをキーボードで変更するデモが行われていました。スライドの29ページがデモにあたります。

セッションでは特に触れられていませんでしたが、Canvas 2D Context仕様を読むと、Hit Regionsにはアクセシビリティ以外のメリットもあることがわかります。現在は、canvas要素上に描画されているオブジェクトがマウスでクリックされたかどうかの判定は、開発者がJavaScriptを使って行っていますが、Hit Regionsを使うと開発者が行わなくても済むようになります。具体的にはMouseEventのregionプロパティを見ることでイベントが発生した「領域」がわかるようになったり、「領域」に関連付けたフォールバックコンテンツにMouseEventのハンドラを登録できること、などが検討されています。

開発者にもユーザーにもメリットのあるHit Regionsの標準化に期待したいと思います。

2014年3月14日

CSUN 2014参加に向けて

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

来週3月17日から3月22日まで、毎年恒例となっている世界最大級のアクセシビリティに関する国際会議、29th Annual International Technology and Persons with Disabilities Conference (CSUN 2014)が開催されます。会場は今年もサンディエゴのManchester Grand Hyatt Hotelです。このManchester Grand Hyatt Hotelには2つのタワービルがあります。昨年のCSUNではHarbor Towerが主に使われていたのに対し、今年はSeaport Towerが主な会場になります。筆者にはHarbor Towerがとても広かった印象があり、また、Seaport Towerは初めてですので、現地に着いたらまずはホテル内の地図を確認しようと考えています。

さて、CSUNのメインとなるセッション発表は3月19日から3月21日にかけて行われる他、期間中は企業などによる展示やCSUN Tweetupを初めとするイベントも予定されています。

セッション発表予定

今年のCSUNでは、筆者は3月19日にセッション発表を行います。「Accessibility and the Power of CSS: Disparities between Ideals and Reality」と題して、ブラウザーが支援技術に提供する情報が、HTMLのセマンティクスを反映していない(CSSの影響を受けてしまう)場合があるという問題を取り上げます。

セッション聴講予定

もちろん、自分の発表だけではなく他のセッションへの参加も楽しみです。現時点で、筆者が参加を予定しているセッションは次の通りです。

3月19日
3月20日
3月21日

いよいよ来週からCSUNが始まりますが、CSUNを通して気がついたことはアクセシビリティBlogで紹介していきたいと思います。