Webアクセシビリティについて

概要

Webを利用するユーザの中には画面上の文字を音声に変換するスクリーンリーダと呼ばれるソフトを使いながら、Webの閲覧をしているユーザもいます。
vdsは音声を提供するWebサービスです。使い方によっては、そういったユーザに対してvdsの音声が邪魔になることがあります。
ここでは、より多くのユーザがvdsを快適に利用できるようにするため、Webアクセシビリティを考慮した開発上の注意をまとめておきます。

ここで挙げる注意点への対応は、普段からHTMLやCSS、JavaScriptなどを使用したWebコンテンツ作成をしている開発者にとっては、それほど難しいものではありません。
開発者のちょっとした「気遣い」が、多様なユーザに対するバリアの除去や使いやすさにつながるのです。

この文書は、以下に挙げるガイドラインを参考に書きました。中でも最も新しいアクセシビリティに関するガイドラインである「Web Content Accessibility Guidelines 2.0 Candidate Recommendation」を軸に書かれています。

vdsを使うことで期待できるアクセシビリティ上の効果

音声読み上げを利用するユーザというと、視覚に障害のあるユーザがすぐに思いつきます。
もちろん、音声読み上げは視覚障害者にとって、非常に重要な情報へのアクセス手段です。
それ以外にも、音声で画面上のコンテンツが読み上げられると、いくつかの不便利の解消や軽減につながります。具体的には、以下のような効果が考えられます。

ユーザの識字能力や読みに関する能力が低い場合
学習の途上にある子どもなどは、漢字が十分に読めないなどの理由で、提供されているコンテンツを十分に読むことができません。
音声でコンテンツを読み上げることにより、そういったユーザでもコンテンツを利用しやすくすることができます。
日本語を母国語としない場合
ユーザによっては、日本語会話の能力はあるものの、日本語で書かれた文書を読むことが難しい場合があります。
日本で暮らす外国人などがその例としてあげられます。
文字に加えて音声でも情報提供することで、より確実に情報を伝えることが可能になります。
読字に関する障害がある場合
視覚や聴覚に機能的な障害がなくても、文字を読んで理解することが難しい、という認知的な障害のあるユーザも存在します。
文字に加え音声でも情報提供することで、読字に関する障害の有無に関わらず情報を入手できるようになります。
視覚の機能が低下している場合
年齢を重ねるにつれて、人間の視覚機能は低下していきます。
いわゆる「老眼」と呼ばれる視覚機能の低下は、誰でもいづれは経験するものです。
日常生活に支障はないものの、PCの画面上の文字を読むのは楽でない、というユーザは少なくありません。
衰えた視覚機能の補助として、音声での情報提供は有効な手段といえるでしょう。

音声の代替

通常の文字以外のコンテンツ（非テキストコンテンツ）には、その情報の代替となるテキストを用意しておく必要があります。

vdsは非テキストコンテンツの1つである音声を提供します。
音声化される内容は、画面上のテキストとして確認できるようにしなくてはいけません。
音声を使用できないユーザ（スピーカのついていないPCを使用している人、聴覚障害者など）が困ることないようにしておくことが重要です。

WCAG2.0
ガイドライン 1.1
1.1.1 Non-text Content: All non-text content has a text alternative that presents equivalent information, except for the situations listed below. (Level A)

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
  • Test: If non-text content is a test or exercise that must be presented in non-text format, then text alternatives at least provide descriptive identification of the non-text content.
  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
  • CAPTCHA: If the purpose non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

音を再生タイミング

3秒以上の音声が自動的に再生される場合は、スピーカの電源を切るなどの方法をとることなく、ユーザが自分でそれを止められるようなインタフェースを用意しておく必要があります。

vdsを使用して、上に挙げたガイドラインに準拠したWebページを作成しようとするなら、音声を停止するためのユーザインタフェースを設ける必要があります。
ユーザインタフェースの設計については、この次のセクションでも触れます。

WCAG2.0
ガイドライン 1.4
1.4.2 Audio Turnoff: If any audio plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume which can be set independently of the system volume. (Level A)

ユーザインタフェースの設計1

全てのユーザインタフェースがキーボードで操作できるようになっている必要があります。マウスでのみ操作可能な要素（onClick属性を持ったimg要素など）の使用は避けなくてはなりません。

vdsを制御するためのユーザインタフェースは、キーボードからの操作にも対応していなくてはなりません。
先に挙げたような、onClick属性でイベントハンドラが指定されたimg要素はキーボードで操作することが出来ないので、使わないようにします。
これは、キーボードのみを使って操作しているユーザ（視覚障害者や肢体不自由者など）に対する重要な配慮です。

WCAG2.0
ガイドライン 2.1
2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)

ユーザインタフェースの設計2

フォーカスがあたっただけで、大きく状況が変化するようなインタフェース設計は避けるようにしなくてはなりません。

vdsを制御するためのユーザインタフェースは、ユーザ明示的に操作した時（ボタンをクリックする、など）のみ機能が発効するように設計する必要があります。
つまり、ボタンや要素にフォーカスが当たっただけで、読み上げが開始されたり、逆に読み上げが停止するような設計は、あまりお勧めできません。

WCAG2.0
ガイドライン 3.2
3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)

動作環境に関する配慮

現在、または将来のブラウザやそのプラグインなどでの利用に耐えるように、Webページが設計されている必要があります。

vdsは、できるだけメジャな技術を使うように設計されています。vdsが依存している重要な技術にJavaScriptとFlashがあります。これらは、ほぼ標準的な技術ですが、使用できない環境の利用者がいる可能性もあります。
FlashPlayerの有無やバージョンのチェックは、JavaScriptで行うことができます（参考サイト：Adobe Flash Player Version Penetration）。また、JavaScriptが使えない環境への対策はnoscript要素で行うことができます。

WCAG2.0
ガイドライン 4.1
4.1 Maximize compatibility with current and future user agents, including assistive technologies.