はてなブックマーク

PayPal EngineeringブログでBootstrapフレームワークをよりアクセシブルにするBootstrap Accessibility Pluginの紹介記事が公開されています。Bootstrap Accessibility PluginはBootstrap 3向けのプラグインで、いくつかのウィジットに対するキーボード操作の強化やWAI-ARIAのサポートなどが追加されます（他にもalertウィジットのコントラスト比が向上します）。 例えば、tabウィジット（タブ）はBootstrap Accessibility Pluginによって自動的にWAI-ARIAの属性が追加され、タブとしての意味をもつようになります。それにあわせ、タブを切り替える操作も変更されています。もともとのBootstrapではタブのつまみ部分にフォーカスをあてている状態でTabキーを押して隣のつまみに移動し

Webアクセシビリティに関する情報発信を行っているWeb Axeのエントリー、About Carousels and ARIA Tabsでは、ページ内でカルーセルを使用する際にアクセシビリティの観点から注意すべき事柄が紹介されています。 記事を執筆したDennis氏は、カルーセルはそれほどひどいものではないとしながらも、彼が目にしたものにはアクセシビリティやユーザビリティを考慮せずに作成された物が多く、加えてモバイルデバイスで利用する際にも問題があるとしています。そのうえで、どうしてもカルーセルを使用しなければならない場合には、以下のようなことに注意したほうが良いと述べています。 カルーセルのアニメーションは利用者が開始できるようにする 利用者がカルーセルを一時停止できるようにする コントロールにはテキストによるラベルがあることを保証する 表示中のパネルとそのコントロールが、視覚的にも機械

WebデザイナーやWeb開発者のためのオンラインマガジンの.net magazineで、『When RWD goes bad』という記事が掲載されていました。著者のAlastair Campbell氏は、レスポンシブWebデザインがアクセシビリティにとって基本的には好ましいインパクトをもたらすとしながら、同時に注意すべき点もあることを指摘しています。 例に挙げられているのは、比較的小さなスクリーンにおいて、（より大きなスクリーンでは表示させていた）ナビゲーションバーを隠してしまい、ボタン操作によって表示・非表示を切り替えるようにするテクニック。レスポンシブWebデザインを採用したサイトで、割とよく目にするデザインパターンです。それが モバイルデバイス上でVoiceOverのようなスクリーンリーダーを使ってナビゲーションを操作する必要のある人 デスクトップであれモバイルであれ、スクリーンの表

私が所属する当社R&D本部では、毎週開催される会議の中でライトニングトークを行っています。最近のテーマは「情報収集」で、同僚たちがどのように情報を集め、仕事に生かしているのかを知る良い機会でした。 本エントリーでは、私がそのライトニングトークで話した内容を中心に、1スクリーン・リーダー利用者としての私の情報収集の方法について書いてみたいと思います。 Twitterが主な情報源 Twitterは私にとって、もっとも利用頻度の高い情報収集の手段です。オフィスや自宅では視覚障害者向けTwitterクライアントのThe Qubeを使用していますし、移動中はTweetListというアプリケーションを使って情報を集めています。注目している人たちの発言を読むことはもちろん、特に「アクセシビリティ」関連の情報収集を行うため、#a11yというハッシュタグを使って発信される情報を集めています。 出先で気になっ

少し前の話になりますが、5月9日はGlobal Accessibility Awareness Day (GAAD) (世界規模のアクセシビリティ啓発デイ)でした。それに合わせてユタ州立大学のCenter for Persons with Disabilities で活動するWebAIMが10 Easy Accessibility Tips Anyone Can Useという記事を公開しました。 記事の中ではWebアクセシビリティを高めるためにコンテンツ提供者が容易に取り組める10の項目が紹介されておりました。わかりやすそうな内容でしたので、本日はその概要をお伝えします。 1. ロゴに代替テキストを設定しよう 代替テキストは、画像が表示できない環境でWebサイトにアクセスしてくる利用者に、ページ内で画像で表現されている情報を説明するために用いられます。まずは、サイトのロゴに代替テキストを付

