0Pricing
Web Accessibility Academy · レッスン

APGを読む：パターン、キー、例

あらゆるウィジェットの仕様としてガイドを活用します。

「APGを読む：パターン、キー、例」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

APGを知る

ARIA Authoring Practices Guideは、カスタムウィジェットを正しく構築するためのW3C公式ガイドです。迷ったときは、これを仕様として参照してください。📘

自分で再発明しない

APGには、タブ、メニュー、ダイアログなどの実証済みのpatternsがあります。ロールやキーを自分で推測する代わりに、テスト済みの手順を利用できます。

パターンの構成

APGの各パターンには、概要、キーボード操作、必要なARIAロールと属性、調査できる実例という同じsectionsがあります。

キーボード操作は契約である

Keyboard Interactionの表には、各キーが何を実行すべきかが正確に示されています。ユーザーはこれらのキー操作を期待するため、この表を必須要件として扱ってください。

ロールの表

WAI-ARIA Roles, States, and Propertiesの表には、ウィジェットに必要なすべての属性と、それぞれが変更されるタイミングが記載されています。どれも省略しないでください。

実例を調べる

各パターンには、完全なソースコードを含む動作するexampleが用意されています。読み、スクリーンリーダーでテストしてから、マークアップを自分のUIに適用してください。

<div role="tablist" aria-label="Settings">
  <button role="tab" aria-selected="true">General</button>
</div>

常にネイティブを優先する

APGは、利用できる場合はnative HTMLを優先するよう警告しています。実際の要素では目的を達成できない場合にのみ、これらのパターンを使ってください。

状態は実行時に変化する

パターンでは、固定されたロールと変化するstatesを分けて扱います。aria-expandedやaria-selectedはHTMLに一度だけ設定するのではなく、ユーザーの操作に応じてJavaScriptで設定します。

フォーカスも仕様の一部

多くのパターンでは、focusをどこに移し、どのように移動させるかが正確に説明されています。このフォーカスの動きを守ることは、ARIAそのものと同じくらい重要です。

パターンに沿ってテストする

構築したら、APGのkeyboard tableに従って、キーを1つずつ押しながらウィジェットを確認します。すべての行に合格すれば、実証済みの動作に一致しています。

常に更新されるガイド

APGはversionedであり、ARIAの進化に合わせて更新されます。そのため、内容を転載した古いブログ記事ではなく、現行版を確認してください。

クイックチェック

これからカスタムウィジェットを構築します。まずAPGは、何を優先するよう導くでしょうか。

まとめ

APGはウィジェットの仕様書です。まずネイティブ要素を使い、その後で各パターンのロール、状態、キー、フォーカスに従います。表に沿ってテストすれば、ユーザーがすでに知っている操作感でリリースできます。✅

よくある質問

「APGを読む：パターン、キー、例」レッスンは無料ですか？

はい。「APGを読む：パターン、キー、例」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「APGを読む：パターン、キー、例」で何を学びますか？

あらゆるウィジェットの仕様としてガイドを活用します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「APGを読む：パターン、キー、例」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. APGを読む：パターン、キー、例
  2. コンボボックスとオートコンプリートを正しく作る
  3. メニュー、メニューバー、メニューボタン
  4. treegridとその他の高度なパターン
← Web Accessibility Academyに戻る