ARIAグリッド ARIA Grid
ARIAグリッドは、行とセルのインタラクティブなセットです。矢印キーでフォーカスを上下左右に移動できます。
↗画面上で人々が使用するボタン、メニュー、フォーム、その他の部分の名前を学びましょう。
簡単な意味、例、使用時期、公式度、コードネームを含む用語を開く
ARIAグリッドは、行とセルのインタラクティブなセットです。矢印キーでフォーカスを上下左右に移動できます。
↗ARIAフィードパターンは記事のような項目が変化するストリームです。人々がそれを通過するにつれて、新しい項目が追加されたり古い項目が削除されたりします。
↗ウェブ通知は、ブラウザやオペレーティングシステムがページ外で表示するメッセージです。ユーザーは許可を与える必要があり、メッセージはシステムのルールに従います。
↗アイコンは、人々がアクション、オブジェクト、状態、またはグループを認識するのに役立つ小さなシンボルです。
↗アクセシブルな説明は、要素のアクセシブル名が提供しない有用な詳細を追加します。形式、制限、または結果を説明できます。
↗アクセシブル名は、コントロールまたは画像に対してソフトウェアが計算するラベルです。スクリーンリーダーはそれを使って項目を識別します。
↗アクティビティログは、時間順に製品のアクションを一覧表示します。各行には、誰が何を、どのアイテムに対して、いつ行ったかが記載されています。
↗アコーディオンは、自身のコンテンツを開閉できる見出しを持つセクションを積み重ねます。
↗アバターとは、小さな画像、イニシャル、またはシンボルのことです。人、チーム、ボット、またはアカウントを識別するのに役立ちます。
↗アプリ内通知センターは、有用な更新を一か所にまとめて保持します。各項目は何が変更されたか、いつ変更されたか、および未読かどうかを表示します。
↗アラートは、キーボードのフォーカスを移動せずに通知される短く重要なメッセージです。ユーザーにすぐに回答を求めるものではありません。
↗この学習バンドルは、3種類のフィードバックを比較します。アラートは重要な状態を伝えます。バナーは領域全体に広がります。通知は後で確認できるストリームに入ります。このバンドルは、標準的なステータスパターンの1つではありません。
↗アラートダイアログは、緊急の選択のためのモーダルダイアログです。続行する前に、ユーザーは結果を理解する必要があります。
↗エラーサマリーは、フォームの上部にある短いリストです。それぞれの項目はエラーを説明し、そのフィールドへのリンクがあります。
↗エラー状態は、アクションやページが失敗した場合に表示されたままになります。具体的な問題を説明し、安全に回復する方法を提供します。
↗「...」の3つのドットでできた小さなボタンは、あまり使わない操作を開きます。それらの操作が画面に入りきらない時に使います。
↗カードは、1つのテーマについて、その詳細や関連するアクションを、はっきりとまとまった形で見せるよ。
↗カスケーダー(Cascader)は、1つずつレベルごとに選択肢を見せるよ。1つ選ぶと、それに合った次のリストが開くんだ。
↗カラーピッカーは、色を選べるようにするよ。色のフィールド、色相のバー、数値、または色見本を見せることがあるよ。
↗カルーセルは、一度に1つかいくつかのパネルを見せるよ。人は矢印やドット、またはスワイプで動かせるんだ。
↗カレンダービューは、スケジュールされた項目を日付や時間枠に配置します。人々は日、週、または月ごとに確認できます。
↗カンバンボードは、作業が進む実際のステップを示します。カードは作業を表し、WIP(作業中の制限)は開始が多すぎるのを防ぎます。
↗キーボードトラップは、フォーカスがページの一部に入るがキーボードでそこから出られないときに発生します。
↗キャプションは音声や重要な音に合わせたテキストで、トランスクリプトは音声や動画全体の読みやすいテキスト版である。
↗グローバル検索は、1つの共有検索場所からアプリ内の異なる種類のものを見つけます。
↗コマンドパレットは、キーボードで操作しやすい検索パネルです。アクションを実行したり、ページや最近のアイテムを開いたりできます。
↗コンテキストメニューは、それを開いたオブジェクトや領域のコマンドを表示します。通常、右クリックまたはコンテキストメニューキーで開きます。
↗コンテンツのリフローは、コンテンツや機能を失うことなくページを狭いスペースに収めます。ほとんどの読書では双方向スクロールは必要ありません。
↗リサイズハンドルは、端や角にあるつまみのことです。これをドラッグして、パネルや入力欄、列のサイズを変えます。
↗この学習バンドルは、2つの異なるナビゲーションパターンを比較します。サイドバーは幅が広く、ラベルやツールがあります。ナビゲーションレールは狭く、アイコンを使用することが多いです。このバンドルは1つの標準インターフェース用語ではありません。
↗サイドバーナビゲーションは、名前付きリンクを持ち、開いたままにすることも折りたたむこともできるサイドエリアです。製品内の関連する場所をグループ化することが多いです。
↗サイトのフッターは、ウェブサイトの一番下にあるまとまりです。重要度の低いリンクや法的な詳細、連絡先、信頼できる情報を置きます。
↗サイトのヘッダーは、サイトの一番上にブランド名やメインのメニュー、アカウント、サイト全体のツールをまとめた場所です。
↗ログインのためのアカウント情報を集めるフォームです。アカウントの復旧、パスワードマネージャー、分かりやすいエラー、そして安全な送信に対応しなければなりません。
↗サブスクリプション管理は、顧客の現在の有料プランを表示し、将来の請求を理解または変更できるようにします。
↗スイッチは、1つの設定をオンまたはオフにします。たいていは切り替えるとすぐに反映されます。
↗スキップリンクは、キーボードを使う人が同じメニューを何度も飛ばせるようにします。フォーカスをメインの内容や大事な場所へ直接移動させます。
↗スクリムは、ポップアップの後ろにある、少しだけ暗い透明の幕です。これがあることで下のページは見えなくなり、ポップアップが際立ちます。
↗ステータスメッセージは、ダイアログを開いたりフォーカスを奪ったりすることなく、結果、進行状況、または待機を報告します。
↗ステップは短いプロセスにおけるその人の位置を示します。この過程には決まった順序と終わりがあります。
↗完了するまでの割合が分からない時、スピナーはクルクル回って作業中であることを伝えます。
↗スピンボタンは、セット範囲から1つの値を選択するコントロールのARIA名です。通常、ユーザーは値を入力するか、増減させることができます。数値ステッパーがその一例です。
↗スライダーは、バーの上のつまみを動かして、1つの値や範囲を選びます。
↗セグメンテッドコントロールは、横に並んだ短い選択肢のセットです。モードやフィルター、値を切り替えるのに使います。
↗セマンティックHTMLとは、見た目だけでなく、その要素が持つ意味や機能に基づいてHTML要素を選ぶことを意味します。CSSがなくてもページは構造や組み込みの動作を保持します。
↗ソーシャルプルーフとは、人々が確認できる証拠です。それは、関連する人々や団体が製品を使用、信頼、または評価していることを示します。
↗ターゲットサイズとは、人がコントロールを使用するためにクリックまたはタップできる全範囲のことです。目に見えるアイコンより大きい場合があります。
↗タイムラインは、イベントや状態、目標を、1つの線に沿って時間の順番に並べます。
↗タグは通常クリックできない短いラベルです。アイテムをグループ化するか、安定したステータスを示します。タグはデザインパターンであり、Web標準ではありません。
↗タブはラベルを使って、1つの共有パネル内のコンテンツを切り替えます。メインタスクは開いたままです。
↗チェックボックスは、四角の中をチェックしたり外したりできるよ。それぞれの選択肢は単独で選ぶことができるんだ。
↗チップは、入力、フィルター、選択、または取り外し可能な項目を表す、小さなインタラクティブなアイテムです。その正確な動作は明確でなければなりません。
↗チャートはデータを絵にするよ。比べたり、傾向を見せたり、範囲を見せたり、つながりを示したりできるんだ。
↗チャットUIは、メッセージ、送信者の名前、入力ボックス、送信状態、そして添付ファイルをまとめるよ。エラーの直し方も見せられるんだ。
↗ツールチップは、コントロールについての短いメモです。マウスを乗せたり、キーボードでフォーカスを合わせたりすると開きます。ボタンのように使うことはできません。
↗ツールバーは、人々がよく使うコントロールの名前付きグループです。Tabキーでグループに一度入り、その後は矢印キーで内部を移動します。
↗ツリーグリッドは、子行を持つことができる行を備えたインタラクティブな表です。セルが列に揃ったまま、行レベルを開くことができます。
↗ツリーセレクトは、開くことができるツリーの中に、階層になった選択肢を表示します。1つだけ、または複数選ぶこともできます。
↗ツリービューは、階層のあるリストです。親の行を開いたり閉じたりして、中の子アイテムを表示します。
↗データインポートのワークフローは、アップロードされたファイルをチェックし、列を照合し、変更をプレビューし、すべてのインポート結果を報告します。
↗データグリッドは、アプリみたいな表です。たくさんのデータを並べ替えたり、選んだり、編集したりできます。
↗テキストエリアは、複数行の文章を打ち込める箱です。大きさを固定することも、変えられるようにすることもできます。
↗テキストフィールドは、ラベルがついた1行の箱で、文字を打ち込んだり直したりします。
↗テキスト選択はマークされたテキスト範囲です。人々はテキストをコピー、置換、メモ、または編集するために選択します。
↗トーストは短い状態のメッセージです。ページをブロックせず、たいていは時間が経てば自動的に消えます。
↗オンかオフにできるボタンの、ラベルの付いたグループです。一つ、あるいは複数の選択肢を押したままにできます。
↗トップに戻るは長いページのショートカット。表示とフォーカスを開始付近に戻す。
↗この学習バンドルは、開き方によってメニューを比較します。ドロップダウンはコントロールから開きます。コンテキストメニューは1つのオブジェクトに属し、しばしばポインタで開きます。このバンドルは、標準的なメニュー用語の1つではありません。
↗ドロップダウンメニューは、ボタンから開き、ボタンの横に表示される短命のコマンドメニューです。その通常のセマンティックパターンは、メニューボタンとメニューの組み合わせです。
↗ナビゲーションバーは、メインのページのリンクをまとめて、今どのページが開いているかを示すよ。
↗ナビゲーションレールは、画面の端に沿った主要な場所の短い縦リストです。これは一般的なデザインパターンであり、ウェブ標準ではありません。
↗バッジは、他のアイテムに付けられる小さく、クリックできないマークです。これはカウント、状態、または短い信号を示すもので、ウェブ標準ではなくデザインパターンです。
↗この学習バンドルは、デザインシステムによって異なる3つのラベルを比較します。バッジはしばしばステータスやカウントを表示します。タグはコンテンツをグループに分類します。チップはインタラクティブである場合があります。このバンドルは、標準的なコンポーネント用語の1つではありません。
↗バナーランドマークは、ウェブサイト全体のメインヘッダー領域です。広い告知用ストリップもバナーと呼ばれることがありますが、これは異なるデザインパターンです。
↗バルクアクションは、多くの項目を選択し、選択したセット全体に対して1つのアクションを実行できるようにします。
↗パンくずリストは、今見ているページと、その上の親ページへのリンクの道しるべだよ。
↗3本の線があるメニューボタンだよ。表示するスペースがないとき、サイトのメインのナビゲーションを開くよ。
↗hero sectionは、ページの一番最初に見えるメインの場所です。そのページの魅力、誰のためのものか、証拠、そして次にするべきことをすぐに伝えます。
↗ファイルアップロードには、デバイスからのファイル選択、確認、送信、管理が含まれます。
↗`<fieldset>` と `<legend>` は、関連するフォームコントロールのグループのための組み込みHTML要素です。legendはそれらが共有する質問を示します。
↗filterは、選んだ条件に合うものだけを表示する仕組みです。元のデータを書き換えません。
↗ページが変更された後、フォーカス管理はキーボードのアクティブポイントを移動させます。また、一時的なサーフェスが閉じたときにフォーカスを戻します。
↗フォーカス順序は、ページを通してキーボードフォーカスがたどる経路です。読み順やタスク順と一致する必要があります。
↗フォーム検証では、規則とメッセージを使用して、欠落または間違った回答を見つけ、防止し、説明します。
↗入力欄の一式です。見えるラベル、コントロール、必要ならヘルプ、チェックの状態、そして対応するエラーメッセージがあります。
↗Form Labelは、その入力欄に何を書けばいいかを伝えます。コードで、対応する入力欄としっかり結びつけます。
↗ページネーションはコレクションを番号付きページに分割し、どのページが開かれているかを表示します。
↗ポインタやカーソルは、画面上でポインティングデバイスがどこにあるかを示すよ。その形を見れば、選択、入力、ドラッグ、サイズ変更、待機、不可、のどれかわかるよ。
↗ボタンは、今見ている画面で何かを起こすために押すスイッチだよ。
↗ポップオーバーは、開いたコントロールにくっついた小さなパネルだよ。ページをブロックせずに、まとまったコンテンツやアクションを置けるよ。
↗ボトムシートは、タップしやすいパネルだよ。画面の下からニュッと上がってきて、決まった高さで止まることもあるよ。
↗hover cardは、ちょっとした詳しいプレビューです。参照にマウスを乗せたり選んだりしたときに開き、ページを塞ぎません。
↗マルチステップフォームは一つの長いタスクを小さなページに分けます。送信前に答えを確認します。
↗メーターは、既知の範囲内で1つの測定値を表示します。また、低値、高値、最適範囲を示すこともできます。
↗メディアプレーヤーは、音声や動画を操作するためのボタンのセットだよ。再生、進行、音量、字幕などの再生の選択肢が含まれているよ。
↗コマンドメニューは、特別なキーボードフォーカスルールを持つ一連のアクションまたは選択肢です。通常、ボタンや他のコマンド領域から開きます。
↗この学習バンドルは、2つの異なる用語を比較します。メニューはコマンドを一覧表示します。メニューバーは常に表示されるコマンドメニューのグループです。このバンドルは1つの標準インターフェース用語ではありません。
↗メニューバーは、常に表示されるメニューで、多くの場合、1 行の水平に並んでいます。これらの項目は、アプリスタイルのキーボード規則で、コマンドやサブメニューを開きます。
↗メニューボタンは、操作や選択肢のリストを開きます。メニューが開いているかどうかをソフトウェアに伝えます。
↗メンバー管理は、許可された管理者が人々を招待したり、ステータスを確認したり、役割を変更したり、アクセスを削除したりする場所です。
↗モーダルダイアログは、集中するためのウインドウだよ。誰かが閉じるか完了するまで、今の画面をブロックするよ。
↗FAQは、人々が決定を下す前や助けを求める前によく尋ねる質問を集めます。回答は、そうした人々が知っている言葉や状況を使います。
↗ライトボックスは、メディアをもっと大きな画面で開いて、その周りのページを暗くするよ。
↗ライブリージョンは、重要なページテキストが変更されたときに支援技術に通知します。フォーカスを移動させずに更新を発表できます。
↗ラジオグループは、いくつかの選択肢の中から1つだけ選べるようにします。
↗ランドマークはページの主要な領域です。支援技術は、人々がその領域に直接ジャンプできるようにします。
↗リストは、関連する項目を見やすく、使いやすい順番で並べたものだよ。
↗リストボックスは選択肢のカスタムリストです。どの選択肢がアクティブか、矢印キーでリストをどう移動するかを管理します。
↗リンクは、別のページ、ファイル、場所を開くための文字やメディアだよ。
↗ロービングタブインデックスはグループに1つのタブストップを与えます。その後、矢印キーでグループ内の項目間を移動できます。
↗drawerは、画面の端からスライドして現れます。その後ろにあるページの一部も見えたままです。
↗引用は、誰かの言葉をそのまま伝え、その言葉がどこから来たのかをはっきり示します。
↗料金表は、比較しやすいように、プラン、料金、制限、機能、購入条件を整理するよ。
↗画像はコンテンツ内の写真です。目的に応じたサイズ、読み込み、トリミング、代替テキストのルールが必要です。
↗開示要素は、関連するセクションを表示または非表示にするボタンです。また、ソフトウェアにそのセクションが開いているかどうかを知らせます。
↗強制カラー モードは、多くのページカラーの代わりにユーザーが選択したシステムパレットを使用します。これにより、コントロールやテキストを区別しやすくすることができます。
↗セパレーターは、部分間の実際の区切りを示すこともできる目に見える線です。人々がフォーカスして移動できる場合、それは調整可能なスプリッターになります。
↗dividerは、グループ、コントロール、トピックの境目となる線です。目で見える線もあれば、プログラム用の線もあります。
↗この学習バンドルは、3つの異なるアプリ状態をカバーします。Emptyはまだコンテンツがないことを意味します。Errorは何かが失敗したことを意味します。Successは完了したことを確認します。それぞれに独自のメッセージと次のステップが必要です。このバンドルは、標準的な状態用語ではありません。
↗リストやワークスペースに現在コンテンツがない場合、空の状態が表示されます。それがなぜかを説明し、有用な次のステップを示します。
↗検索ボックスは、打ち込んだ言葉に合う内容を探すための入力欄です。
↗権限マトリックスは、選択した領域でどの役割が各アクションを実行できるかを示します。アクセスルールの比較が容易になります。
↗見出し階層は、ページセクションがどのように組み合わさっているかを示すために見出しレベルを使用します。
↗aria-currentは、関連するセット内でどの項目が現在のアイテムであるかを支援技術に伝えます。それは項目が選択されていることを意味するものではありません。
↗コールトゥアクションは、次にしてほしい便利な行動へ誘う、はっきりした案内だよ。
↗スケルトンは、これから表示される内容と同じ形をした、シンプルなプレースホルダー(仮の枠)です。
↗時刻ピッカーは、現地時刻を入力または選択するためのコントロールです。そのステップサイズと現地表示形式は明確である必要があります。
↗進捗バーは、時間制のタスクがどれだけ完了したかを示します。人々はそれを読むことはできますが、直接制御することはできません。
↗進行状況インジケータは、作業が進んでいることを示すよ。バーやリングは分かっている進行状況を示すよ。スピナーは、どれくらい待つ必要があるか分からないことを意味するよ。
↗測れるタスクがどれくらい終わったかを、丸い形で見せるよ。
↗Numeric Stepper は、数字が入力できて、足したり引いたりするコントロールがついたものだよ。ネイティブの number input や、ARIA spinbutton のセマンティクスを使うことがあるよ。プラスボタンとマイナスボタンだけじゃ、そのセマンティクスは作れないよ。
↗成功状態は、アクションが完了したことを確認します。それは永続的な結果と役立つ次のステップを表示します。
↗設定ページには、アプリの動作をタスク全体で変更する選択肢が含まれています。適切なデフォルト設定は、ほとんどの人がすぐに開始できるようにします。
↗Description Listは、名前とその値や説明をセットにします。短く、読むだけの事実を伝えるのに適しています。
↗セレクトは、リストを開いて、そこから1つ選ぶためのものです。
↗挿入キャレットは、編集可能なテキスト内で点滅する線です。次に入力または貼り付けされる文字の位置を示します。
↗代替テキストは、誰かが画像を見られない場合に、その画像の有用な意味を説明します。それはそのページ上の画像の役割に一致する必要があります。
↗統計は1つの数字を際立たせます。そのラベル、単位、時間の範囲、そして前後の話で数字の意味を説明します。
↗読み取り専用フィールドはフォーカスを受けることができ、その値をコピーすることができます。その人は値を編集できません。
↗日付と時刻のピッカーは、正しい日付や時間、範囲を選ぶのに便利です。カレンダーや時計を表示することもあります。
↗日付ピッカーは、カレンダー上の日を入力したり選択したりするためのコントロールです。時刻を選ぶことはできません。
↗表は、関連する情報をラベルのついた行と列に並べます。たいていは読み取り専用か、簡単な操作しかありません。
↗評価は、決まった基準にそって意見を示します。星マーク、数字、または名前のついたレベルなどを使います。
↗分析ダッシュボードは、いくつかの関連する指標やチャートを組み合わせます。1つの問いに対する簡単な概要を提供します。
↗編集可能なコンボボックスとは、入力するたびにリストをフィルタリングするテキストフィールドです。
↗保存されたビューは、リストがどのようにフィルタリング、並べ替え、表示されるかを記憶するので、同じ便利なビューを再度開くことができます。
↗無限スクロールは、読者が現在の終わりに近づくと、さらにフィード項目を読み込みます。
↗