treegridとその他の高度なパターン
最も難しい複合ウィジェットにも自信を持って取り組みます。
「treegridとその他の高度なパターン」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
難関モードに挑戦
中には本当に複雑なウィジェットもあります。treegrid、グリッド、ツリーは、行、列、展開可能なノードを同時に組み合わせます。🌳
Treegrid とは
treegridは、ツリーのように行を展開・折りたたみできるグリッドです。入れ子になったフォルダーと詳細情報の列を備えたファイルブラウザーに最適です。
基本的なロール
コンテナーにはrole="treegrid"、各行には role="row"、セルには role="gridcell" を使います。この構造は実際のグリッドに対応しています。
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>展開可能な行
開くことのできる行にはaria-expandedを付けます。子要素が表示されているときは true、折りたたまれているときは false にします。末端の行ではこの属性自体を省略します。
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>aria-level で階層を示す
aria-levelを使って、行がツリーのどの深さにあるかをユーザーに伝えます。レベル 1 が最上位で、入れ子になるたびに 1 ずつ増えます。
2つの軸で移動する
treegrid では、矢印キーで両方の軸を移動します。Up と Down で行を移動し、Left と Right でセル間を移動したり、折りたたみ・展開を行ったりします。
展開と折りたたみのキー
親行では、Right Arrowで展開し、Left Arrow で折りたたみます。これは、デスクトップのファイルツリーで昔から使われてきた操作と同じです。
1つのタブストップ
treegrid 全体が 1 つのタブストップになります。roving tabindex によって実際のフォーカスをセル間で移動させるため、ウィジェット全体が 1 つの複合コントロールのように感じられます。
サイズと位置を設定する
動的に生成する行や仮想化された行では、aria-setsizeと aria-posinset を使います。すべての行が描画されていなくても、ユーザーが位置と件数を聞けるようになります。
Home、End、ジャンプ
高度なグリッドでは、Home と Endで最初または最後のセルに移動できます。Ctrl と Home または End を組み合わせると、データの先頭または末尾に一気に移動できます。
APG を活用する
このパターンは細かな点まで厳密さが求められるため、APG の例に沿って実装し、実際のスクリーンリーダーでテストしてください。小さなミスでもウィジェット全体が機能しなくなります。
理解度チェック
グリッド内の行を開くと、入れ子になった行が表示されるファイルブラウザーを作ります。どの role が適切でしょうか。
復習
treegridはグリッドとツリーを組み合わせたものです。aria-expanded と aria-level を持つ行、2軸の矢印キー操作、roving tabindex による 1 つのタブストップで構成されます。APG を参考にし、入念にテストしてください。✅
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「treegridとその他の高度なパターン」レッスンは無料ですか？
はい。「treegridとその他の高度なパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「treegridとその他の高度なパターン」で何を学びますか？
最も難しい複合ウィジェットにも自信を持って取り組みます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「treegridとその他の高度なパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- APGを読む：パターン、キー、例
- コンボボックスとオートコンプリートを正しく作る
- メニュー、メニューバー、メニューボタン
- treegridとその他の高度なパターン