Webflowで簡単に到達できる要素

スクリーン リーダーとキーボードでアクセス可能な Webflow 要素について学習します。

デザイナーの要素の追加パネルから、コンポーネント(セグメント、タブ、ビジュアルなど)を見つけてプロジェクトに統合するオプションがあります。 アクセス可能 以下の表では、カスタム コードを必要とせずにスクリーン リーダーとキーボード ナビゲーションをサポートしています。ただし、キーボードで完全に操作できるようにするには、特定の要素にフォーカスを示すスタイルを適用する必要があります。

タブ、ドロップダウン、スライダー、およびナビゲーション バーの各コンポーネントにキーボードから完全にアクセスできるようにするには、フォーカスされた状態でフォーカス スタイル (「視覚フォーカス」と呼ばれる) を確立することが不可欠です。こうすることで、パワー ユーザーや運動能力が制限されているユーザーなど、キーボードを使用してナビゲーションするユーザーが、サイト内を簡単に移動できるようになります。視覚フォーカスには、ナビゲーション中にアクティブな要素を視覚的に表示することが含まれており、キーボード ナビゲーションに依存するユーザーにとって非常に重要です。フォーカスされた状態のスタイル設定の詳細については、関連リソースを参照してください。

また、要素のテキスト コンテンツと要素またはページの背景色の間の適切な色のコントラストを維持することで、これらのコンポーネントがアクセス可能であることを保証することもできます。コントラスト比に関する詳細な情報は、こちらでご覧いただけます。

成分スクリーンリーダー(ARIA)+キーボードアクセス可能

タブ

アクセス可能*
適用する 集中状態 スタイルオン:
1. タブリンクまたはすべてのリンク

落ちる

アクセス可能*
適用する 集中状態 スタイルオン:
1. ドロップダウントグル
2. ドロップダウンリンクまたはすべてのリンク

写真

アクセス可能

ボタン、リンクブロック

アクセス可能

セグメント

アクセス可能

ボタン、リンクブロック

アクセス可能

リスト

アクセス可能

コレクション一覧

アクセス可能

ナビゲーションバー

アクセス可能

スライダー

アクセス可能*
適用する 集中状態 スタイルオン:
1. 左矢印
2. 右矢印
3. スライダードット(.w-slider-dot:focus CSS を手動で設定)

検索

アクセス可能

ライトボックス

アクセス可能

ビデオ、YouTube、背景ビデオ

アクセス可能

地図

アクセス可能

ファイルのアップロード

アクセス可能

構造

アクセス可能

オンライン ショッピング (カート、カートに追加、オンライン支払い、PayPal、チェックアウト)

アクセス可能

ソーシャルネットワーク(Facebook、Twitter)

アクセス可能

フィードバックの提供

Webflowのアクセシビリティに関する継続的なフィードバックをお待ちしております。フィードバックを提供するには、当社のチームにメールでお問い合わせください。 アクセシビリティ@webflow.com.

また、私たちや他のユーザーとつながることを奨励します。 Webflow フォーラムあなたのアイデアを Webflow ウィッシュリスト、あなた自身とウェブサイト訪問者の両方にとってよりアクセスしやすい製品の作成に貢献できます。

ユアン・マック