前回の投稿ではFirefoxのアドオン、DOM Inspectorを紹介しました。今回はChromeの拡張機能、Accessibility Developer Toolsを紹介します。 Accessibility Developer ToolsはChromeのデベロッパーツールにアクセシビリティの調査機能を追加します。追加される機能は大きく2つあります。1つは特定の要素を調査する機能で、もう1つはページ内にあるアクセシビリティの問題を見つける機能（監査）です。今回は特定の要素を調査する機能を紹介しますが、監査の基準も公開されていますので監査機能に興味があるかたはご覧ください。 Accessibility Developer Toolsの準備 まずChromeにAccessibility Developer Toolsをインストールします。なお、ローカルファイルの調査も行う場合には、拡張機能

前回の投稿から少し間が空いてしまいましたが、私は「CSUN2013 参加報告セミナーを開催します」の中で次のように書きました。 マークアップが変化しなくてもdisplayプロパティ値が変化することで、要素が支援技術からどのように見えるのか（表なのか見出しなのか、など）が変化する これを読んで次のような疑問を持たれた方もいたのではないかと思います。 「ある要素の支援技術からの見え方（アクセシビリティオブジェクト）はどう確認すれば良いのか？」 確認方法にはいくつかありますが、この記事では手軽に試すことができる方法としてFirefoxのアドオン、DOM Inspectorを使う方法を紹介します。 DOM Inspectorの準備 まずFirefoxにDOM Inspectorをインストールします。Firefoxの再起動後に、Firefoxボタンメニューの「Web 開発」から「DOM Inspec

去る1月22日、W3CのWAI（Web Accessibility Initiative）はIndie UI: Events 1.0の初めてとなる草案を公開しました。これはユーザーの意図をデバイスやプラットフォームに依存せずにスクリプトへ伝えるための仕様です。 「ユーザーの意図」を認識する必要性やメリットは草案で挙げられている例を見るのがわかりやすいでしょう（日本語訳は筆者による）。 例えば、最後のアクションを「元に戻す」というユーザーの意図をWebアプリケーション作者が横取りしたい場合、次の全てのイベントを「監視」する必要があります。 WindowsとLinuxではControl+Z Mac OS XではCOMMAND+Z いくつかのモバイル端末ではシェイク 直前のアクションを「元に戻す」という単一の標準化された要求を監視するほうがよりシンプルでしょう。 今回公開された草案には、操作を「

Androidはスマートフォンやタブレット端末のOSとして急速に普及していますがAndroidのアクセシビリティ機能はまだあまり知られていないようです。このAndroidのアクセシビリティ機能を積極的に活用しているブラウザの一つがAndroid版Firefoxです。この記事は、Android版Firefoxのアクセシビリティ機能を紹介した記事Accessibility features in Firefox on Androidを翻訳したものです。 2012年10月11日 Eitan Issacson （この記事は、Mozilla Hacksに投稿された記事、Accessibility features in Firefox on Androidを翻訳したものです。当Blogは翻訳の正確性を保証しませんので、必要に応じて原文を参照してください。） （また、原文はEitan Issacson

9月19日（日本時間では9月20日の早朝）、iデバイス向けの新しいOS、iOS 6.0が公開されました。すでに国内外のBlog記事などでも紹介されておりますが、VoiceOverをはじめとしたアクセシビリティ機能にもさまざまな改良がおこなわれています。今回はその中から、日本語VoiceOverで可能になった漢字の説明読みが、VoiceOver使用者のWebアクセスにどのように影響するかをご紹介します。 日本語では、ひらがなやカタカナや漢字などを使って文字を表現します。例えば「雨」と「飴」は同音異義語ですが、違うものだということは漢字を確認できる環境であればすぐにわかります。デスクトップ環境向けのスクリーン・リーダーや、読み上げ機能付きの携帯電話にもそれぞれの漢字を「あめの う」とか「たべものの あめ」のように説明する機能を持ったものがあります。このエントリーでは、これを漢字の説明読みと呼ぶ

