アクセシビリティ

アクセシブルなコンテンツを作成するためのBootstrapVueの機能と制限の簡単な概要。

概要と制限

BootstrapVueは、ほとんどのインタラクティブコンポーネントに対して適切なアクセシビリティマークアップを自動的に追加します。ただし、BootstrapとBootstrapVueで構築されたプロジェクト全体のアクセシビリティは、主に作成者のマークアップ、追加のスタイル設定、および含まれるスクリプトに大きく依存します。ただし、これらが正しく実装されていれば、BootstrapVueを使用して、 WCAG 2.0 (A/AA/AAA)、Section 508、および同様のアクセシビリティ標準と要件を満たすWebサイトおよびアプリケーションを作成することが完全に可能です。

構造的なマークアップ

BootstrapVueのカスタムコンポーネントは、アクセシブル/セマンティックな生成されたHTMLマークアップをすぐに利用できるように最適化されています。このドキュメントは、開発者がBootstrap自体の使用法を示し、アクセシビリティに関する潜在的な懸念に対処する方法など、適切なセマンティックマークアップを示すためのベストプラクティスの例を提供することを目的としています。

ほとんどのコンポーネントドキュメントページには、ベストプラクティスと制限事項を示すアクセシビリティセクション（または複数のセクション）が含まれています。

インタラクティブコンポーネント

BootstrapVueのインタラクティブコンポーネント（モーダルダイアログ、ドロップダウンメニュー、カスタムツールチップなど）は、タッチ、マウス、キーボードユーザー向けに設計されています。関連する WAI-ARIA ロールと属性を使用することにより、これらのコンポーネントは支援技術（スクリーンリーダーなど）を使用しても理解および操作できるようになるはずです。

BootstrapVueのコンポーネントは意図的に非常にジェネリックになるように設計されているため、作成者は、コンポーネントの正確な性質と機能をより正確に伝えるために、さらにARIAロールと属性、およびJavaScriptの動作を含める必要がある場合があります。これは通常、ドキュメントに記載されています。

色のコントラスト

現在、Bootstrap V4のデフォルトパレットを構成するほとんどの色（ボタンのバリエーション、アラートのバリエーション、フォームの検証インジケーターなどのフレームワーク全体で使用されるもの）は、明るい背景で使用すると、不十分な色のコントラスト（推奨されるWCAG 2.0の4.5:1の色コントラスト比を下回る）になります。作成者は、十分な色のコントラスト比を確保するために、これらのデフォルトの色を手動で変更/拡張する必要があります。

BootstrapのSCSSをカスタマイズするには、テーマセクションを参照してください。

視覚的には非表示にする必要があり、スクリーンリーダーなどの支援技術にはアクセス可能なままにする必要があるコンテンツは、.sr-onlyクラスを使用してスタイル設定できます。これは、追加の視覚情報や手がかり（色の使用によって示される意味など）を、視覚的なユーザー以外にも伝える必要がある場合に役立ちます。

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

従来の「スキップ」リンクなど、視覚的に非表示のインタラクティブコントロールの場合、クラス.sr-onlyを.sr-only-focusableクラスと組み合わせることができます。これにより、コントロールは（視覚的なキーボードユーザー向けに）フォーカスされると表示されるようになります。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

モーションの削減

Bootstrapには、prefers-reduced-motionメディア機能のサポートが含まれています。ユーザーがモーションの削減を優先するように指定できるブラウザー/環境では、BootstrapのほとんどのCSSトランジション効果（たとえば、モーダルダイアログが開閉されたり、カルーセルのスライドアニメーションが行われたりする場合）が無効になります。

アニメーションやトランジションが機能することを期待しているのに機能しない場合は、オペレーティングシステムのコントロールパネルでモーション削減（アニメーションなし）設定が有効になっている可能性があります。

アプリケーションのアクセシビリティのテスト

デプロイする前に、アプリのアクセシビリティをテストすることを強くお勧めします。一部の国では、すべてのWebサイトにアクセス可能であることを義務付ける法律さえあることに注意してください。

Webアプリをアクセシブルにする際に考慮すべき主な点は2つだけです。

適切なキーボードの動作を定義します。BootstrapVueは、ほとんどのコンポーネントにキーボードコントロールを提供しますが、カスタムコンポーネントもキーボードでアクセスできることを確認する必要があります。
スクリーンリーダーがアプリを理解できるようにします。Bootstrapは、ほとんどの場合、コンポーネントに正しいroleおよびaria-*属性を自動的に設定します。また、すべてのカスタムコンポーネントが正しいロールと属性を提供していることを確認する必要があります（可能な場合はセマンティックHTML要素とマークアップを使用してください）。

テストのために行うべき手順

キーボードのみを使用して、すべてのインタラクティブコンポーネントに到達して制御できるかどうかを確認します。コントロールにフォーカススタイルがあることを確認して、ユーザーがどのインタラクティブ要素にいるかを知ることができるようにします。キーボードユーザーは、要素のhover状態をトリガーできないことに注意してください。
スクリーンリーダー（キーボードのみと組み合わせて）を使用して、アプリをナビゲートし、操作します。さまざまなオペレーティングシステムやブラウザーで使用できる無料のスクリーンリーダーがいくつかあります。スクリーンリーダーのユーザーは、聞こえるものしか「見えない」ことに注意してください。
ブラウザーのズームレベル（および/またはフォントサイズ）を大きくした場合に、アプリがどのように表示され、動作するかを確認します。