ユーザー補助

キーボードナビゲーション

キーボードナビゲーションのサポートは、ウェブサイトのアクセシビリティの基本的な要素です。これにより、運動障害、視覚障害、一時的な怪我など、マウスを使用できないユーザーでも、ウェブサイトを操作できるようになります。

すべてのインタラクティブ要素、 リンク, ボタン, フォームフィールドは、Tab キーを使用してアクセスでき、論理的なタブ順序と、現在選択されている要素を示す目に見えるフォーカス インジケーターを備えている必要があります。

最新バージョンで構築されたウェブサイト Blocs、次のキーボードナビゲーションコントロールをサポートします ウェブブラウザで閲覧する場合.

エスケープキー

• ドロップダウンを閉じます。
• モーダルを閉じます。
• ライトボックスを閉じます。
• 全画面メニューを閉じます。

左矢印キーと右矢印キー

• ライト ボックスをナビゲートします (前方と後方)。
• タブを移動します (前方と後方)。

リターンキー

• 選択したボタンまたはリンクをクリックします。
• 選択したメニュー/ドロップダウンを開きます。

スペースキー

• 選択したボタンをクリックします。
• 選択したメニュー/ドロップダウンを開きます。
• チェックボックスの選択を切り替えます (チェックあり/チェックなし)。
• ラジオの選択を切り替えます（オプションを選択します）。

タブキー

• 選択範囲を前へ移動します。

Shift + Tabキー

• 選択範囲を後方に移動します。

フォーカスインジケーター

キーボードを使用して Web サイトをナビゲートする場合、フォーカス インジケーターがはっきりと表示され、現在選択されている要素をユーザーが簡単に確認できるようにすることが重要です。 Blocs 内蔵 アクセシビリティの強化 この機能を有効にすると、 および (Comma Separated Values) ボタンをクリックして、各々のジョブ実行の詳細（開始/停止時間、変数値など）のCSVファイルをダウンロードします。 フォーカス状態。この機能強化により、キーボードユーザーがサイトを効率的に操作しやすくなり、キーボード入力に依存するユーザーにとってより快適なエクスペリエンスが確保されます。

アクセシビリティラベル

ウェブサイトでアクセシビリティラベルを使用することは、WCAG（ウェブコンテンツアクセシビリティガイドライン）に準拠し、スクリーンリーダーなどの支援技術を利用するユーザーを含むすべてのユーザーがコンテンツにアクセスできるようにするために不可欠です。重要な要素の一つは、説明的なラベルを使用することです。 ALT 画像にタグを付けることで、視覚的なコンテンツを見ることができないユーザーにも意味のある文脈を提供することができます。 Blocs画像の代替テキストの設定は簡単です。デザイン キャンバスで画像を選択したら、サイドバー インスペクタの関連するテキスト フィールドを使用するだけです。

さらに、 aria-label および アリアラベル付き 属性は、アイコンやボタンなどの可視テキストを持たない要素にラベルを付けるのに役立ちます。これにより、スクリーン リーダーがそれらの機能を明確に伝えることができます。
ウェブサイトを構築する場合 Blocs、これらのアクセシビリティ属性を手動で追加するには、 カスタムデータ属性これにより、支援技術がコンテンツをどのように解釈し、読み上げるかを完全に制御できるようになります。

色のコントラスト

ウェブページを構築する際には、次の点を考慮することが重要です。 色のコントラスト および 色覚異常 すべてのユーザーがコンテンツにアクセスできるようにします。テキストと背景色の適切なコントラストは、特に視力の弱い方や色覚異常のある方にとって読みやすさに不可欠です。 Blocs 内蔵が含まれています 視覚障害シミュレーションフィルター 様々な視覚条件でサイトをプレビューできる機能です。これにより、問題のある色の組み合わせを簡単に特定して調整できるため、よりインクルーシブでアクセシビリティの高いウェブサイトをデザインできます。

Structure

セマンティックHTMLタグの使用、例えば ヘッダ, メイン, , NAV, フッターは、アクセシブルなウェブサイトを構築する上で重要な考慮事項です。これらのタグはコンテンツに構造と意味を与え、スクリーンリーダーなどの支援技術がページレイアウトを解釈し、より効果的にナビゲートできるようにします。

In Blocs、セマンティックコンテナタグをサイトの各セクションに割り当てることができます。 コンテナタグ オプション。これにより、アクセシビリティが向上するだけでなく、ウェブサイトが整理され、SEOも向上します。