2007年の5月に、私は基本的な要素が音声読み上げ環境でどのように通知されるかの検証レポートを書きました。同じWebコンテンツの読み上げであっても、使用している環境によって通知される内容が違うこと、一部の要素はJAWS等のスクリーン・リーダーでしか通知されないことをご紹介しました。 およそ5年が経過した今日、それぞれの音声読み上げ環境の通知方法にはどのような変化があるでしょうか？このエントリーでは、基本的な要素が、当社でテスト可能なデスクトップ向けの読み上げ環境とiPhoneのVoiceOverでどのように通知されるかを紹介します。なお、検証に用いたテストファイルや個別の検証結果については、以下の情報を参照してください。 検証時に用いたテストファイル 検証結果詳細 なお、テストファイルや検証結果はクリエイティブ・コモンズ・ライセンスの下で提供しておりますので、ライセンスの範囲内であれば自由

JIS X 8341-3:2010 対応発注ガイドライン 2012年8月7日版が、ウェブアクセシビリティ基盤委員会のWebサイトで公開されました。JIS X 8341-3:2010 対応発注ガイドラインは、同委員会に三つある作業部会（ワーキンググループ）のうち、JIS X 8341-3:2010の理解と普及に必要な活動を行う作業部会1（WG1）が中心となって策定したもので、当社ミツエーリンクスも策定に参加してきました。その目的については、ガイドライン冒頭で以下のように記されています。 本ガイドラインは、ウェブコンテンツ（ウェブアプリケーションを含む）をJIS X 8341-3:2010に対応させることを要件として発注する際に、調達仕様書、提案依頼書（RFP）などの書面に明記すべき事項を示すためのものである。 昨今、民間、公的機関を問わず、JIS X 8341-3:2010への対応を促進する

Webがアクセシブルになったり、生活の様々なシーンで利用者をサポートするアプリが登場したりと、視覚障害者の生活が昔に比べて便利になっていることは確かです。しかし、一口に「便利になった」と言っても、どのような作業がどのように便利になったかはなかなか伝わりません。この記事では、筆者であるPat Pound氏の今の生活と、アクセシブルなWebやアプリを使用していなかった頃の生活を比較して、それぞれのタスクがどのように楽になったかが紹介されています。 アクセシブルなWebとアプリで楽になった私の生活！ Pat Pound 著 （この記事は、Deque Systems社のBlogに投稿された記事、My Life Simplified via Accessible Web and Apps!を翻訳したものです。当Blogは翻訳の正確性を保証しませんので、必要に応じて原文を参照してください。） ここでご

ウェブアクセシビリティ基盤委員会のWebサイトで、新しいアクセシビリティ・サポーテッド（AS）情報とWCAG 2.0 実装方法集が公開されました。 AS情報とは、同委員会の実装ワーキンググループ（WG2）が作成しているもので、Webコンテンツの実装方法が達成基準を満たすことのできるものかどうかを判断するための参考資料として提供しているものです。今回公開されたものは、2012年5月版です。 また上記に合わせ、AS情報を作成する際に必要となるテストファイルについても、2012年5月版が公開されています。これまで、閲覧には圧縮されたテストファイル一式をダウンロードし解凍する必要がありましたが、今回の版からはサイト上で閲覧することもできるようになっています。 WCAG 2.0 実装方法集については、W3Cが今年1月3日付けで公開した「Techniques for WCAG 2.0」の日本語訳になり

新年早々、W3C WAIから、WCAG 2.0の関連文書のアップデート版と、Media Accessibility User Requirementsという新しい文書の草案が公開されました。 まず、WCAG 2.0関連文書アップデートですが、Techniques for WCAG 2.0にFlashの実装方法に続いて、SilverlightとPDFの実装方法が追加された点が、一番のポイントです。 既にEditors' Draftには追加されていた内容ではありますが、今回正式なWorking Group Noteとして公開されたことでより利用しやすくなりました。 これに伴い、実装方法を参照しているUnderstanding WCAG 2.0も、SilverlightとPDF関連の追加を中心にあわせて更新されています。 一方、Media Accessibility User Requireme

