Home > TagScript > html,cssテンプレート >  Bootstrap > Bootstrap 4 ドキュメントの和訳

アクセスしやすさ

新規作成日 2017-01-06
最終更新日

原文:Accessibility

アクセス可能な内容の作成するためのBootstrapの機能の概要と制限

Bootstrapは、既製のstyleの使いやすいフレームワーク、レイアウト・ツールと開発者が、webサイトと視覚的に魅力があり、機能が豊富です、そして、すぐにアクセスして使えるアプリケーションを作成できる対話的コンポーネントを提供します。

概要と制限

Overview and Limitations

Bootstrapで構築されたプロジェクトの全体のアクセスしやすさは、大部分は、作者のマークアップ、追加のスタイリング、そして、含まれているスクリプトに依存します。しかしながら、これらが正しく実装されていれば、第508条および類似のアクセシビリティ基準および要件、WCAG 2.0(A/AA/AAA)を満たすBootstrapを使ってwebサイトとアプリケーションを作成することは完全に可能なはずです。

構造的なマークアップ

Structural markup

Bootstrapのスタイルとレイアウトは、広範囲にわたるマークアップ構造に適用することができます。このドキュメントは、Bootstrapそれ自身の使い方を実演するために、潜在的なアクセスしやすさへの懸念に対処する方法を含む、適切な意味論的マークアップを説明するために、最も効率のよい練習の例を、開発者に、提供することを目指しています。

対話的なコンポーネント

Interactive components

モーダル・ダイアログ、ドロップダウン・メニューとカスタム・ツールチップのような、Bootstrapの対話的コンポーネントは、タッチ、マウスとキーボード・ユーザーのために動作するために設計されています。関連するWAI-ARIAの役割と属性を使用することにより、また、これらのコンポーネントは、(スクリーン・リーダーのような)支援技術を使用して、理解して、使用できる必要があります。

Bootstrapコンポーネントが、意図的に、かなり一般的に設計されているため、作成者は、それらのコンポーネントの正確な性質と機能をもっと正確に伝えるために、JavaScript動作だけでなく、さらにARIAの役割と属性を組み込む必要があるかもしれません。 これは通常、ドキュメントに記載されています。

色のコントラスト

Color contrast

ボタンのバリエーション、アラート・バリエーション、フォ-ム検証インジケータのようなもののためのフレームワークを通して使用される現在のBootstrapのデフォルトのパレットを構成するほとんどの色は、明色の背景に対して使用されるとき、不十分な色のコントラストに案内します(以下の、推奨されたWCAG 2.0色は4.5:1のコントラスト比率です)作成者は、十分な色のコントラスト比率を確実にするために手作業でこれらのデフォルトの色を修正して/拡張する必要があります。

視覚的に隠された内容

Visually hidden content

内容は、視覚的に隠す必要がありますが、支援技術にアクセス可能なままです。例えば、スクリーン・リーダーは、.sr-onlyクラスを使用してスタイルを整えることができます。これは、更なる外観の情報で役立つことがあります。あるいは、キュー(例えば、色を使用して表示する意味)は、また、非ビジュアル・ユーザーに伝える必要があります。

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

従来の"skip"リンクのような、視覚的に隠れた対話的コントロールのために、.sr-onlyは、.sr-only-focusableクラスで結合することができます。これは、それを確実にコントロールします。(キーボードが見えるユーザーのため)、フォーカスした後、見えるようになります。

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

追加のリソース

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」