スライドショーの耐え難い能力のない

アクセス可能なスライドショーの作成：包括的なガイド

スライドショーは組織のWebサイトで普及していますが、アクセシビリティの要件を見落としているため、アクセスできないことがよくあります。 BootstrapやFoundationなどの人気のあるWeb開発フレームワークは、アクセス可能なスライドショーを本質的にサポートしておらず、実質的な変更が必要です。この記事では、包括的なスライドショーを作成するための重要なアクセシビリティの原則の概要を説明します。 後続の記事では、実用的なコードの例を提供します

一般的なスライドショータイプ（図1および2）は、頻繁に重要な機能を欠いています。能力の一時停止とキーボードのアクセシビリティ。 多くのデザインは、スライドをナビゲートするときにキーボードのフォーカスを維持できません。

5つのコア原則は、アクセス可能なスライドショーを保証します：

1. 移動に対するユーザーの制御：WCAG 2.2.2は、5秒以上続く自動移動コンテンツを一時停止、停止、または非表示にするメカニズムを義務付けます。 簡単な一時停止/停止リンクが効果的です。可能であれば、アニメーショントランジションをそらすことは避けてください。

2. 目に見えるコントロールとアクセス可能なコントロール：コントロール（停止、開始、ナビゲーション）は次のとおりです。

   はっきり目に見える：
   • 十分に大きく、十分な色のコントラストを備えています。
   キーボード、マウス、およびタッチを介してアクセス可能：
   • ボタンまたはリンクが理想的です。 tabindexクリアフォーカス/ホバー指標：
   焦点の明確な視覚的変化、コントラストの要件を満たします。 シェイプの変化は、色の変化だけでも望ましいです
   • よく設計されたコントロールの例は、AccessibilityOZ（図3＆4）やグリフィス大学（図6）などのサイトにあり、デスクトップとモバイルの両方の明確な一時停止ボタンとナビゲーションコントロールを示しています。 Monash Universityは、自動ムーブメントなしでモバイルに優しいスライドショーの例を提供します（図5）。

3. 論理フォーカス順序：タブ順序は、視覚的なレイアウトとHTML構造を反映する必要があります。コントロール（特に一時停止）はコンテンツの前にあります。 コンテンツの変更は、現在のフォーカス要素の前に発生しないでください

4. 有効なコードとスタイル：スライドショーは、スタイルシートを無効にして機能する必要がありますが、プレゼンテーションは異なる場合があります。 StyleSheetが無効になっている場合、予期しないコンテンツのシフトやオーバーラップを避けてください。 テキストは、ブラウザのテキストサイズの調整でスケーリングする必要があります。モバイルバージョンは、ピンチからズームまでサポートする必要があります

5. 意味のある代替手段：

   スライドショーにアクセスできないユーザーにテキストベースの代替品を提供します。 これには、スライドコンテンツとリンクを繰り返す「スクリーンリーダーのみ」セクションが含まれ、理想的にはスライドショーが表示される場所に配置されます。 この代替案が、提供された情報の観点からスライドショーに相当することを確認してください。 画像には、適切な属性が必要です。 alt

結論：

本当にアクセスしやすいスライドショーを作成するには、これらの原則を慎重に検討する必要があります。 次の記事では、これらの目標を達成するための実用的なコード実装を提供します。 アクセス可能なスライドショーに関するよくある質問（FAQ）（このセクションは、貴重な補足情報を提供するため、元の入力からほとんど変化しません。）

アクセス可能なスライドショーは何ですか？

スライドショーにアクセスできるようにするにはどうすればよいですか？

altテキストとは何ですか？なぜそれが重要なのですか？

スライドショーにキャプションを追加するにはどうすればよいですか？ キーボードナビゲーションが重要なのはなぜですか？ どうすればスライドショーの言語を明確でシンプルにすることができますか？ 転写産物とは何ですか？なぜそれが重要なのですか？ スライドショー用の転写産物を作成するにはどうすればよいですか？ 自動化されたツールを使用して、スライドショーにアクセスできるようにすることはできますか？ スライドショーにアクセスできるようにすることの利点は何ですか？

以上がスライドショーの耐え難い能力のないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。