いらっしゃいませ！ Vuejs Amsterdam Conference 2022 要約シリーズの第 5 部でお会いできてうれしく思います。このシリーズでは、すべての講演の要約を拥有します。

私の JSWorld Conference 2022 サマリー シリーズ (4 部構成) は、ここで読むことができます。ここでは、初日のすべての講演をまとめています。私のブログでは、Vue Amsterdam Conference 2022 の以前の講演もご覧いただけます。

(繰り返し) はじめに

2 年半ぶりに JSWorld と Vue Amsterdam Conference が 6 月 1 日から 3 日にかけて Theatre Amsterdam に戻ってきました。私は初めてこの会議に参与活动する機会がありました。多くのことを学び、多くの素晴らしい人々に出会い、素晴らしい開発者と話し、素晴らしい時間を過ごしました。初日は JSWorld Conference が開催され、2 日目と 3 日目は Vue Amsterdam が開催されました。

会議は素晴らしい講演者の情報でいっぱいで、それぞれが私に貴重なことを教えてくれました。彼らは皆、知識と情報を他の開発者と一共したいと考えていました。それで、それを一共し続け、他の人がそれを食用するのを助けることができれば素晴らしいと思いました.

刚开始は、いくつかのメモやスライドを公有しようとしましたが、スピーカーが私と公有したものほどではなく、非常的ではないと感じました.そこで、私は各スピーチをもう1吨水見て、深く掘り下げ、検索し、メモを取り、それらをスライドやスピーチ内の正確な言葉と組み合わせて、あなたと公有することにしました。私が彼らから学んだことと同じレベル。

非常に重要なポイント

これらのいくつかの記事で読んだものはすべて、スピーカー自身の努力と時間の結果であり、私はそれらをこれらの記事に変えることができるように学ぼうとしました.これらの記事に書かれている文章の多くでさえ、彼らが言ったことやスライドに書いたこととまったく同じです。つまり、何か新しいことを学べば、それは彼らの努力のおかげです。 （だから、間違った情報を見たら、私ではなく、彼らを責めますよね？xD）

最後になりましたが、一部分のスピーチでは、すべての技術的な詳細やライブ コーディングを掘り下げることはできません。しかし、興味があり、より多くの情報が不必要な場合は、私に知らせてください。より詳細な記事を別に書くようにします.また、Twitter/Linkedin も忘れずにチェックしてください。

では、会議のプログラムを見つけることができます。

---

機能する再利用可能なウィジェット！

- CVS Health のアクセシビリティ トレーニングの責任者兼アクセシビリティ エンジニアリングのシニア マネージャー

Vue.js は、再凭借或许なコンポーネントをすばやく構築できる素晴らしいフレームワークです。これを凭借して、ARIA (Accessible Rich Internet Application) の助けを借りて、アクセス或许で再凭借或许なウィジェットを構築できます。 ARIA の役割と特性を应用して、追加のセマンティクスを展示 することで、特殊の原因のアクセシビリティを往前させることができます。このトークでは、仕様に従い、アクセス或许で再凭借或许なタブ、アコーディオン、トグル ボタン、およびモーダル ダイアログを構築する形式について説明します。

モーダル

ARIA について知っておく必须があることはすべてで极其に文書化されており、読むことをお勧めしますが、ここではそれを虚化したバージョンを示します。

モーダルの設計に関する考慮事項

• ダイアログを閉じるボタンが必要です。
• ダイアログの外側のコンテンツは、灰色の背景などの視覚的なスタイルで隠す必要があります。
• ユーザーがダイアログの外でコンテンツを操作できないようにしてください。

モーダル オープニング フォーカス インタラクション

ダイアログが開くと、初期のフォーカス可以な因素、またはダイアログの上半部にある静的因素のいずれかにフォーカスを設定して、コンテンツを読みやすくし、すべてのコンテンツが指出されたままになるようにするか、インタラクションの場合は最も頻繁に应用される因素にフォーカスを設定できます。情報の具备または処理の継続に限制されます。

たとえば、モーダルを開いてアカウントを削除する操控があるとします。 「はい、アカウントを削除します」に真正のフォーカスを設定したくありません。

モーダル クローズ フォーカス インタラクション

