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

アクセシビリティBlog

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

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

2014年7月1日

WebAIMによるWebアクセシビリティの実践に関する調査

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

WebAIMが、Webアクセシビリティに従事する人向けの調査を行っています。この調査はWebアクセシビリティの実践に関わる人々の考えや人口動態についてのより深い洞察を得ることを目的とし、Webアクセシビリティとの関わりがほんのわずかである人も含めて幅広い層からの回答を求めています。

調査は5~10分程度で答えられる簡単な29の設問から成っています。回答の選択肢を読む限り、仕事でWeb制作やWebサイトの管理に携わっている人はもちろん、学生やボランティアも対象としているようです。

回答は、WebAIM: Survey of Web Accessibility Practitioners(英語)から送ることができます。回答の際、個人情報は送信されないものの、お使いのオペレーティングシステムやブラウザのバージョン、JavaScriptが有効かどうかが送信されます。

調査項目は英語ですが、本エントリーではその内容を意訳してご紹介します。なお、当Blogは質問項目の翻訳の正確性を保証いたしませんので、必要に応じ原文を参照してください。

質問項目

1. お住まいの地域を選んでください。

2. 年齢を選択してください。

3. 性別を選択してください。

4. あなた自身には障害があると考えていますか?

5. あなたの学歴を選択してください。

6. あなたはどのような組織で働いていますか?

7. あなたの組織のWebサイトは大いにアクセシブルですか?

8. 以下の選択肢のうち、あなたの主要な役割または肩書に最も近いのはどれですか?

9. あなたの現在の給与はいくらですか?

10. あなたは何年間Webアクセシビリティの実践に能動的に携わっていますか?

11. あなたは週に何時間Webアクセシビリティの取り組みをおこなっていますか?

12. 以下の選択肢のうち、あなたのWebアクセシビリティに関する役割/任務を最も良く言い表しているのはどれですか?

13. あなたはWebアクセシビリティにどの程度熟達していますか?

14. 以下の選択肢のうち、昨年と比べてWebコンテンツのアクセシビリティはどうなっていると感じられるか、最もあてはまるものはどれですか?

15. 以下の選択肢のうち、Webアクセシビリティの向上に対して、より大きなインパクトがあるとあなたが考えているのはどちらですか?

16. あなたがWebアクセシビリティに関して一番に取り組んでいることはどれですか?

17. プロフェッショナルによる認証を得ることができるとしたら、どの程度アクセシビリティ対応を達成できると思いますか?

18. IAAP(International Association of Accessibility Professionals)への加入を考えていますか?

19. あなたはWCAG 2.0についてどの程度知っていますか?

20. あなたはARIA(Accessible Rich Internet Applications)の仕様についてどの程度知っていますか?

21. あなたは個人的にスクリーン・リーダーを使ってWebページを確認したことがありますか?

22. あなたはスクリーン・リーダーの利用にどの程度熟達していますか?

23. 以下のうち主にどのスクリーン・リーダーをテストに使用していますか?

24. 以下の選択肢のうち、多くのサイトやアプリケーションがアクセシブルに作られていない一番の理由はどれであるとあなたは考えますか?

25. 以下の選択肢のうち、組織内でWebアクセシビリティの取り組みの成功を確保するために最も重要なものはどれですか?

26. 以下の選択肢のうち、あなたの組織においてアクセシビリティを推進するモチベーションのためには、どれが一番重要であると言うことができますか?

27. 以下の選択肢のうち、あなた自身がアクセシビリティを推進するモチベーションのためには、どれが一番重要であると言うことができますか?

28. あなたがWebサイトやアプリケーションのデザインと開発にアクセシビリティを組み入れるためには、アクセシブルではないWebサイトやアプリケーションと比べてどれくらいの努力をする必要が想定されますか?

29. WebAIMのスタッフにコメントやご意見はありますか?

2014年6月24日

Web Inspectorのアクセシビリティオブジェクト調査機能

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

WebKitのブログ、Surfin' SafariでWebKit Accessibility Node Inspectorの紹介記事が公開されています。WebKit Accessibility Node InspectorはWeb Inspectorの新しい機能の1つで、DOM要素を選択すると専用のパネルにアクセシビリティオブジェクトに関する情報が表示される、というものです。通常、アクセシビリティオブジェクトの情報はJavaScriptから得られませんが、この機能はWebKit内部(WebCore)から情報を得て表示しているとのことです。このツールを使うと、HTMLやARIAの指定をWebKitがどのように認識・処理しているか確認できるため、Webアプリケーションのデバッグに有用そうだと感じました。

記事ではWeb Inspectorを使って、リストボックスやライブリージョンを含むコンボボックスを調査する動画が公開されています。動画では、Web InspectorのAccessibilityパネルに、アクセシビリティオブジェクトの情報が表示されていることが確認できます。具体的には、アクセシビリティツリーで親や子にあたる要素の情報や、役割(リストボックスの選択肢、など)、状態(必須かどうか)、プロパティ(選択されているか、ライブリージョンであるかどうかなど)が、必要に応じて表示されることを見ることができます。

