スライドショーの耐え難い能力のない
アクセス可能なスライドショーの作成:包括的なガイド
スライドショーは組織のWebサイトで普及していますが、アクセシビリティの要件を見落としているため、アクセスできないことがよくあります。 BootstrapやFoundationなどの人気のあるWeb開発フレームワークは、アクセス可能なスライドショーを本質的にサポートしておらず、実質的な変更が必要です。この記事では、包括的なスライドショーを作成するための重要なアクセシビリティの原則の概要を説明します。 後続の記事では、実用的なコードの例を提供します
-
移動に対するユーザーの制御:WCAG 2.2.2は、5秒以上続く自動移動コンテンツを一時停止、停止、または非表示にするメカニズムを義務付けます。 簡単な一時停止/停止リンクが効果的です。可能であれば、アニメーショントランジションをそらすことは避けてください。
-
目に見えるコントロールとアクセス可能なコントロール:コントロール(停止、開始、ナビゲーション)は次のとおりです。
- はっきり目に見える:
- 十分に大きく、十分な色のコントラストを備えています。 キーボード、マウス、およびタッチを介してアクセス可能:
- ボタンまたはリンクが理想的です。
tabindex
クリアフォーカス/ホバー指標: 焦点の明確な視覚的変化、コントラストの要件を満たします。 シェイプの変化は、色の変化だけでも望ましいです
- よく設計されたコントロールの例は、AccessibilityOZ(図3&4)やグリフィス大学(図6)などのサイトにあり、デスクトップとモバイルの両方の明確な一時停止ボタンとナビゲーションコントロールを示しています。 Monash Universityは、自動ムーブメントなしでモバイルに優しいスライドショーの例を提供します(図5)。
-
論理フォーカス順序:タブ順序は、視覚的なレイアウトとHTML構造を反映する必要があります。コントロール(特に一時停止)はコンテンツの前にあります。 コンテンツの変更は、現在のフォーカス要素の前に発生しないでください
-
有効なコードとスタイル:スライドショーは、スタイルシートを無効にして機能する必要がありますが、プレゼンテーションは異なる場合があります。 StyleSheetが無効になっている場合、予期しないコンテンツのシフトやオーバーラップを避けてください。 テキストは、ブラウザのテキストサイズの調整でスケーリングする必要があります。モバイルバージョンは、ピンチからズームまでサポートする必要があります
- 意味のある代替手段:
スライドショーにアクセスできないユーザーにテキストベースの代替品を提供します。 これには、スライドコンテンツとリンクを繰り返す「スクリーンリーダーのみ」セクションが含まれ、理想的にはスライドショーが表示される場所に配置されます。 この代替案が、提供された情報の観点からスライドショーに相当することを確認してください。 画像には、適切な属性が必要です。
alt
本当にアクセスしやすいスライドショーを作成するには、これらの原則を慎重に検討する必要があります。 次の記事では、これらの目標を達成するための実用的なコード実装を提供します。 アクセス可能なスライドショーに関するよくある質問(FAQ)(このセクションは、貴重な補足情報を提供するため、元の入力からほとんど変化しません。)
アクセス可能なスライドショーは何ですか?スライドショーにアクセスできるようにするにはどうすればよいですか?
altテキストとは何ですか?なぜそれが重要なのですか?スライドショーにキャプションを追加するにはどうすればよいですか? キーボードナビゲーションが重要なのはなぜですか? どうすればスライドショーの言語を明確でシンプルにすることができますか? 転写産物とは何ですか?なぜそれが重要なのですか? スライドショー用の転写産物を作成するにはどうすればよいですか? 自動化されたツールを使用して、スライドショーにアクセスできるようにすることはできますか? スライドショーにアクセスできるようにすることの利点は何ですか?
以上がスライドショーの耐え難い能力のないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











このパイロットプログラム、CNCF(クラウドネイティブコンピューティングファンデーション)、アンペアコンピューティング、Equinix Metal、およびActuatedのコラボレーションであるCNCF GithubプロジェクトのARM64 CI/CDが合理化されます。 このイニシアチブは、セキュリティの懸念とパフォーマンスリムに対処します

このチュートリアルは、AWSサービスを使用してサーバーレスイメージ処理パイプラインを構築することをガイドします。 APIゲートウェイ、Lambda関数、S3バケット、およびDynamoDBと対話するECS Fargateクラスターに展開されたnext.jsフロントエンドを作成します。 th

これらのトップ開発者ニュースレターを使用して、最新のハイテクトレンドについてお知らせください! このキュレーションされたリストは、AI愛好家からベテランのバックエンドやフロントエンド開発者まで、すべての人に何かを提供します。 お気に入りを選択し、Relを検索する時間を節約してください