ダイアログが閉じると、ダイアログを呼び出した基本概念にフォーカスが設定されます。または、暗示をなさない場合は、別の基本概念にフォーカスを設定できます。たとえば、呼び出し元の基本概念が长期存在しない場合に論理ワークフローを提供数据する基本概念などです。ダイアログタスクの结束了後にワークフローに後続のステップがある場合、特にダイアログをすぐに重新開く有很有可能が愈来愈に低い場合は、次の基本概念で。

モーダル キーボード インタラクション

タブ	modalLoop 内の次のタブ可能な要素にフォーカスを移動します最初の要素までループします
Shift + Tab	modalLoop で前のタブ概率な蔓延にフォーカスを移動する最後の蔓延までループする
エスケープ	ダイアログを閉じます

モーダルの技術的な考慮事項

ダイアログ コンテナには下面的が一定要です。

• の役割
• を true に設定。
• またはダイアログのタイトルを参照することで、支援技術がこの要素のネーミングを理解するのに役立ちます。
• オプションで、 を任意の説明に設定できます。

ダイアログを运行するために必不可少なすべての关键因素は、ダイアログの役割を持つ关键因素の子孫である必不可少があります。

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

Mac では、Command + F5 をクリックして、Mac のデフォルトのスクリーン リーダーである Voice Over をアクティブにできます。その後、ページに移動してテストできます。

また、chrome Dev-Tools には、優れたアクセシビリティ情報を含むアクセシビリティ タブがあります。これで、を開いて確認でき。コードは次のとおりです。

トグルボタン

已经な情報が有必要的な場合は、 Web サイトで見つけることができます。

ボタン

は、ユーザーがフォームの送信、ダイアログを開く、アクションのキャンセル、削除控制の実行などのアクションまたはイベントをトリガーできるようにするウィジェットです。

大多数のボタン ウィジェットに加えて、WAI-ARIA は 2 種類のボタンをサポートしています。

• トグルボタン
• メニューボタン

トグル ボタンの設計上の考慮事項

オフ (押されていない) またはオン (押されている) のいずれかになる 2 つの状態のボタン。

ボタンがトグル ボタンであることを增援技術に伝えるには、攻击力の値を指定的します。

トグルのラベルは、状態が変化しても変化してはなりません。デザインでラベルが変更された場合、aria-pressed 防御力は必需ありません。

トグルボタンのフォーカス処理

• ボタンをアクティブ化しても現在のコンテキストが閉じられない場合、アクティブ化後もフォーカスはボタンに残ります。
• ボタンをアクティブにしてダイアログを開いたり閉じたりする場合は、ダイアログ パターンに従います。
• ボタン アクションがコンテキストの変更を示している場合は、そのアクションの開始点にフォーカスを移動できます。
• ボタンがショートカット キーでアクティブ化された場合、フォーカスは通常、ショートカット キーがアクティブ化されたコンテキストに残ります。

トグル ボタン キーボード インタラクション

入る	ボタンをアクティブにします
スペース	ボタンをアクティブにします

トグル ボタンの技術的な考慮事項

• トグル ボタンには、の役割が有需要です。
• ボタンにアクセシブルな名前が付けられていることを確認してください。
• を多种の説明に設定できます。
• アクションが利用できない場合は、 セットを true に追加できます。
• トグル ボタンには状態があります。

  
  

 <button aria-pressed="false"> Mute </button>

これがあなたがチェックアウトできる良いであり、にコードがあります。

アコーディオン

に全なドキュメントがあります。その主なポイントを見てみましょう。

アコーディオンの設計上の考慮事項

それぞれがコンテンツのセクションを表すタイトル、コンテンツ スニペット、またはサムネイルを含むインタラクティブな見出しの平行定位に積み重ねられたセット

アコーディオン ヘッダー:

コンテンツのセクションを说道するためのコントロールとしても機能し、一步の実装ではコンテンツのセクションを非说道にする、コンテンツのセクションを表すラベルまたはサムネイル。

アコーディオンパネル:

アコーディオン ヘッダーに関連付けられたコンテンツのセクション。

アコーディオンのキーボード操作

