ホームページ テクノロジー周辺機器 IT業界 スライドショーの耐え難い能力のない

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

Feb 20, 2025 pm 12:03 PM

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

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

The Unbearable Inaccessibility of Slideshows

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

The Unbearable Inaccessibility of Slideshows The Unbearable Inaccessibility of Slideshows

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

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

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

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

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

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

  3. 意味のある代替手段:

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

結論:

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

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

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

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

CNCF ARM64パイロット:インパクトと洞察 CNCF ARM64パイロット:インパクトと洞察 Apr 15, 2025 am 08:27 AM

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

AWS ECSとLambdaを備えたサーバーレス画像処理パイプライン AWS ECSとLambdaを備えたサーバーレス画像処理パイプライン Apr 18, 2025 am 08:28 AM

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

2025年に購読する上位21の開発者ニュースレター 2025年に購読する上位21の開発者ニュースレター Apr 24, 2025 am 08:28 AM

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

See all articles