アクセシビリティを考慮したデジタルアセスをゼロから設計する

オンライン・アクセシビリティ・デザイン・コンセプト

Webベースのアプリケーションは、身体や認知機能に障害のある人たちに学習の機会を提供する大きな可能性を秘めています。しかし、オンライン学習の普及が進むにつれ、特に障がいのある方のアクセシビリティに関する懸念が高まっています。ウェブアクセシビリティ・イン・マインドでは、人口の5分の1が何らかの障害を持っていると推定しています。このような人たちは、オンラインアプリケーションを利用することに困難を感じているかもしれませんが、アクセシビリティが評価設計の生来の要素ではなく、後回しにされてしまうと、ユーザーのかなりの部分が孤立してしまう危険性があります。

適切なアクセシビリティへの投資と、アクセシビリティのための評価の設計を一から行うことで、潜在的なユーザー数が増えるだけでなく、誰もが安心してプラットフォームを利用できるようになります。これにより、ブラウザや支援技術がコンテンツを理解しやすい形で表示できるようになります。

アシスティブ・テクノロジー

支援技術とは、障がいのある方が作業を行うために使用する道具の総称です。これらの技術の一部を紹介します。

  • スクリーンリーダー(JAWS for Windows、NVDA、Voiceover for Mac)
  • 画面拡大ソフト
  • テキストリーダー
  • 音声入力ソフト
  • 代替入力デバイス

これらの技術は、コンテンツを別の方法で表示することにより、ユーザーが書く、綴る、読む、ナビゲートすることを支援します。

デジタル評価では、支援技術がコンテンツを解釈し、適切にレンダリングできるような基準に準拠することが重要です。Web Accessibility Initiative(WAI)は、さまざまなタイプのユーザーがどのようにWebを閲覧するか、また使用されている技術に関する情報を提供しています。

デジタルアクセシビリティ

オンライン学習におけるアクセシビリティは、ユーザーエクスペリエンスの重要な部分として、その勢いを増し続けています。アクセシビリティは、評価プラットフォームのすべての側面を構築するための基本的な基盤であると考えるべきです。

アクセシビリティ」という言葉の意味は人によって異なりますが、World Wide Web Consortium(W3C)では、「障害者がウェブを知覚、理解、ナビゲート、操作、貢献できること」と定義しています。

デジタルアクセシビリティとは、技術的な規定のことです。デジタル評価プラットフォームをどのように実装するか、また、コンテンツの構築や配信に使用するツールについても同様です。しかし、アクセシビリティを考慮したオンライン評価の設計は、技術だけではありません。選ぶ言葉から画像やグラフの使用まで、評価を伝える方法もアクセシビリティに影響します。

一貫したデザイン

アクセシビリティを確保するためには、評価インターフェースがエクスペリエンス全体で一貫していることが重要です。ページネーション、質問、ヘルプなどのグローバル要素は、アプリケーション内で一貫して表示されるべきです。また、ブックマーク、スクラッチパッド、電卓など、同じ機能を持つ要素は、すべてのページで同じように並べられ、ラベル付けされていることが重要です。

ナビゲーション

ユーザーがオンライン評価を完了するためには、一連の質問に進むための複数の方法があるべきです。ユーザーは、意図された階層をナビゲートすることで道を見つけることができますが、インデックス、リスト、または検索機能を通じてページや画面を見つけることもできなければなりません。これにより、ユーザーはキーボードを使って自分が探しているものを正確に見つけることができます。

見出しとタイトル

テストのルック&フィールをデザインする際には、ユーザーによっては問題の概要を視覚的に把握できないことを念頭に置いてください。むしろ、構造的にそうしなければならないのです。スクリーンリーダーのユーザーは、ページ上のすべての見出しを聞くためにショートカットキーを使用したり、簡単にジャンプできるすべての見出しのリストにアクセスしたりします。

Make sure to divide the experience into logical sections, each with a heading that describes that part of the assessment. This allows assistive technologies to render them as section headings. To do this properly, you must tag these sections with headings such as <h1>, <h2>, <h3>.

太字や太い字、別の色を使って論理的かつ視覚的に強調したい場所では、コードの中の見出しも強調してください。このようにして、見出しは視覚的にだけでなく、構造的にも機能します。

色の使い方

情報やテスト項目、スコアが色だけで表現されている評価ページは、色覚障害のあるユーザーにとってはフラストレーションが溜まり、効果的ではありません。例えば、テキスト内のリンクを別の色で表現するだけでなく、リンク先の情報を伝える必要があります。また、エラーメッセージは通常、赤で表現されます。これでは、色覚障害のある人がはっきりと解釈することは難しいでしょう。このようなリンクやメッセージは、下線テキストやアイコン化などで補足してください。

視覚障がい者の方がページ内のすべての文字を読むためには、文字の色と背景の色が十分なコントラストを持っていることが重要です。そのためには、通常の文字は4.5:1、大きな文字は3:1のコントラスト比が必要となります。コントラスト比をすばやく測定するためのツールも多数用意されています。

テスト項目

テストアイテムをデザインする際には、ユーザーがどのようなアクションを取るべきかを明確にする必要があります。テキストフィールド、ドロップダウン、チェックボックス、ラジオボタンは、常に説明的なテキストと関連付ける必要があります。例えば、「質問1」や回答「A」、「B」、「C」などの入力フィールドのラベルは、入力フィールドと関連付けるために(ARIAを使用して)コード化する必要があります。そうすることで、ユーザーがキーボードやマウスを使って入力フィールドにタブ入力したときに、スクリーン・リーダーがラベルをアナウンスすることができます。

キーボードナビゲーション

評価内のすべてのコンテンツは、コンピュータのマウスとキーボードだけでナビゲートできる必要があります。これは、質問、回答、ボタン、リンクなどに適用されます。

ユーザーの中には、マウスを使うことができず、キーボード(スイッチコントロールデバイス)を使って、コンテンツをタブで切り替えながら操作する人もいます。このようなユーザーは、自分がページのどの位置にいるのかを確認する必要があるため、インジケータは常に視覚的にわかるようにしておく必要があります。(注:ほとんどのブラウザでは、フォーカスされているコンテンツの周りに点線で自動的に表示されます)。また、この表示を独自の方法で行うことも可能です。しかし、多くの人が期待するように、デフォルトの可視アウトラインを維持することが最善の方法です。どのような場合でも、可視インジケータを削除するコードを追加してはいけません。

ユーザー入力

ユーザーがフィールドに情報を入力しなければならない場合は、テキストを正しく入力するための指示を受けるようにしてください。また、ユーザーが間違いを犯した場合には、確実にユーザーに通知します。送信時に通知するのではなく、即座に通知する方がすべてのユーザーにとって良いでしょう。エラーメッセージを表示する際は、赤などの色だけで表示しないようにしてください。エラー」という言葉を使うか、エラーが発生したことを明らかにする記述にしましょう。また、問題を解決するための方法についても記述しておきましょう。

グラフィックス

画像、グラフィック、埋め込みビデオなど、テキスト以外の要素が評価の一部に含まれている場合、要素の目的を説明するテキストの代替手段を提供することが最も重要なルールとなります。

そして最後に...。

これらの技術や戦略を導入することで、より多くのユーザーがオンラインで評価を受け、利用し、最終的に評価を完了することができます。このようなアクセシビリティに配慮したデザインや機能への投資を行うことで、ユーザーベースが拡大し、最終的にはすべての人に開かれたオンライン評価ソリューションを実現することができます。

アクセシビリティを考慮したオンライン評価の設計についての詳細はこちら