来る2012年1月20日に、当社セミナールームでアクセシビリティキャンプ東京 キックオフを行います。これは、参加者が内容を決めるBarCampのような形式で米国、カナダ、英国等で催されているAccessibility Campを今後東京で実施すべく、そのキックオフイベントとして開催するものです。 Webをはじめとしたアクセシビリティの認知度が向上してきた今日、アクセシビリティの専門家が知識や技術を啓蒙するセミナーは数多く開催されるようになってきました。しかし、アクセシビリティに関心のある方々が集まり、それぞれの意見を持ち寄って双方向のコミュニケーションを行うようなイベントがなかなかないのが現状ではないでしょうか？ アクセシビリティキャンプはセミナー形式のイベントではなく、参加者同士、さまざまな立場の人の交流を中心に、日本のアクセシビリティを盛り上げていくために参加者が作っていくイベントです

日本時間10月13日の早朝、Appleのiデバイス向けの新しいOS、iOS 5.0が発表されました。さまざまな機能強化が行われていますが、VoiceOverも例外ではありません。 そこで本エントリーでは、iOS 5.0上のVoiceOverの変更点の中から、筆者が気になったものを3点選んで紹介いたします。 読み上げ音声の音質の変更 iOS 5.0にアップデートされた方はもうお気づきになっているかもしれませんが、iOS 5.0のVoiceOverでは、読み上げ音声の音質が変更されました。この変更をどのように感じられるかは利用される方によって違うかと思いますが、筆者は日本語音声の音質は向上しているように感じました。 なお、iOS 4系のころと同じような音質の音声を使用したい場合は、以下のような手順で変更することができます。 「ホーム画面」から、「設定」を開きます。 「一般設定」、「アクセシビリ

The Paciello Group Blogの3月17日のエントリーにて「Web Accessibility Toolbar」のアップデート版が公開されています。 「Web Accessibility Toolbar」はWebサイトの文書構造、色、HTML、CSS、リンク、画像など、Webページのアクセシビリティを検証するのに役立つ機能が集められたInternet Explorer向けのツールバーです。 今回のアップデートでは、既に古くなってしまった機能や更新が必要な機能が削除された他、HTML5やARIAの検証に役立つ新機能などが追加されています。 Web Accessibility Toolbar 2011 の変更点 Jim Thatcher氏によって開発された画像・スキップリンク・テーブルの検証機能を追加 Webコンテンツの要素を検査するaViewerアプリケーションをバンドル リ

Yahoo Accessibility Labの記事、Yahoo! Mail Pushes the Online Envelope with a Faster, Safer, Easier and Constantly Connected Communications Experienceによりますと、現在ベータ版として公開されているYahoo! Mailでは、さまざまな機能追加の中に、アクセシビリティ対応が含まれているとのことです。私はときどきWebメールを使用しているのですが、Webメールは、メールクライアントでメールを読むよりも使用しづらいと考えておりましたので、早速この新しいYahoo! Mailを試してみることにしました。 事前準備 新しいYahoo! Mailのアクセシビリティ機能を使用するには事前準備が必要です。まず、ヘルプページで紹介されている利用可能なスクリーン・リーダー

既に半月近くも前のことになりますが、当社Web標準Blogなどでも既報の通り、HTML5がLast Callとなっています。HTML5にまつわるアクセシビリティの話題にはさまざまなものがあるのですが、本エントリーではその中からいくつかを簡単にご紹介します。 HTML5: Techniques for providing useful text alternatives 前述のWeb標準Blogのエントリーでは「HTML5仕様と関連仕様のいくつかがLast Call」になった旨が述べられていますが、その関連仕様のひとつであるこの文書、日本語に訳すと「有用な代替テキストを提供するためのHTML5におけるテクニック」といったところでしょうか、こちらもLast Callになっています。 タイトルの通り、HTML5における代替テキストの付け方についての文書なのですが、これからHTML5を使っていく方