WebKit Accessibility Node InspectorはWebKit Nightly Buildsで既に利用できるとのことです。OS Xを使って開発されている方はぜひ試してみてはいかがでしょうか。

2014年6月19日

自分のYouTube動画に字幕を付ける方法

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

今回は、社内SNSで何人かの同僚に興味を持ってもらえた記事を紹介します。なお、当Blogは翻訳の正確性を保証しませんので、必要に応じて記事の原文を参照してください。

Media Access Australiaの記事「YouTube's new DIY captioning tool」では、自分が所有しているYouTubeの動画に簡単に字幕を付ける方法が紹介されています。記事の中で紹介されている方法は以下の通りです。

  1. YouTubeアカウントにログインし、動画の管理に移動して字幕を付けたいビデオの隣の『編集』をクリックします。
  2. 画面右上の『字幕』を選択し、字幕の言語を選択します。
  3. 『ファイルをアップロードする』、『文字起こしテキストのタイミングを設定する』、『新しい字幕を作成する』の中から必要な処理を選択します。
  4. メディアプレーヤーの右側に『ここに字幕を入力し、Enter キーを押してください』というボックスが出てきます。ビデオを再生し、必要に応じてビデオを停止して字幕を入力し、『+』を押して字幕を追加します。作成した字幕は下に表示され、ボックスをクリックすることで編集できます。
  5. 作成したキャプションはビデオの再生中に表示され、メディアプレーヤーの下には小さなボックスが表示されます。そのボックスのどれかにマウスオーバーすると、左右に『ハンドル』が表示され、それをクリックしてドラッグすることで字幕の開始位置や終了位置を調整することができます。
  6. 字幕の作成が終了したら、『公開』ボタンを押すことで字幕付きのビデオを公開できます。その後にビデオを閲覧した人には字幕も同時に表示されます。

なお、YouTubeでは字幕作成方法を紹介するビデオ「Creating subtitles and closed captions」を公開しているとのこと。興味のある方は是非こちらもご覧ください。

2014年5月14日

Webアクセシビリティ入門セミナーを開催します

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

近年5月に開催されているGlobal Accessibility Awareness Day(世界アクセシビリティ啓発デイ)の影響もあってか、今月は国内外で様々なアクセシビリティ関連のイベントが開催されています。

4月25日のコラム、Webアクセシビリティ入門セミナーへのお誘いでシニアプロデューサー(UX・Webアクセシビリティ担当)の村林が紹介しておりますが、当社でも来る5月23日にWebアクセシビリティ入門セミナーを開催いたします。

これは文字通り、これからWebアクセシビリティ対応に取り組もうと考えておられるWeb担当者の方々を対象としたセミナーで、Webアクセシビリティの基本からその最新動向までを2時間に凝縮した内容となっております。5月のお忙しい時期かとは存じますが、多くの方々のご参加をお待ちいたしております。

セミナー名称
日時
(受付開始より)
講師
  • 株式会社ミツエーリンクス 第二本部 第一部(アクセシビリティ) アクセシビリティ・スペシャリスト 中村 精親
  • 株式会社ミツエーリンクス 第二本部 第一部(アクセシビリティ) アクセシビリティ・エンジニア 辻 勝利
場所
株式会社ミツエーリンクス 本社 セミナールーム 会場までの地図
対象となるお客様
  • 新しくWebサイトの担当となられた方
  • Webサイトのアクセシビリティ改善を検討されている方
  • 近年のWebアクセシビリティ事情について学びたい方
定員
60名様

2014年4月22日

【再掲】「CSUN 2014参加報告セミナー」開催のご案内

フロントエンド・エンジニア 木達

今年のCSUN参加報告セミナーの開催が、今週末に迫って参りました。当Blogでは2月にご紹介してはいますが、まだ残席がわずかながらございますので、改めてご案内させていただきます。Webアクセシビリティにご興味、ご関心のある方、是非ご参加下さい。

セミナー名称
日時
(受付開始より)
講師
  • 株式会社ミツエーリンクス 第二本部 第一部(アクセシビリティ) アクセシビリティ・エンジニア 黒澤 剛志
  • 株式会社ミツエーリンクス 取締役 兼 第二本部長 木達 一仁
場所
株式会社ミツエーリンクス 本社 セミナールーム 会場までの地図
対象となるお客様
  • Webアクセシビリティ関連の最新情報に興味のある方
  • モバイルやマルチデバイス対応におけるアクセシビリティに興味のある方
  • インタラクティブなWebページのアクセシビリティに興味のある方
定員
60名様

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を使っている皆さんは試してみてはいかがでしょうか。