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

主要な機(jī)能と改善：

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

A11yaccordionは、オープンソースの學(xué)習(xí)管理システムであるAtutor Project內(nèi)のニーズに由來しています。 目標(biāo)は、コースデータを管理するためのアクセス可能なアコーディオンを作成し、アクセシビリテ?；鶞?zhǔn)へのコンプライアンスを確保することでした。

始めましょう：

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

）およびjavascript（

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

javaScript初期化：

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

<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'
});

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

將來の開発と貢獻(xiàn)：

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

よくある質(zhì)問（FAQ）：（これらは簡(jiǎn)潔さのために要約されています）

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

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