wat tutorial
アクセシビリティテストのためのWATまたはWebアクセシビリティツールバーチュートリアル：
アクセシビリティテストツール の前のチュートリアルで詳細に説明されました アクセシビリティテストシリーズ 。
WAT（Webアクセシビリティツールバー） –はのツールバーです InternetExplorerブラウザおよびその他のブラウザ – Webコンテンツアクセシビリティガイドラインバージョン2（WCAG 2.0）への準拠についてWebページを評価するのに役立ちます。
WATツールの使い方は？
お願いします ここからダウンロードしてインストールします 。
インストールが正常に完了すると、アドレスバーのすぐ下に追加のWebアクセシビリティツールが表示されます。
これについては、EAsportsのWebサイト（http://www.easports.com）を利用して学習します。
＃1）ページタイトル –ブラウザのウィンドウタイトルバーまたはタブタイトルバーでページタイトルバーを確認できます。タブにマウスを合わせると、ページタイトル情報が表示されます。
URL http://www.easports.comを入力し、マウスをホバーしてタブタイトルバーのページタイトルを確認します。
＃2）色 –Webサイトの色はColorContrastAnalyserに渡される必要があります。
色の比率を決定するための3つの異なる適合レベル、つまりレベルA、AA、およびAAAがあります。
AAまたはAAAのパスを取得する必要があります 。
「A」は低レベルのアクセシビリティを表し、「AA」は中レベルのアクセシビリティを表し、「AAA」は最高レベルのアクセシビリティを表します。
URLを入力してくださいhttp：//www.easports.comi ツールバーで、(色)タブをクリックし、(コントラストアナライザー)を選択して確認します。
＃3）見出し –見出しは、ページのコンテンツの効果的な概要を提供します。すべてのページは、H1またはH2の見出しで始まる必要があります。見出しのテキストは大きく、太字にし、Webページでマークアップする必要があります。また、ページは「h1」で始まり、各ページに少なくとも1つの見出しが必要です。
見出しの構造を確認するには、http：//www.easports.comをクリックしてください。 (構造)タブを選択し、見出しの構造をクリックして確認します。それはあなたにすべての見出しタイトルの詳細を与えるでしょう。また、見出しが正しくネストされているかどうかも調べます。
＃4）画像の代替テキスト – alt属性は、すべての主要なブラウザーでサポートされています。すべての画像には、代替テキストが関連付けられている必要があります。画像にカーソルを合わせると、alt属性の値がツールチップとして表示されます。これにより、画像を表示できない場合に画像の代替情報が提供されます。
URLを入力してください http://www.easports.com、(画像の表示)をクリックして、画像に代替テキストが使用できるかどうかを確認します。
以下のポップアップが表示されます。
上記の詳細が表示されます。
＃5）タブオーダー –タブシーケンスの順序は、論理的かつ適切に表示される必要があります。 Tabキーをクリックすると、さまざまなリンクに移動できます。タブ順序インジケーターを選択すると、リンクの近くに数が表示され、特定のリンクに到達するためにタブキーをクリックする必要がある回数が示されます。
タブの順序を確認するには、URLhttp：//www.easports.comをクリックしてください。 、(構造)をクリックして、タブ順序インジケーターを選択します。
＃6）リスト –リストは適切な構造で表示される必要があります。リストは常にチェックして、リスト項目が実際に1つのリストに含まれていることを確認する必要があります。リストには次の2つの形式があります。 順序付けられました リストと 注文なし リスト 。 順序付けられていないリストは、 要素と順序付きリストは、
素子。
URLを入力してくださいhttp：//www.easports.comi ツールバーで、構造をクリックして(リストアイテム)を選択し、リストの順序を確認します。
順序付けされていないリストの例：
順序付きリストの例：
＃7）コントラスト 比 –デフォルトで最小のコントラストが必要です。 Webブラウザーでは、必要に応じてテキストと背景の色を変更できるようにする必要があります。
GoogleのURLを入力してください https://www.google.co.in/をクリックし、画像をクリックして、Juicy Studio LuminosityAnalyserを選択します。
結果の表を含む「ColorContrastAnalyzer」というタイトルの新しいウィンドウが開きます。最後の列は明度コントラスト比です。
c ++スタックデータ構造
＃8）ラベル –ラベルは正しく表示される必要があります。
URLを入力 https://www.google.co.in/そしてツールバーでStructureをクリックし、オプションとしてfieldset / labelsを選択します。フィールドセットとラベルの詳細が表示されます。
＃9）基本 構造 小切手 –このチェックでは、画像、スタイル、レイアウトのないWebページを確認します。
ツールバーで、(画像)、(画像の削除)の順にクリックします。
次に、CSSを選択し、(CSSを無効にする)をクリックします。
最後に(テーブル)をクリックし、(線形化)を選択します。
練習の時間：
ここで、サンプルのアクセシビリティテストタスクを見てみましょう。もちろん、ソリューションは提供されています。ただし、答えに進む前に、これを自分で試してみることをお勧めします。
見出し、代替テキストを含む画像、タブ順序インジケーター、色のコントラストを確認します http://www.cbssports.com
解決： InternetExplorerのURLhttp：//www.cbssports.comをクリックします。
見出しを確認するには、(構造)をクリックし、(見出し構造)を選択して見出しを確認します。
見出しはH1にはありません。すべての見出しは下半期にあります。
代替テキストを確認するには、(画像)をクリックし、(画像を表示)を選択して、画像に代替テキストが含まれているかどうかを確認します。
altテキストが含まれている画像と、alt属性がない画像はほとんどありません。代替テキストのない画像の詳細がポップアップで表示され、代替テキストのある画像の詳細が画像の近くに表示されます。
例えばalt =” Search CBS Sports.com”テキストは検索アイコンの近くに表示され、alt =” CBSSports.com”テキストはファンタジーロゴの近くに表示されます。
タブ順序インジケーターを確認するには、(構造)をクリックして、(タブ順序インジケーター)を選択します 。
カウントはリンクの近くに表示され、その特定のリンクをクリックできるようになる試みを示します。たとえば、一番上のNFLリンクをクリックするには、キーボードからタブボタンを13回押す必要があります。
最後に色のコントラストを確認し、色をクリックして(コントラストアナライザー)を選択します。
テキストはダブルA、つまりAAで渡されます。
そこで、これはウェブサイトのアクセシビリティを評価する方法です。