当Blogでは、不定期にiPhone 3GS使用レポートとして、iOS上の読み上げ機能、VoiceOverを用いてiPhone 3GSを使用した感想などをお伝えしてきました。本エントリーでは、iPhoneのカメラを用いて視覚障害者の生活を便利にしてくれる可能性のあるアプリケーションをご紹介します。 なお、私のiPhone 3GSが壊れてしまい、現在私はiPhone 4を使用していることから、タイトルをiPhone使用レポートに変更いたしました。 米ドル紙幣を素早く識別できるLookTel Money Reader ご存じの方もいらっしゃるかもしれませんが、アメリカで使用されているドル紙幣は、長さや幅がすべて同じです。したがって、特に全盲の視覚障害者は、どれが1ドル紙幣なのか、100ドル紙幣なのかといった情報を簡単に知ることができません。私が留学していたころは、信頼できる周囲の人たちの力を借

アクセシビリティPodcast 第40回後編をお届けいたします。2007年9月からお届けしてまいりました「辻ちゃん・ウエちゃんのアクセシビリティPodcast」もついに最終回となりました。これまでお聞きいただいたリスナーの皆様、本当にありがとうございました。 最終回となる今回は前編に引き続き「多様化する閲覧環境とアクセシビリティ」をテーマに今後どのような視点でアクセシビリティ対応を進めて行けばよいのか、辻ちゃん・ウエちゃん・キダちゃん・キー坊の4人が語り合います。 概要 第40回後編では以下の内容についてお送りいたします。 多様化するWebの閲覧環境と今後のWebアクセシビリティ エンディング なお、話題にあがっているサイトなどのリンク先につきましては、「全文を読む」のリンクよりテキスト化された内容でご確認ください。 聴取方法のご案内 ブラウザ上で再生される方は、下記のFlash Play

先ほどの公示についてのエントリー時点ではまだ公開されていなかったのですが、日本工業標準調査会（Japanese Industrial Standards Committee：JISC）から改正版JISの閲覧ができるようになりましたので、続報として閲覧方法をご紹介いたします。 「JIS検索の利用について」で説明されていますように、JIS規格票へ直接リンクすることはできませんので、以下の手順をご参照ください。 日本工業標準調査会：データベース検索-JIS検索のページにて、「JIS規格番号からJISを検索」という欄に「X8341-3」と入力して「一覧表示」のボタンを押します。 「JISリスト」という検索結果ページに進みますので、「JISX8341-3」というリンクから「JIS規格詳細画面」に進みます。 「規格の閲覧」という文言のあとにあるリンクから閲覧が可能です。 注：残念なことではありますが、

当Blogや当社コラムなどでも何度か取り上げてまいりましたが、Webアクセシビリティの日本工業規格、JIS X 8341-3の改正版が本日官報公示されました。 官報目次 平成22年８月20日付（本紙　第5380号）の8～9ページ「官庁報告」に掲載されています。（注：「改正された日本工業規格」は8ページから始まっていますが、JIS X 8341-3は9ページ冒頭に掲載されています。） なお、規格票は日本規格協会のWebサイト内のJSA Web Storeより購入することができます。 JSA Web Store - JIS X 8341-3:2010 高齢者・障害者等配慮設計指針―情報通信における機器，ソフトウェア及びサービス―第３部：ウェブコンテンツ 今回の公示を受けまして、今後はより一層、アクセシビリティへの対応が求められる機会も多くなるかと思われます。先日ご紹介したセミナーのように、関連

改正間近とされていたWebアクセシビリティの国内規格、JIS X 8341-3が、8月20日に改正、公示されます。 そこで今回の改正を受けて、同規格の策定者によるセミナーが開催されることになりました。 本セミナーでは、改正されるJISに関連する資料の詳細や、その資料を用いた実装方法の解説、また今回の改正版JISには「試験」をおこなうことに関しても定義されていますので、その点についても解説が行われます。 セミナー名称 規格の策定者が解説する JIS X 8341-3:2010 開催日時 2010年9月2日（木）10時から17時半（受付開始 9時半） 会場 東京女子大学（教室は未定） 定員 100名（先着順） その他詳細およびお申し込みにつきましては、セミナー開催案内をご確認ください。