いらっしゃいませ！ 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 も忘れずにチェックしてください。 では、会議のプログラムを見つけることができます。 ここ 機能する再利用可能なウィジェット！ - CVS Health のアクセシビリティ トレーニングの責任者兼アクセシビリティ エンジニアリングのシニア マネージャー Maria Lamardo Vue.js は、再利用可能なコンポーネントをすばやく構築できる素晴らしいフレームワークです。これを利用して、ARIA (Accessible Rich Internet Application) の助けを借りて、アクセス可能で再利用可能なウィジェットを構築できます。 ARIA の役割と属性を使用して、追加のセマンティクスを提供することで、特定の要素のアクセシビリティを向上させることができます。このトークでは、仕様に従い、アクセス可能で再利用可能なタブ、アコーディオン、トグル ボタン、およびモーダル ダイアログを構築する方法について説明します。 モーダル ARIA について知っておく必要があることはすべて で十分に文書化されており、読むことをお勧めしますが、ここではそれを抽象化したバージョンを示します。 W3C モーダルの設計に関する考慮事項 ダイアログを閉じるボタンが必要です。 ダイアログの外側のコンテンツは、灰色の背景などの視覚的なスタイルで隠す必要があります。 ユーザーがダイアログの外でコンテンツを操作できないようにしてください。 モーダル オープニング フォーカス インタラクション ダイアログが開くと、最初のフォーカス可能な要素、またはダイアログの上部にある静的要素のいずれかにフォーカスを設定して、コンテンツを読みやすくし、すべてのコンテンツが表示されたままになるようにするか、インタラクションの場合は最も頻繁に使用される要素にフォーカスを設定できます。情報の提供または処理の継続に限定されます。 たとえば、モーダルを開いてアカウントを削除する操作があるとします。 「はい、アカウントを削除します」に最初のフォーカスを設定したくありません。 モーダル クローズ フォーカス インタラクション ダイアログが閉じると、ダイアログを呼び出した要素にフォーカスが設定されます。または、意味をなさない場合は、別の要素にフォーカスを設定できます。たとえば、呼び出し元の要素が存在しない場合に論理ワークフローを提供する要素などです。ダイアログタスクの完了後にワークフローに後続のステップがある場合、特にダイアログをすぐに再度開く可能性が非常に低い場合は、次の要素で。 モーダル キーボード インタラクション タブ modalLoop 内の次のタブ可能な要素にフォーカスを移動します最初の要素までループします Shift + Tab modalLoop で前のタブ可能な要素にフォーカスを移動する最後の要素までループする エスケープ ダイアログを閉じます モーダルの技術的な考慮事項 ダイアログ コンテナには以下が必要です。 の役割 ダイアログ を true に設定。 aria-modal または ダイアログのタイトルを参照することで、支援技術がこの要素のネーミングを理解するのに役立ちます。 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 には、優れたアクセシビリティ情報を含むアクセシビリティ タブがあります。 これで、 を開いて確認でき 。コードは次のとおりです。 この例 ます トグルボタン 完全な情報が必要な場合は、 Web サイトで見つけることができます。 W3C ボタン は、ユーザーがフォームの送信、ダイアログを開く、アクションのキャンセル、削除操作の実行などのアクションまたはイベントをトリガーできるようにするウィジェットです。 ボタン 通常のボタン ウィジェットに加えて、WAI-ARIA は 2 種類のボタンをサポートしています。 トグルボタン メニューボタン トグル ボタンの設計上の考慮事項 オフ (押されていない) またはオン (押されている) のいずれかになる 2 つの状態のボタン。 ボタンがトグル ボタンであることを支援技術に伝えるには、属性 の値を指定します。 aria-pressed トグルのラベルは、状態が変化しても変化してはなりません。デザインでラベルが変更された場合、aria-pressed 属性は必要ありません。 トグルボタンのフォーカス処理 ボタンをアクティブ化しても現在のコンテキストが閉じられない場合、アクティブ化後もフォーカスはボタンに残ります。 ボタンをアクティブにしてダイアログを開いたり閉じたりする場合は、ダイアログ パターンに従います。 ボタン アクションがコンテキストの変更を示している場合は、そのアクションの開始点にフォーカスを移動できます。 ボタンがショートカット キーでアクティブ化された場合、フォーカスは通常、ショートカット キーがアクティブ化されたコンテキストに残ります。 トグル ボタン キーボード インタラクション 入る ボタンをアクティブにします スペース ボタンをアクティブにします トグル ボタンの技術的な考慮事項 トグル ボタンには、 の役割が必要です。 ボタン ボタンにアクセシブルな名前が付けられていることを確認してください。 を任意の説明に設定できます。 aria-modifiedby アクションが利用できない場合は、 セットを true に追加できます。 aria-disabled トグル ボタンには 状態があります。 aria-pressed <button aria-pressed="false"> Mute </button> これがあなたがチェックアウトできる良い であり、 にコードがあります。 例 ここ アコーディオン に完全なドキュメントがあります。その主なポイントを見てみましょう。 ここ アコーディオンの設計上の考慮事項 それぞれがコンテンツのセクションを表すタイトル、コンテンツ スニペット、またはサムネイルを含むインタラクティブな見出しの垂直方向に積み重ねられたセット アコーディオン ヘッダー: コンテンツのセクションを表示するためのコントロールとしても機能し、一部の実装ではコンテンツのセクションを非表示にする、コンテンツのセクションを表すラベルまたはサムネイル。 アコーディオンパネル: アコーディオン ヘッダーに関連付けられたコンテンツのセクション。 アコーディオンのキーボード操作 Enter またはスペース 関連付けられた折りたたまれたパネルを展開し、必要に応じて他の開いている panelCollapses 関連付けられた展開されたパネルを折りたたみます。実装が許可する場合。 タブ フォーカスを次のフォーカス可能な要素に移動します Shift + Tab 前のフォーカス可能な要素にフォーカスを移動します 下矢印 (オプション) アコーディオン ヘッダーから次のアコーディオン ヘッダーにフォーカスを移動します。必要に応じて、最初のアコーディオン ヘッダーにループ バックします。 上向き矢印 (オプション) アコーディオン ヘッダーから前のアコーディオン ヘッダーにフォーカスを移動します オプションで最後のアコーディオン ヘッダーにループ バックします ホーム (オプション) アコーディオン ヘッダーから最初のアコーディオン ヘッダーにフォーカスを移動します。 終了 (オプション) アコーディオン ヘッダーから最後のアコーディオン ヘッダーにフォーカスを移動します。 アコーディオンの技術的考慮事項 各アコーディオン ヘッダー ボタンに以下があることを確認します。 見出しで囲んだ 対応するアコーディオン パネル コンテンツの ID に設定された aria-controls 対応するパネル コンテンツが表示されている場合は、 を true に設定します aria-expanded アコーディオンの折りたたみが許可されていない場合は、 を true に設定します。 aria-disabled 各パネル コンテンツには、対応するヘッダー ボタンに対する と があります (オプション) ロール領域 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 つのラベルとして機能し、そのパネルを表示するためにアクティブにできるタブ リスト内の要素 タブ: に関連付けられたコンテンツを含む要素 タブ パネル: タブ 関連付けられたタブ パネルが顕著な待ち時間なしで表示される限り、フォーカスを受け取ったときにタブを自動的にアクティブにすることをお勧めします。 タブ キーボード操作 タブ ユーザーがタブ リストに移動したときに、アクティブなタブ要素にフォーカスを置きます。 左矢印 (水平タブ) 上矢印 (垂直タブ) フォーカスを前のタブに移動します。最後のタブへのループオプションで、新しくフォーカスされたタブをアクティブにします 右矢印 (水平タブ) 下矢印 (垂直タブ) フォーカスを次のタブに移動します。最初のタブへのループオプションで、新しくフォーカスされたタブをアクティブにします スペースまたはエンター タブがフォーカス時に自動的にアクティブ化されなかった場合、タブをアクティブ化します Shift + F10 ポップアップ メニューが関連付けられているタブにフォーカスがある場合、メニューを開く タブ オプションのキーボード操作 ホーム (オプション) フォーカスを最初のタブに移動オプションで、新しくフォーカスされたタブをアクティブにします 終了（任意） フォーカスを最後のタブに移動オプションで、新しくフォーカスされたタブをアクティブにします 削除(オプション) 削除が許可されている場合、現在のタブ要素とそれに関連付けられているタブ パネルを削除 (閉じ) し、閉じられたタブの次のタブにフォーカスを設定し、オプションで新しくフォーカスされたタブをアクティブにします タブの技術的な考慮事項 一連のタブを含む要素には、 または が必要です。 Tablist の役割: aria-labelledby aria-label タブの として機能する要素には、関連する tabpanel にペアリングされた が必要です。アクティブなタブには、状態 aria-selected が true に設定されている必要があります。他のすべてのタブは false に設定されます。 役割: タブ aria-controls また、tab 要素にポップアップ メニューがある場合は、プロパティ aria-haspopup を menu または true に設定する必要があります。 タブのコンテンツ パネルを含む要素は、関連付けられたタブとペアになっている aria-labelledby を持ち、aria-orientation を垂直または水平 (デフォルト) に設定する必要があります。 Tabpanel の役割: タブのコード例 <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 この部分を楽しんでいただければ幸いです。私にとってのように、あなたにとっても価値があります。 今後数日かけて、残りのトークを共有します。乞うご期待… も掲載されています。 ここに
