アクセス可能なアコーディオンウィジェットの紹介-SitePoint

この記事では、障害のある個人のユーザーエクスペリエンスを向上させるために設計されたアクセス可能なアコーディオンウィジェットであるA11yaccordionを紹介します。 同様のウィジェット、特にjQueryアコーディオンの一般的なアクセシビリティの欠点に対応しています。

主要な機能と改善：

拡張キーボードナビゲーション：
• a11yaccordionは、マウスを使用できないユーザーにシームレスなキーボードナビゲーションを可能にします。 ユーザーは、ウィジェットのヘッダーを簡単にタブできます。
スクリーンリーダーの互換性：
• スクリーンリーダーは、検索結果に基づいて動的に更新されたタイトルを含むすべてのコンテンツを正確に読み取ります。 オープンソース＆カスタマイズ可能：
ウィジェットのソースコードはGitHubで利用でき、コミュニティの貢献とカスタマイズを促進します。 プログラム制御用のJavaScript APIが含まれています
• 一般的なアクセシビリティの問題に対処します：ウィジェットは、ヘッダーを介してタブができないなど、既存のアコーディオンウィジェットに見られる問題に直接取り組んでいます。
• 開発の背景：

A11yaccordionは、オープンソースの学習管理システムであるAtutor Project内のニーズに由来しています。 目標は、コースデータを管理するためのアクセス可能なアコーディオンを作成し、アクセシビリティ基準へのコンプライアンスを確保することでした。

始めましょう：

a11yaccordionはgithubで入手できます。 プロジェクトにcss（

）およびjavascript（

）ファイルを含めます。 ウィジェットを使用した単純な例を以下に示します：

javaScript初期化：

dist/css/a11yAccordion.css dist/js/a11yAccordion-0.2.2.min.js結果として得られるアコーディオンの視覚的な例は、ここに示されています：

<ul class="a11yAccordion" id="Accordion1">
  <li class="a11yAccordionItem">
    <div class="a11yAccordionItemHeader">
      <strong>></strong>Random Months<strong>></strong>
    </div>
    <div class="a11yAccordionHideArea">
      <ul>
        <li>January</li>
        <li>June</li>
        <li>February</li>
        <li>November</li>
      </ul>
    </div>
  </li>
  <!-- ... more accordion items ... -->
</ul>

ウィジェットオプションとAPI：

var myAccordion = a11yAccordion({
  parentSelector: '#Accordion1'
});

ウィジェットには、親コンテナ、ヘッダー、非表示領域のセレクターなど、いくつかの構成オプションがあります。スタイリングオプション。アニメーション速度;および検索機能。 JavaScript APIは、個々の行を崩壊させ、拡大し、切り替える機能を提供します。

将来の開発と貢献：

は大幅に改善されていますが、プログラマティックな行の無効化を追加するなど、さらなる開発が計画されています。 開発者とデザイナーからの貢献は大歓迎です。

よくある質問（FAQ）：（これらは簡潔さのために要約されています）

FAQは、ユーザーエクスペリエンスの改善、ARIAの役割、キーボードアクセシビリティ、回避する一般的な間違い、メソッドのテスト、SEOの利点、CSSスタイリング、アコーディオンとタブの違い、レスポンシブデザイン、JavaScriptの強化などのトピックをカバーしています。 >

以上がアクセス可能なアコーディオンウィジェットの紹介-SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。