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

アクセシビリティBlog

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

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

ウェブアクセシビリティ基盤委員会がアクセシビリティ・サポーテッド(AS)情報作成への協力を呼びかけ

取締役 木達

私自身を含め、当社から複数のスタッフが活動に参加しているウェブアクセシビリティ基盤委員会(WAICが、アクセシビリティ・サポーテッド(AS)情報(以下「AS情報」)作成への協力を呼びかけています(AS情報を作成するためのテストへご協力のお願い参照)。

たとえ仕様に則り、一定のアクセシビリティが確保できる想定でWebコンテンツを実装したとしても、その実装方法にユーザーエージェント(以下「UA」、具体的にはブラウザや支援技術)が対応していなければ、ユーザーにとってアクセシブルとは言えませんし、達成基準を満たしたことにもなりません。

そのような「絵に描いた餅」に似た状況を避けるうえで、採用する実装方法にUAが対応しているかどうか、すなわちアクセシビリティ・サポーテッドかどうかを把握することは、コンテンツを実装する立場にとって特に重要です。WAICでは、そうした情報を「AS情報」として取りまとめ、過去5回に渡り作成・公開をしてきました。

Web技術ごとにサポート状況を知ることのできるWebサイトとしてCan I use... Support tables for HTML5, CSS3, etcが有名ですが、AS情報は同サイトと似た側面を持ちます。実装方法ごとにアクセシビリティ・サポーテッドの度合いを知ることのできる資料だからです。

通算で6回目となる今回は、AS情報を作成する際に必要となるテストファイルの見直しの進捗を踏まえての取り組みになります。テストをWAIC内で行うのみならず、協力いただける方からテスト結果を募る運びとなりましたが、同じUAのバージョン違いを含め、より多くのUAによるテストが行われることが期待されます。

AS情報は先述の通り、Webコンテンツを実装する立場の方にとって特に有用と考えますが、同時にUAを利用する立場、つまりWebコンテンツのユーザーにとっても有用ではないかと思います。より多くの実装方法に対応したUAは、それだけアクセシビリティを確保しやすいUAと言えますから、利用するブラウザなり支援技術を選択する際の参考となるでしょう。

裏を返せばUAを開発する立場、ブラウザベンダーや支援技術ベンダーの方にとっても、AS情報は有意義であると思います。限度はあるにせよ、アクセシビリティ観点において競合の製品と比較したときの優劣を、客観的に把握することができます。またテストそのものに参加していただくことで、テストファイルの改善点をUA開発者の視点から発見できるかもしれません。

そういうわけで是非、AS情報作成にご協力をいただければと思います。テスト実施期間は今月末、1月31日までとなっています。詳細につきましては、AS情報を作成するためのテストへご協力のお願いをご覧ください。

axeのブラウザー拡張機能を日本語で利用できるようになりました

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

Deque Systems社が開発しているaxeのブラウザー拡張機能が、バージョン3.7.0から、日本語で利用可能になりました。

axeとは

axeは、オープンソースのアクセシビリティ検証ライブラリーです。axeのエンジンはaxe-coreという名称で、GitHubにて同社が開発しています。

axe-coreはWeb Content Accessibility Guidelines(WCAG)のバージョン2.xをベースにしています。2018年8月には、WCAG 2.1の一部基準も検証対象に追加されました。

また、GoogleやMicrosoftもアクセシビリティチェックを実施するためのエンジンとして採用するなど、axeはさまざまな場所で利用されています。開発者の方の中には、これらのツールを利用したことがある方も多いのではないでしょうか。

各社が開発しているツールとaxeの採用については、以下の記事をご参照ください。

※ Sonarは現在webhintに改名されています。

ブラウザー拡張機能について

ChromeおよびFirefoxで提供されている拡張機能は、開発者ツール内で用いることができます。

インストールは以下より行えます。

日本語で使用する方法

いずれの拡張機能も、初期の言語設定は「Use Browser Default」です。 ブラウザーのデフォルト言語が日本語の場合、拡張機能が使用する言語も日本語になります。

以下は明示的に日本語を設定する方法です。

Chrome版

「拡張機能」画面から、「axe」の「詳細」ボタンを押します。 「拡張機能のオプション」を押すと表示されるポップアップの「言語設定」(英語ではLocalization Settings)以下の「設定言語」を「日本語」に変更し、「保存」します。

言語設定の適用には開発者ツールを一度閉じて再起動する必要がありますので、ご注意ください。

Firefox版

「拡張機能の管理」画面から、「axe」の「設定」ボタンを押します。 画面下部に「言語設定」という箇所がありますので、「設定言語」(英語ではLocalization Settings)を「日本語」に変更し、「保存」します。

こちらもChrome同様、設定を適用するには開発者ツールを再起動する必要があります。

最後に

拡張機能のインターフェースや、axe-coreの翻訳に携わってきた一員として、とうとう日本語版を提供できるようになったことをとても喜ばしく思います。これにより、より多くの方にアクセシビリティの確保に積極的に取り組んでいただけることを願っています。

これからもより多くの方に使っていただけるよう、日本語版の改善を続けていきます。検証結果のメッセージはGitHubで翻訳していますので、ぜひ利用者のみなさまにもご協力いただけますと幸いです。

2019年のWebアクセシビリティ

取締役 木達

技術評論社様よりオファーをいただき、当社アクセシビリティ・エンジニアの黒澤が、新春特別企画に「2019年のWebアクセシビリティ」という記事を寄稿しました。まだお読みでない方は、ご一読いただければ幸いです。ちなみに同種の寄稿としては2014年以来、6年連続の6度目となります。ご参考までに、過去の記事を最近のものから順に列挙します:

寄稿に際しては、広報部門による内容確認や校正......の前に、都度アクセシビリティ部内でのレビュー期間を設け、皆でより良い記事にしようという取り組みをしています。こと「2019年のWebアクセシビリティ」に向けては、私からお願いをして、標準化の動向やその実装状況のみならず、周辺動向にも触れていただきました。それが記事の末尾にある「リスクかチャンスか」というセクションです。その出だしから少し引用します:

さて,近年,米国ではアクセシブルでないWebサイトに対する訴訟が増加しています。数字の取り方にもよりますが,2018年上半期の訴訟件数(1053)だけで2017年の件数(814)を越えています。アクセシビリティに取り組まなければ,個人が尊厳をもって生きる権利を何らかの意味で否定していると捉えられかねないと意識すべきでしょう。

つい最近でも、歌手のビヨンセさんのWebサイトがアクセシブルでないことを理由に全盲のファンから訴訟を起こされていましたが(Beyonce's Parkwood Entertainment Sued | Hollywood Reporter参照)、当社で同様の訴訟への対応をお手伝いさせていただくケースが昨年発生したことからも、手段の良し悪しはさておき、Webアクセシビリティを訴訟によって高めようとする動きの高まりを感じます。たとえ日本の企業であってもビジネスを、Webサイトをグローバルに展開されているならば、その高まりから逃れることは困難でありましょう。

最後に黒澤らしい、件の記事の末尾にある言葉を引用したいと思います:

やって当たり前のアクセシビリティの確保,リスクと捉えるか更なるイノベーションのチャンスと捉えるか。みなさまの2019年はどちらでしょうか。

「Backlog World 2019」でアクセシビリティPodcastの迷コンビが復活!

取締役 木達

2019年1月26日にJapan Backlog User Group(JBUG)が開催するイベント「Backlog World 2019」において、当Blogの執筆者の一人でもあるアクセシビリティ・エンジニアの辻が、株式会社インフォアクシアの植木氏と共同で登壇します。

イベント
Backlog World 2019
日時
2019年1月26日(土)11:00~16:50(10:00 開場)
会場
秋葉原UDX 4F ギャラリーネクスト
(東京都千代田区外神田4-14-1)
参加料
1,000円(早割Ticket)
1,500円(通常Ticket)
2,000円(当日Ticket)

辻と植木氏の担当するセッション『辻ちゃん・ウエちゃんのアクセシビリティPodcast「Backlogのアクセシビリティを斬る!」』の概要は、以下の通りです。

Backlogが、スクリーンリーダー向けアクセシビリティの改善に着手したことをご存知ですか? このセッションでは、Backlogのアクセシビリティがどのように改善されたのか、今後どのような課題があるのかを、スクリーン・リーダーによる操作デモを交えながら語り尽くします。8年の時を経て奇跡の復活を果たし、ますますパワーアップした迷コンビ「辻ちゃん・ウエちゃん」の軽妙なトークをお楽しみください。

8年の時を経て奇跡の復活とありますが、これは当社が以前、まだaccessibility.mitsue.co.jpというドメインでアクセシビリティBlogを運用していた当時のいちコーナー、アクセシビリティPodcastを指しています。同Podcastは2007年9月から2011年5月にかけて全40回を配信し、現在でも音声を公開しているものです。かつてアクセシビリティPodcastを聞いてくださっていた方も、そうでない方も、会場で迷コンビの復活を是非お楽しみいただければと思います。

イベントへのお申し込みおよび詳細についてはBacklog World 2019のサイトをご覧ください。

「これから取り組むWebアクセシビリティ 2019 大阪」に当社スタッフが登壇

取締役 木達

来たる2019年1月18日、情報通信アクセス協議会 ウェブアクセシビリティ基盤委員会(WAIC)が大阪で開催するセミナー「これから取り組むWebアクセシビリティ 2019 大阪」に、当社 第一事業部 アクセシビリティ部 マネージャーの中村精親が登壇します。

日時
2019年1月18日(金)14:00~16:10(13:30 受付開始)
会場
大阪産業創造館 5F 研修室A・B
(大阪府大阪市中央区本町1丁目4−5)
対象
官公庁、自治体、独立行政法人等の職員の皆様、一般企業のWeb担当者の皆様、Web制作者の皆様
特に、これからWebアクセシビリティに取り組まれようとする方
参加料
無料
主催
情報通信アクセス協議会 ウェブアクセシビリティ基盤委員会(WAIC)

中村が担当するセッション「こうすればできる!ウェブアクセシビリティ試験実施のポイント」の概要は、以下の通りです。

2016年3月22日付で「JIS X 8341-3:2016」が公示されました。これを踏まえ、アクセシビリティ方針や試験結果を公開している企業、団体が少しずつ増えてきました。しかしながら、中には残念なことにその内容が適切とはいえないものも増えてきています。そこで、本セッションでは、適切な方針や試験結果の公開方法について解説します。

関西方面にお住まいで、JIS X 8341-3の活用、ないしWebアクセシビリティの向上にこれから取り組もうとお考えの方には、ぜひ参加を検討していただきたいセミナーです。お申し込みおよび詳細についてはウェブアクセシビリティ基盤委員会(WAIC)のサイトをご覧ください。

スクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法

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

8月の記事「いちスクリーン・リーダーユーザーのFirefox最新版の利用環境について」では、普段スクリーン・リーダーを使用している私がようやくFirefoxの最新版を使い始めた話を紹介しました。

今回ご紹介するスクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法は、実は私が旧バージョンのFirefoxで操作方法をなかなか覚えられなくて困っていた作業です。

全盲の私がなぜスクリーンショットを撮る必要があるのか不思議に感じられる方もいらっしゃるかもしれませんが、お客様とWebページについてのやりとりをする際、このスクリーンショットが思いのほか役に立つことがあります。

例えば、お客様からお知らせいただいたページが私の手元で開けないなどのエラーが発生した場合、エラーの詳細を含んだスクリーンショットを見ていただいた方が、ページに表示されているテキストだけをメールに書くよりも状況を伝えやすいことがあります。

現在私が使用しているスクリーン・リーダーNVDA 2018.3.2とFirefox 62.0.3では、以下のような手順でページのスクリーンショットを取得してダウンロードすることができます。

  1. スクリーンショットを撮影したいページを開きます。今回は例として、当社のコラム「「アクセシビリティガイドライン(WCAG/JIS X 8341-3)の活用 解説セミナー」のご案内」のスクリーンショットを撮ることにします。
  2. Ctrl+Lを押してロケーションバーに移動し、一度Tabキーを押します。『「アクセシビリティガイドライン(WCAG/JIS X 8341-3)の活用 解説セミナー」のご案内 | コラム | ミツエーリンクス』のように読み上げられるかと思います。
  3. 『アプリケーションキー』を押してメニューを表示し、『スクリーンショットを撮る』というメニュー項目を選択します。
  4. 『M』キーを押して次のフレームに移動します。『ページをドラッグまたはクリックして範囲を選択してください。ESC キーを押すとキャンセルできます。』というテキストが読み上げられ、以下の選択肢のボタンが表示されています。
    • キャンセル
    • 自分のショット
    • 表示範囲を保存
    • ページ全体を保存
  5. 『ページ全体を保存」を押すと、さらに4つの選択肢が利用できるようになります。
    • キャンセル
    • コピー
    • ダウンロード
    • 保存
  6. 『ダウンロード』を押すと、Firefoxのダウンロードフォルダ(CTRL+Jで表示できます)にページのスクリーンショットが保存されます。
上記手順で撮影したページのスクリーンショット

前述の通り、旧バージョンのFirefoxでもスクリーン・リーダーを使用してページのスクリーンショットを保存することはできましたが、新しいFirefoxでは操作方法がよりわかりやすくなったことでこの機能を利用しやすくなったように思います。

今回はNVDAを使用した場合の操作方法をご紹介しましたが、他のスクリーン・リーダーを使用されている方や主にキーボードを使用されている方にも同じような手順がご利用いただけると思います。
お試しいただけますと幸いです。

NVDAのアドオンを最新状態に保てるAdd-on Updater

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

本年7月の記事「NVDAをより快適に使用するためのアドオン」では、スクリーン・リーダーNVDAをより快適に活用するためのアドオンをいくつかご紹介しました。

これらの便利なアドオンですが、快適に利用し続けるためには最新版に更新しなければならないことをご存知でしょうか?

今回ご紹介するAdd-on Updaterは、お使いのNVDAのアドオンを最新の状態に更新してくれるアドオンです。

NVDAにこのアドオンをインストールして再起動した後、「NVDAメニュー」の「ツール」内の「Check for add-on updates」を実行すると、インストールされているアドオンが最新版かどうかを確認して更新することができます。

また、NVDA起動時にもアドオンが最新版かどうかを確認し、更新できるアドオンがあればそれを表示することができます。

このアドオンは将来的にはNVDAの機能として取り込まれる予定とのことですが、それまでの間は常にアドオンを最新の状態に保つのに役立ちそうです。

Pick Up