ユーザー補助について

障がいのある方がウェブを利用する際に一般的に使用されるツールには、どのようなものがありますか？

正しいと思われる解答をすべて選択してください。

点字出力デバイス

スクリーンリーダー

ドッキングステーション

オペレーティングシステムの設定

ウェブで変更を有効にする効果的な方法は何ですか？

正しいと思われる解答をすべて選択してください。

ソーシャルメディアで苦情を申し立てる。

訴訟を起こす。

企業のデベロッパーに直接連絡する。

WCAG 規格の最高レベルは何ですか？

AAA レベル

A レベル

プール

操作可能な例を教えてください。

正しいと思われる解答をすべて選択してください。

すべての動画にコントロールがあります。

ユーザーがフォームに記入するのに十分な時間がある。

すべてのアクティブな要素がキーボードとタッチスクリーンをサポートしています。

わかりやすい表現を使用している。

アクセシビリティ対応のボタンを作成する際のベストプラクティスは次のうちどれですか？

<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div>

<a id="saveChanges" aria-label="Some awesome article title">Go to shop</a>

<button id="saveChanges" type="button">Go to shop</button>

サイトが多言語のオンライン教科書で、1 つのページに複数の言語が表示されている。コピーの言語を支援技術に伝える最適な方法は何ですか？

<html> のメイン lang を設定し、異なる言語のコンテンツを含む要素に他の言語を設定します。

AT は各言語を自動的に読み取ることができるため、心配する必要はありません。

<html> 要素にすべての言語を含めます。例: <html lang="en,lt,pl,pt">

白地の背景で最もアクセシビリティの高い `:focus` CSS スタイルの例はどれですか。

outline: 0.5rem solid yellow;

background-color:black;

outline: none; text-decoration:none; background:none;

text-decoration: dotted underline 2px blue;

スキップリンクの目的は何ですか？

キーボードユーザーが冗長なリンクや役に立たないリンクのグループをスキップできるようにします。

キーボードユーザーが興味のないコンテンツをスキップできるようにします。

JavaScript で要素のスタイルを変更する最適な方法は何ですか？

JavaScript を使用して要素のクラスを切り替え、CSS スタイルシートにスタイルを追加します。

JavaScript を使用して、HTML 要素内で直接動的スタイルを適用します。

すべての JavaScript アクションがキーボードユーザーをサポートできますか？

はい。すべてのアクションはキーボードユーザーを自動的にサポートします。

はい。ただし、追加の作業が必要になる場合があります。

いいえ。セマンティック HTML を使用してキーボードユーザーをサポートすることしかできません。

複雑な画像をアクセシブルにするにはどうすればよいですか？

正しいと思われる解答をすべて選択してください。

記事の後半で説明します。

詳細な説明を含む長文の代替テキストを追加します。

aria-describedby 属性を画像に追加します。

長い説明にはリンクを使用します。

色だけでは、ドキュメントの十分な識別子にはなりません。他に、UI 要素を識別するのに役立つものはありますか？

パターン

テキスト

アイコン

上記の選択肢はすべて正しい

モーションのオペレーティングシステム設定を反映するものは、どのようなものが作成できますか？

@prefers-reduced-motion

JavaScript の切り替え

読みやすいコピーにするには、コピーと背景のコントラストを常に高くする必要があります。

誤り

正しい

アクセシビリティに最適なフォントは何ですか？

アクセシビリティに配慮した書体。

Arial や Verdana などのシステムフォント。

大丈夫です。

次のうち、最もアクセシビリティの高いフォーム入力はどれですか？

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>

Email address: <input type="email" required>

<label>Email address: <input type="email" required></label>

<label>Email address: <input type="email" required autocomplete="email"></label>

ユーザーは常にアクセシビリティ対応コンポーネントにアクセスできますか？

いいえ。まずコンポーネントをテストする必要があります。

はい。これらのコンポーネントは追加の作業なしで使用できます。

サイトのアクセシビリティを確保するには、どのようなテストを行う必要がありますか？

正しいと思われる解答をすべて選択してください。

自動テスト

手動テスト

ユーザーテスト

支援技術のテスト

評価テスト。

自動テストで検出されるエラーの種類

正しいと思われる解答をすべて選択してください。

Inclusive language

代替テキストがない

色のコントラストに関する問題

わかりやすいフォームラベル

ARIA エラー

WCAG の色のコントラスト基準を満たす必要がある要素

アイコン

見出し

本文のテキスト

上記すべて

ユーザー補助機能のテストに最適なスクリーンリーダーは何ですか？

ありません

JAWS

VoiceOver

Orca

支援技術を使用したテストの目的は何ですか？

ウェブサイトやアプリの欠陥をテストするため。

支援技術を使用しているユーザーと同じ体験をするため。

障がいのある方がウェブを利用する際に一般的に使用されるツールには、どのようなものがありますか？

ウェブで変更を有効にする効果的な方法は何ですか？

WCAG 規格の最高レベルは何ですか？

操作可能な例を教えてください。

アクセシビリティ対応のボタンを作成する際のベスト プラクティスは次のうちどれですか？

サイトが多言語のオンライン教科書で、1 つのページに複数の言語が表示されている。コピーの言語を支援技術に伝える最適な方法は何ですか？

白地の背景で最もアクセシビリティの高い :focus CSS スタイルの例はどれですか。

スキップ リンクの目的は何ですか？

JavaScript で要素のスタイルを変更する最適な方法は何ですか？

すべての JavaScript アクションがキーボード ユーザーをサポートできますか？

複雑な画像をアクセシブルにするにはどうすればよいですか？

色だけでは、ドキュメントの十分な識別子にはなりません。他に、UI 要素を識別するのに役立つものはありますか？

モーションのオペレーティング システム設定を反映するものは、どのようなものが作成できますか？

読みやすいコピーにするには、コピーと背景のコントラストを常に高くする必要があります。

アクセシビリティに最適なフォントは何ですか？

次のうち、最もアクセシビリティの高いフォーム入力はどれですか？

ユーザーは常にアクセシビリティ対応コンポーネントにアクセスできますか？

サイトのアクセシビリティを確保するには、どのようなテストを行う必要がありますか？

自動テストで検出されるエラーの種類

WCAG の色のコントラスト基準を満たす必要がある要素

ユーザー補助機能のテストに最適なスクリーン リーダーは何ですか？

支援技術を使用したテストの目的は何ですか？

アクセシビリティ対応のボタンを作成する際のベストプラクティスは次のうちどれですか？

白地の背景で最もアクセシビリティの高い `:focus` CSS スタイルの例はどれですか。

スキップリンクの目的は何ですか？

すべての JavaScript アクションがキーボードユーザーをサポートできますか？

モーションのオペレーティングシステム設定を反映するものは、どのようなものが作成できますか？

ユーザー補助機能のテストに最適なスクリーンリーダーは何ですか？