Enter またはスペース	関連付けられた折りたたまれたパネルを展開し、必要に応じて他の開いている panelCollapses 関連付けられた展開されたパネルを折りたたみます。実装が許可する場合。
タブ	フォーカスを次のフォーカス可能な基本特征に移動します
Shift + Tab	前のフォーカス将会な因素にフォーカスを移動します
下矢印 (オプション)	アコーディオン ヘッダーから次のアコーディオン ヘッダーにフォーカスを移動します。有必要に応じて、初始のアコーディオン ヘッダーにループ バックします。
上向き矢印 (オプション)	アコーディオン ヘッダーから前のアコーディオン ヘッダーにフォーカスを移動します オプションで最後のアコーディオン ヘッダーにループ バックします
ホーム (オプション)	アコーディオン ヘッダーから最先のアコーディオン ヘッダーにフォーカスを移動します。
終了 (オプション)	アコーディオン ヘッダーから最後のアコーディオン ヘッダーにフォーカスを移動します。

アコーディオンの技術的考慮事項

各アコーディオン ヘッダー ボタンに之下があることを確認します。

• 見出しで囲んだ
• 対応するアコーディオン パネル コンテンツの ID に設定された
• 対応するパネル コンテンツが表示されている場合は、 を true に設定します
• アコーディオンの折りたたみが許可されていない場合は、 を true に設定します。
• 各パネル コンテンツには、対応するヘッダー ボタンに対するとがあります (オプション)
• あまりにも多くのランドマーク領域を作成する状況では、領域の役割を使用しないでください

アコーディオンのコード例

<h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

良いとそのを次に示します。

タブ

でタブの压根なドキュメントを符合できます。

タブの設計に関する考慮事項

タブは、タブ パネルと呼ばれるコンテンツの階層化されたセクションのセットであり、1吨水に 1 つのコンテンツ パネルを表述します。

タブ リスト: 要素に含まれる一連のタブ要素

タブ:タブ パネルの 1 つのラベルとして機能し、そのパネルを表示するためにアクティブにできるタブ リスト内の要素

タブ パネル: タブに関連付けられたコンテンツを含む要素

関連付けられたタブ パネルが顕著な待ち時間なしで表示法される限り、フォーカスを受け取ったときにタブを自動的にアクティブにすることをお勧めします。

タブ キーボード操作

タブ	ユーザーがタブ リストに移動したときに、アクティブなタブ要素にフォーカスを置きます。
左矢印 (的水平タブ)
上矢印 (纵向タブ)	フォーカスを前のタブに移動します。最後のタブへのループオプションで、新しくフォーカスされたタブをアクティブにします
右矢印 (平行タブ)
下矢印 (保持竖直タブ)	フォーカスを次のタブに移動します。最早のタブへのループオプションで、新しくフォーカスされたタブをアクティブにします
スペースまたはエンター	タブがフォーカス時に自動的にアクティブ化されなかった場合、タブをアクティブ化します
Shift + F10	ポップアップ メニューが関連付けられているタブにフォーカスがある場合、メニューを開く

タブ オプションのキーボード操作

ホーム (オプション)	フォーカスを最初のタブに移動オプションで、新しくフォーカスされたタブをアクティブにします
終了（同一）	フォーカスを最後のタブに移動オプションで、新しくフォーカスされたタブをアクティブにします
削除(オプション)	削除が許可されている場合、現在のタブ关键因素とそれに関連付けられているタブ パネルを削除 (閉じ) し、閉じられたタブの次のタブにフォーカスを設定し、オプションで新しくフォーカスされたタブをアクティブにします

タブの技術的な考慮事項

Tablist の役割:一連のタブを含む要素には、 またはが必要です。

タブの役割: タブとして機能する要素には、関連する tabpanel にペアリングされたが必要です。アクティブなタブには、状態 aria-selected が true に設定されている必要があります。他のすべてのタブは false に設定されます。

また、tab 环境要素にポップアップ メニューがある場合は、プロパティ aria-haspopup を menu または true に設定する有必要的があります。

Tabpanel の役割:タブのコンテンツ パネルを含む要素は、関連付けられたタブとペアになっている aria-labelledby を持ち、aria-orientation を垂直または水平 (デフォルト) に設定する必要があります。

タブのコード例

<div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

良いとそのを次に示します。

資力

ここでは、さまざまなコンポーネントを含む充分な Vue コード例を見つけることができます。

---

第5話終了

この要素を楽しんでいただければ幸いです。私にとってのように、あなたにとっても価値があります。今後数日かけて、残りのトークを各有します。乞うご期许…

も掲載されています。