「アクセシビリティ」の記事一覧
話題「アクセシビリティ」に関連するコラム記事の一覧です。
（記事数：57）
この記事の公開日の前日（2010年8月20日）、WebアクセシビリティのJIS規格である「JIS X8341-3」（高齢者・障害者等配慮設計指針 - 情報通信における機器、ソフトウェア及びサービス - 第3部：ウェブコンテンツ）の改正版が正式に公示されました。改正した年を規格番号の末尾に付記する形で「JIS X8341-3:2010」と呼ばれます（以前、改正原案のパブリックコメントの受け付について触れた時点では2009年に公示される予定でしたが、さらに一年、じっくり時間をかけて練り上げられたものです）。
枝葉末節な話かもしれませんが、Webサイトの閲覧中におけるマウスポインタの形状について、気になっていることがあるので、主観的な意見ではありますが記しておきたいと思います。特にアクセシビリティの観点で、問題になるケースが見られたためです。
今回の話題で採り上げる「ページ内スクロールエリア」とは、ブラウザの機能として標準装備されているスクロールバーとは別に、Webページの中で表示されるスクロール領域を意味します。下図のようなイメージです。
ご縁あって、数ヶ月前から、地元で開催されている障碍者向けパソコン講習会に、ボランティアとして参加しています。いわゆる「パソボラ」というやつですね。
視覚障碍者を対象に「音声パソコン講習会」と銘打って開催されているもので、月一回の頻度で、一回につき3時間ほどの枠で実施されています。全盲、ロービジョン（弱視）の方を中心に、老若男女、パソコン/インターネット経験の多寡を問わず、様々な人たちが受講しています。
最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障碍、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。
2010年3月に第25回目として開催されたアクセシビリティに関する国際会議「CSUN」において、Webアクセシビリティ向上のために設立された米国の非営利団体「WebAIM（Web Accessibility in Mind）」による、スクリーンリーダーの利用に関する調査結果が発表されました。米国の状況ではありますが、興味深いトレンドが浮かび上がっており、個人的には、いずれ日本にも波及するのではないかと思いますので、ご紹介したいと思います。
Webアクセシビリティ向上のために設立された米国の非営利団体「WebAIM（Web Accessibility in Mind）」が開発/公開している、「WAVE」というアクセシビリティ検証ツールがあります。このツール自体は昔（2000年）から存在しており、私自身もよく使用しているのですが、2010年3月に第25回目として開催されたアクセシビリティに関する国際会議「CSUN」において、WebAIMによる「A Beginner's Introduction to WAVE」という入門者向けセッションがありましたので、そこでの発表資料も参考にしつつ、ご紹介したいと思います。
前回のコラム記事「色だけに依存しない（その1）」では、色の識別が苦手なユーザーについて、「どんな人がいるのか？」「何が問題なのか？」についてご紹介し、色だけに依存した情報提供がリスキーであること（同時に、ユーザーにフラストレーションを与え得ること）を述べました。今回は、色だけに依存した情報提供を防ぐために、どのように検証したらよいか、また、どう対策すればよいか、について、具体的にご紹介したいと思います。
Webサイトには様々なユーザーが来訪します。その中には、色の識別が苦手なユーザーも少なからずいます。そういったユーザーに対して、どういうことを気をつけたらいいか、について2回にわたってご紹介したいと思います。今回は、「どんな人がいるのか？」「何が問題なのか？」について触れたいと思います。
先のコラム記事で触れました「だれもが使えるウェブコンクール」で、当サイトは特別賞を受賞しまして、2010年3月26日に開催された表彰式とシンポジウムに参加させていただきました。単なる表彰式ではなく、Webアクセシビリティについて色々と学べるシンポジウムとして、とても面白く勉強になりましたので、私的メモの形ですがここに記録しておきたいと思います。
以前、当サイトのコラム記事で、無料で使えるスクリーンリーダー「NVDA」をご紹介しました。NVDAはオープンソースで開発されており、有志によって絶えず機能改善や動作改善が図られています。日本語版も、NVDA日本語化プロジェクトのメンバーによって、公式リリースではない開発版（trunk）であれば毎月1回から3回くらいの頻度でアップデートされています。
音声読み上げ支援技術（スクリーンリーダーや音声ブラウザ）の、日本におけるシェア調査によると、「PC-Talker」と「ホームページリーダー」が圧倒的に多いという調査があります（国立特別支援教育総合研究所が実施した「視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007」の「第6節 インターネットの利用状況」を参照）。Web閲覧においては、ホームページリーダーを使う人がもっとも多く、次いでPC-Talkerを使う人が多いようです。
Webの標準仕様を策定しているW3C（World Wide Web Consortium）のDirector（敢えて日本語に訳すと理事長でしょうか）である、Tim Berners-Lee（ティム・バーナーズ - リー）氏の言葉で、とても印象的なものがあります。Web制作の業界の方でしたら、既にご存知かもしれませんが、サイト運営を担当されているウェブマスターの皆さんには馴染みの無い言葉かもしれません。私自身この言葉を初めて目にしたとき、とても素敵だなと感動したので、紹介させていただきたいと思います。
このところ、Web以外での、リアルワールドにおけるプロダクトのユニバーサルデザイン（UD）関係者とお話をさせていただくことが何度かあり、その中で、久々に「Ronald Mace（ロナルド メイス）のユニバーサルデザイン7原則」に触れる機会がありました。古くからある有名な原則なので、すでにご存知の方も多いと思いますが、今見ても興味深い内容なので、この場でも採り上げてみたいと思います。
Webアクセシビリティの標準指針である、W3C（World Wide Web Consortium）の「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」および日本の「JIS-X:8341-3:2009（2010年に改訂される予定の公開レビュー版）」では、「アクセシビリティ・サポーテッド（Accessibility Supported）」という用語が見られます。見慣れない用語なので読んでいて戸惑うかもしれませんが、アクセシビリティを実効的なものにするための重要な概念だと思いますので、簡単にご紹介したいと思います。
ご自分のサイトがユーザーのブラウザにおいて、実際にどのくらいの横幅で閲覧されているかを知ることは、ユーザーインターフェースを設計をする上でとても興味深い事項ですね。今回は、閲覧ブラウザの横幅のデータを自動的に集積してくれるツール、BROWSIZEをご紹介します。
お問い合わせフォームをAjaxのポップアップで表示できる面白いサービスがありますので、ご紹介したいと思います。「VisitorContact」というサービスです。
（2010年3月19日追記）
当サイトは、このコンクールで「特別賞」を受賞いたしました。詳しくは「だれもが使えるウェブコンクール 受賞ウェブサイト」をご覧ください。
NPO法人「ハーモニー・アイ」さんが主催する、「みんなの声で選ぼう！だれもが使えるウェブコンクール」というコンクールがあります。アクセシビリティの観点で優れたサイトを発掘、表彰し、良い事例を広めてゆこう、というものです。
パンくずリストとは、Webサイト内のそのページの現在位置を示すナビゲーションです。
ホーム ＞ 犬 ＞ ミニチュアダックスフンド
上記のようなスタイルで、Webページの上のほうに表示されるのが一般的です（この例でいうと、「ホーム」と「犬」にはリンクが貼られているケースが多く、上位階層に簡単に移動できます）。童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来のようです。
面白い記事タイトルだなと思ってご一読いただければ幸いですが、Webページの音声読み上げをチェックする場合は、スクリーンリーダーや音声ブラウザで実際に読み上げてみましょう（ちゃんと「聴いて」みましょう）というお話です。
皆さんは、「テキストブラウザ」をご存知でしょうか？名前の通り、Webページをテキスト（文字）のみで表示するブラウザのことです。画像や、Flashなどのオブジェクトは表示せず、CSSやJavaScriptも扱わないので、一般的なブラウザ（IE、Firefox、Opera、Safariなど）に比べると表示されるページの見栄えやインタラクションのリッチさという点では劣るものの、その分、軽快でサクサク動くという利点があります。
先のコラム記事「改正JIS X8341-3のベース「WCAG 2.0」とは？」で、WCAG 2.0（Web Content Accessibility Guidelines 2.0）についての概略を紹介しました。今回は、WCAG 2.0を読み解くにあたって知っておきたいこと（具体的に、どういったドキュメント体系になっているのか、どう読んでいくと良いか）について触れてみたいと思います。
コラム記事「Webページにおける文字の拡大/縮小機能」で述べたように、当サイトでは、グローバルナビゲーションエリアに[文字拡大]、[縮小]、[標準]というリンクを設けて、文字（テキスト）のサイズを任意に設定できるようにしていました。
自分のWebサイトが、スクリーンリーダーや音声ブラウザといった支援技術でどのように読み上げられるかを確認するには、実際に支援技術を使ってみるのがもっとも確実です。ただし、サイト制作時においては、たとえば以下のようなシチュエーションで、音声読み上げ内容を視覚的に表示してみたいというニーズがあるのではないかと思います。
Webページには、共通ラベル（同じ文言）を持ったリンクが複数存在し、かつ、これらのリンクの飛び先が異なることがあると思います。主に、同じ粒度の情報が一覧表示されていて、「続きを読む」「詳しく見る」といった類のリンクがあるケースです。
Webページに実装されているリンクの中には、画像とテキスト（このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます）のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。
スキップナビゲーションとは、Webページの冒頭（ナビゲーションメニューの手前）に設置されたページ内リンクのことで、そのリンク箇所で[Enter]キーを押す（あるいはクリックする）と、ナビゲーションメニューを通り越して、本文が始まる位置にジャンプすることができる機能です。「JIS X 8341-3：2009」の改正原案で「ブロック・スキップ」と呼ばれているものです（項目番号7.2.4.1）。
Webサイト（ホームページ）を閲覧する際、リンクやフォーム要素（テキスト入力欄やチェックボックス、ラジオボタン、ドロップダウンリスト、サブミットボタンなど）を操作するのに、マウスではなくキーボードを使うケースがあります。音声読み上げの支援技術を使用している視覚障碍者はもちろんのこと、晴眼者であっても怪我や障碍によってマウスが使えないユーザーは少なくありません。アクセシビリティの面で考えると、Webページは（マウスを使わなくても）キーボードのみで操作できることが重要です。
Webサイト（ホームページ）がWeb標準に準拠して適切に制作されていれば、表示されるWebページの「見た目のデザイン」は、スタイルシートというファイルで制御することができます。これを応用して、今日の一般的なブラウザでは、ユーザースタイルシートを用いてWebページの表示を「自分好みに」カスタマイズできるようになっています。つまり、ユーザー（サイトの閲覧者）が、自分用にオリジナルのスタイルシートを作ることによって、Webページを「自分が見やすいように」変更することができるのです。これは、アクセシビリティの観点で、特にロービジョン（弱視）のユーザーにとっては非常に有益な機能と言えます。
「SEMリサーチ」というサイトで、「Googleは将来、画像上のテキストを認識できるようになるか？」という興味深い記事がありました。
Googleのスタッフが「Will Google find text in images someday ?」という質問に答える形で、画像内の文字情報のテキスト抽出の可能性について、見解を示しているのですが、「実現するためのアイデアは思い浮かぶものの、作業が大変で、近い将来での実現は難しい」ようです。
視覚障碍者がWebサイトを閲覧するときに使うスクリーンリーダー（音声読み上げソフト）で無料で使えるものとして、以前「ALTAIR（アルティア） for Windows」を紹介しましたが、オープンソースの形態で開発が進められている「NVDA（Non Visual Desktop Access）」というスクリーンリーダーがあるので、今回ご紹介したいと思います。
皆さんのWebサイト（ホームページ）において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか？高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。
Webページ上にある小さな画像（サムネイルなど）をクリックすると、画像が拡大表示される -- Ajaxを使った、そんなUI（ユーザーインターフェース）をご覧になったことがある人は多いと思います。たとえば、以下のような感じです（eコマースサイトの例）。
前回のコラム記事「JIS X8341-3 改正：パブリックコメント受け付け」で触れたように、2009年9月に新しく改正される予定のJIS X8341-3「高齢者・障害者等配慮設計指針 − 情報通信における機器・ソフトウェア・サービス − 第3部：ウェブコンテンツ」は、W3C（World Wide Web Consortium）において2008年の12月に「勧告」（Recommendation）されたWCAG 2.0（Web Content Accessibility Guidelines 2.0）という指針がベースになっています。前バージョンのWCAG 1.0が勧告されたのが1999年5月なので、WCAG 2.0は、アクセシビリティのW3C指針として、実に9年ぶりのバージョンアップということになります。
「アクセシビリティJIS」とも呼ばれている、JIS X8341-3「高齢者・障害者等配慮設計指針 − 情報通信における機器・ソフトウェア・サービス − 第3部：ウェブコンテンツ」が、2009年9月に改正される予定です。これに伴い、2009年1月22日、改正原案が公開され、公開レビュー（パブリックコメント）の受付が開始されました。
「マシンリーダブル（machine-readable）」という言葉を聞いたことがありますか？
（ある情報を）機械が「読む/解釈することができる」状態のことを指し示す言葉ですが、Webサイト（ホームページ）で情報を発信する際に、実はとても重要な要素だったりします。「Webサイトは、人間が閲覧するものなのに、なぜ？」とお思いの方も多いかもしれませんね。以下、解説したいと思います。
このたび、インプレスITが運営するソフトウェア開発者向けの情報サイト「Think IT（シンクイット）」にて、記事を執筆させていただきました。2009年1月の新年特集「Webデザインまとめ読み」のトップバッターとして、「第1回：Webアクセシビリティを高めるコツとは」というテーマで公開しております。
「障碍者が不自由なく使える、アクセシビリティに配慮したWebサイトを作りたい」と思っても、障碍を持ったユーザーが実際どのようにWebサイトを利用しているのか、実感を持てないWeb制作者やウェブマスターは多いのではないでしょうか？そんな皆さんにとって、参考例となるWebページがありますので、ご紹介したいと思います。
Fire Vox（Firefoxで音声読み上げ）で取り上げたことのある、Firefoxの音声読み上げ機能拡張「Fire Vox」ですが、従来はMicrosoft Speech APIのバージョン5（SAPI 5）に対応した日本語音声合成エンジンが必要でした。ところがFire Voxの最新バージョンでは、SAPI4に対応できるようになっています（2008年5月に公開版から、すでにSAPI4対応になっているようです）。
固有名詞や専門用語、ブランド名の音声読み上げで問題提起しましたが、現状では、変わった読み方をする固有名詞や専門用語、ブランド名などを、音声ブラウザや読み上げソフトで意図通りに読ませることが難しいです。
実はHTMLには、<ruby>という要素があるのですが（rubyとは「ルビ」つまり振り仮名のことです）、これを使うという手もあるのでは？と思い、ちょっと調べてみました。
色の認識のしかたが、いわゆる健常者のそれと異なることを、色盲、色弱、色覚異常、色覚障害などと呼びますよね。Webアクセシビリティを扱っていると、どうしてもこの呼称と向き合わなければならない場面があるのですが、いずれの呼称も、なんだか必要以上にネガティブイメージを植えつける表現のような気がして、どうもしっくり来ない感じがするのです。
皆さんは、CAPTCHA（キャプチャ）って、ご存知ですか？ブログでコメントを記入したり、何らかのサービスで認証を受ける際に見られる、文字が歪んだような不思議な画像ですね。フォームに情報を入力する際、「画像の中に見える文字を入力してくだい」といった具合に入力を求められたりします。
無料で使える音声ブラウザの例として、Firefoxのプラグインである「Fire Vox」について触れたことがありますが（ご参考：Fire Vox（Firefoxで音声読み上げ））、日本語の音声合成エンジン（SAPI5）が別途必要で、それ自体は無料で入手できない（MS Officeを買うか、SAPI 5対応の日本語音声合成エンジンが入っているソフトウェアを買うしかなさそう）ため、視覚障碍者がWebサイト（ホームページ）を閲覧するには、エクストラなコストがかかってしまうではないか？という疑問を抱いていました（健常者にとっては、ブラウザ自体無料ですし、そう考えると、エクストラなコストがかかる時点で、アクセシブルでないような気がして...）。
そんな中、（恥ずかしながら最近になって）日本語の音声合成エンジンが入っていないパソコンでも使える、無料の読み上げツールがあることを知りましたので、ご紹介したいと思います。
（2009年10月30日追記）
諸事情により、このコラム記事で扱っている文字拡大/縮小機能は、当サイトから外すことにしました。詳しくは「文字拡大/縮小機能の実装を外しました」をご参照ください。
「Webページにおける文字の拡大/縮小機能」でご紹介したように、当サイトでは、JavaScriptを使った文字拡大/縮小機能を実装しています。本来はブラウザ側で持つべき機能であって、Webページ（コンテンツ）側に実装するのはどうかと思いますが、多くのブラウザで文字拡大/縮小機能がメニューに隠れてしまっている現状（そのため多くのユーザーは文字サイズを任意に変更できることを知らない）、少しでもユーザーの助けになればという観点で考えると、現時点ではそれなりに意義があると思っています。
そんな中、同様のソリューションを提供しているWebサイト（ホームページ）も少なくありませんが、問題はその大半が、JavaScriptが無効なブラウザでも文字拡大/縮小機能が表示されっ放しで、クリックしてもリアクション（フィードバック）が無いことです。
読み上げソフトや音声ブラウザを使ってWebサイト（ホームページ）を閲覧していると、特殊な読み方をする言葉（固有名詞や専門用語、ブランド名など）が、Web制作者/運営者の意図通りではない読み方をされることがあります。たとえば（お使いのソフトによって異なりますが）：
このサイトの読者（現役でWebサイトを制作/運営されている方）の多くは、（勝手な想像ですが...）お正月などで帰省すると「親御さんのパソコンのサポート係」として重宝されるのではないでしょうか（笑）。私自身、父親のパソコンにたまったゴミデータを掃除したり、各種設定を整理したり、ウィルス対策ソフトの更新手続きをしたり、ハードディスクのデフラグをかけたり...と、毎年、ひと仕事です。
そんな、毎年の帰省のたびにつくづく思うことがあります。それは：
Webサイト（ホームページ）を閲覧するための環境（パソコン）自体が、そもそも全然、アクセシブルでない（ユニバーサルに誰でも使えるようになっていない）ではないか。
...ということです。主に「コスト」と「使い勝手」の観点から、述べてみたいと思います。
ユーザーにしてみれば、Webサイト（ホームページ）のユーザビリティやアクセシビリティは、当たり前にきちんと確保されていて欲しいものです。その一方で、私自身これまで様々なサイト構築プロジェクトに関わってきた経験で言いますと、すべてが満された理想的なユーザビリティ/アクセシビリティを（一度で）実現するというのは、なかなか容易ではないなあ、という実感があります。（サービスを短期間で立ち上げなければならない、話題になりそうな華やかな演出を優先しなければならない、社内ステークホルダーのWebリテラシーやパワーバランスに合わせて合意形成する必要がある、などなど、様々な制約/阻害要因がありますよね...。）
Webサイトを制作していると、<a href="xxx" target="_blank">などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。
昨今、ユニバーサルデザイン（UD）という言葉をよく耳に（目に）しますね。自動車、住宅、家電製品、文房具...と、ジャンルを問わず様々な製品に導入され、消費者側も、ユニバーサルデザインに配慮した製品に魅力を感じる人が増えています。（「消費者の約7割が、UDに配慮した商品や施設、サービスを利用したいと思っている」というデータもあります。詳しくは、ユニバーサルデザインフォーラムの調査実績（第4回「暮らしの中のデザインに関するアンケート」）をご参照ください。）
Webページの「横幅」について、皆さんのサイトでは、どのようにされていますでしょうか？
固定幅にしているサイトもあれば、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）にしているサイトもあるでしょう。いずれにしても、ユーザビリティの観点から、横スクロールが発生しないことが望ましいとされています。というのも、横スクロールをしなければ見れないページですと、一行読むたびに右へ/左へとスクロールしなければならず、（仮に一文字分だけスクロールしなければならない程度だとしても）ユーザーに大きなフラストレーションを与えてしまうからです。
Webページに画像（写真や挿絵など）を配置する際、「<img>要素にはalt属性を入れること」という話は、サイト運営や制作に携わる方なら一度は聞いたことがあると思います。ところが、「具体的にどうalt属性を記述したらよいのか、わからない」という方も多いのではないでしょうか。実際、私自身が某社のサイト構築ガイドライン策定に参加したときのことですが、ウェブマスターさんや制作会社の方から「もう少し具体的に、どうaltを書くべきなのか規定してくれないと困る」と言われたことがあります。
（2009年10月30日追記）
諸事情により、このコラム記事で扱っている文字拡大/縮小機能は、当サイトから外すことにしました。詳しくは「文字拡大/縮小機能の実装を外しました」をご参照ください。
アクセシビリティ対策の一環として、Webページの文字サイズを可変にしておく（ユーザーが自由に文字を拡大/縮小できる）ことは、大切なことです。特に高齢者や弱視の方は大きな文字でないと判読できない、ということを充分留意する必要があるでしょう。
一部のWebサイト（ページ）では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを（多くの場合、2つから3つに）分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です（各々、個別のHTMLファイルを読み込んで表示します）。
ブラウザ（ホームページ閲覧ソフト）のひとつであるFirefoxに「Fire Vox」という機能拡張があるのをご存知でしょうか？Firefoxで表示したWebページを、音声で読み上げてくれるツールです（ちなみにVoxとはラテン語で「声」という意味です）。
無料で入手できる機能拡張なので、本格的な読み上げソフト（JAWSなど）や音声ブラウザ（ホームページ・リーダーなど）ほど高機能ではありませんが、自分のWebサイトが音声でどう読み上げられるのかを簡易チェックするのにも適したツールと言えるでしょう。以下に、セットアップ方法および使用方法について、簡単にご紹介したいと思います。
近頃は、ブロードバンド環境が一般的になり、高解像度画像や動画など、リッチなコンテンツのWebサイト（ホームページ）でも比較的ストレス無く楽しめるようになりました。実際、Flashや画像をふんだんに使ったサイトをよく見かけますよね。
そんな流れの中、多くのWebサイトでは、テキストのライティングがおざなりになっていないでしょうか。今回は、Webサイト（ホームページ）におけるテキストのライティングの重要性について、確認したいと思います。
「良いWebサイト」実現のための一手法としてWebユーザビリティつまり、「Webサイトが使えるか？」という考え方がありますが、それ以前に「Webサイトに、まずはアクセスすることができるか？」という問題があるのでは？とお気づきの方もいらっしゃるかもしれません。
お店にたとえると、「駐車場がちゃんとある」「入り口の自動ドアが正しく開閉する」「車いすや盲導犬も一緒に入れる」といったことに相当する問題です。
