いらっしゃいませ！ 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 が開催されました。

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

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

非常に重要なポイント

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

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

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

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

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

Vue.js は、再利用可能なコンポーネントをすばやく構築できる素晴らしいフレームワークです。これを利用して、ARIA (Accessible Rich Internet Application) の助けを借りて、アクセス可能で再利用可能なウィジェットを構築できます。 ARIA の役割と属性を使用して、追加のセマンティクスを提供することで、特定の要素のアクセシビリティを向上させることができます。このトークでは、仕様に従い、アクセス可能で再利用可能なタブ、アコーディオン、トグル ボタン、およびモーダル ダイアログを構築する方法について説明します。

モーダル

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

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

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

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

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

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

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

ダイアログが閉じると、ダイアログを呼び出した要素にフォーカスが設定されます。または、意味をなさない場合は、別の要素にフォーカスを設定できます。たとえば、呼び出し元の要素が存在しない場合に論理ワークフローを提供する要素などです。ダイアログタスクの完了後にワークフローに後続のステップがある場合、特にダイアログをすぐに再度開く可能性が非常に低い場合は、次の要素で。

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

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

ダイアログ コンテナには以下が必要です。

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

ダイアログを操作するために必要なすべての要素は、ダイアログの役割を持つ要素の子孫である必要があります。

 <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 には、優れたアクセシビリティ情報を含むアクセシビリティ タブがあります。

これで、この例を開いて確認できます。コードは次のとおりです。

トグルボタン

完全な情報が必要な場合は、 W3C Web サイトで見つけることができます。

ボタン

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

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

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

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

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

ボタンがトグル ボタンであることを支援技術に伝えるには、属性aria-pressedの値を指定します。

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

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

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

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

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

• トグル ボタンには、ボタンの役割が必要です。

• ボタンにアクセシブルな名前が付けられていることを確認してください。

• aria-modifiedbyを任意の説明に設定できます。

• アクションが利用できない場合は、 aria-disabledセットを true に追加できます。

• トグル ボタンにはaria-pressed状態があります。

  
  

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

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

アコーディオン

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

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

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

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

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

アコーディオンパネル:

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

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

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

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

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

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

<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>

良い例とそのコードを次に示します。

タブ

W3Cでタブの完全なドキュメントを参照できます。

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

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

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

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

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

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

タブ キーボード操作

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

タブの技術的な考慮事項

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

タブの役割: タブとして機能する要素には、関連する tabpanel にペアリングされたaria-controlsが必要です。アクティブなタブには、状態 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>

良い例とそのコードを次に示します。

資力

ARIA オーサリング プラクティス ガイド

Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.1

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

https://github.com/mlama007/ウィジェット

第5話終了

この部分を楽しんでいただければ幸いです。私にとってのように、あなたにとっても価値があります。

今後数日かけて、残りのトークを共有します。乞うご期待…

ここにも掲載されています。