ダイアログコンポーネント：ネイティブHTMLに移動するか、独自のHTMLを転がしますか？

私のagnosticuiライブラリの堅牢なダイアログ（モーダル）コンポーネントを構築することは、最近魅力的な道を歩みました。私の最初の計画は、完全に独立したコンポーネントを作成し、新しいコンポーネントを作成することでした<dialog></dialog>アクセシビリティの利点の要素。しかし、徹底的な調査の後、私はキティ・ジラウデルのA11y-dialogライブラリを選択し、VUE 3、Svelte、およびAngularのアダプターを作成しました（Reactアダプターはすでに存在します）。この決定は、ネイティブの慎重な検討に起因しています<dialog></dialog>要素の制限。

ネイティブ<dialog></dialog>要素：重要な評価

ネイティブ中<dialog></dialog>要素は約束を示し、積極的に改善されています。いくつかの現在の欠点は私の決定に影響を与えました。

1. バックドロップクリック処理：外部をクリックすると、デフォルトの動作がダイアログを閉じません。
2. alertdialogの役割の非互換性：ユーザーの相互作用を必要とし、背景/ESC閉鎖を防止するために不可欠な重要なalertdialog ariaの役割は、正しく機能しません。
3. ::backdrop擬似要素の制限：このスタイリング要素はdialog.showModal()がプログラムで使用される場合にのみ使用できます。
4. スタイリングの矛盾：デフォルトのスタイルはブラウザに依存しており、JavaScriptの介入が必要であり、「純粋なHTML」の利点を損ないます。

アダム・アーガイルのネイティブとの建物に関する素晴らしい投稿<dialog></dialog>貴重な回避策を提供しますが、私のニーズのために、複雑さは利点を上回りました。

ダイアログコンポーネントのアクセシビリティ要件の定義

これらの重要なアクセシビリティ基準を満たすために必要な私のAgnosticuiダイアログコンポーネント：

1. 背景/ESC閉鎖：背景クリックまたはESCキープレスを介して閉じます。
2. フォーカストラップ：コンポーネントの外側のタブの防止。
3. 双方向タブ：フォワード（タブ）と後方（タブのシフト）タブをサポートします。
4. フォーカス修復：閉鎖時に以前にアクティブな要素に焦点を当てます。
5. 正しいARIA属性： ARIA属性とトグルの適切な適用。
6. ポータル（フレームワーク固有）： JavaScriptフレームワークのポータルのサポート。
7. alertdialogの役割サポート：アラートシナリオの正しく取り扱います。
8. ボディスクロール予防：オプションで基礎となるボディスクロールを防止します。
9. ネイティブを避けます<dialog></dialog>落とし穴：ネイティブ要素の制限に対処します。
10. カスタムスタイリングとprefers-reduced-motion ：カスタムスタイリングを許可し、ユーザーの好みを尊重します。

スコット・オハラとキティの記事は、アクセス可能なダイアログの作成に深いダイブを提供します。これらの要件は、ネイティブにのみ依存することの限界を明確に強調しました<dialog></dialog>要素。

アクセシビリティのためのa11y-dialogの監査

A11Y-Dialogを統合する前に、徹底的なアクセシビリティ監査を実行しました。

• 手動検証：ブラウザ全体で機能をテストします。
• 自動ツーリング：灯台、IBM Equal Access Accessibility Checker、Deque's Axe、およびWaveを利用します。
• スクリーンリーダーのテスト：ジョー、NVDA、およびナレーションを使用します。
• ユーザーテスト：（理想的には、実際のユーザーとのテスト）。

Deque Systemsの調査は、自動化されたツールがアクセシビリティの問題の約57％しかキャッチしていないことを示しており、手動テストとユーザーフィードバックの重要性を強調しています。単純なローカルHTMLページを使用して、フレームワークの複雑さをテストするコンポーネントを分離しました。

監査により、A11Y-Dialogの堅牢性とアクセシビリティ要件の順守が確認されました。

フレームワーク固有のダイアログコンポーネントの考慮事項

多くのフレームワークは、独自のダイアログコンポーネントを提供しています。私はそれらのすべてを個人的に監査していませんが、ここにいくつかのリソースと観察があります：

• Angular： Dequeの2020年の監査では、強力な候補としてNGX-Bootstrapが強調表示されました。
• React： Reakit、Chakra-UI、材料、リーチ/ダイアログ、 @React-Aria/ダイアログは探索する価値があります。
• Vue： Vuetensils、Vuetify、およびPrimevue（著名なフォーカス修復の問題を伴う）はオプションです。
• Svelte： Svelte-Headlessui、Svelterial's Material Port、およびSvelte-A11y-Dialog（特にカスタムコンポーネントの作成に役立ちます）。
• ブートストラップ：アクセシビリティコンプライアンスのための手動の手順が必要です。

私のAgnosticuiライブラリは、クロスフレームワークの互換性にA11y-Dialogアダプターを使用しています。

カスタム設計システムの構築：努力の重さ

設計システムのカスタムダイアログコンポーネントを作成するには、アクセシビリティのニュアンスを大幅に努力し、慎重に検討する必要があります。実行可能ですが、エラーのリスクは高く、A11y-Dialogのような既存の十分にテストされたソリューションを活用することは、しばしばより効率的で信頼性が高いことを証明します。 A11y-Dialogのような堅牢なプラグインを使用して、一貫したクロスブラウザーエクスペリエンスが魅力的であることを確実にするというスコットオハラのアドバイスが魅力的です。

結論

A11y-Dialogを利用するという私の選択は、VUE 3、Svelte、およびAngularアダプターの作成と相まって、アクセシビリティと効率を優先しました。カスタムコンポーネントを構築することはオプションでしたが、エラーの可能性とA11Y-Dialogの既存の品質により、それは優れた選択になりました。この旅は、徹底的なアクセシビリティ監査の重要性と、手入れの行き届いたライブラリを活用することの価値を強調しました。 A11Y-Dialogの適応性は、その機能を拡張して引き出しコンポーネントを作成し、ライブラリ内でさらにその価値を固めました。

以上がダイアログコンポーネント：ネイティブHTMLに移動するか、独自のHTMLを転がしますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。