>  > KC TECHNICA アトレー S220 2WD シャトルGTSサスキット

KC TECHNICA アトレー S220 2WD シャトルGTSサスキット

送料無料エルフ NPR75N 用 フロントブレーキパッド左右 PA491 (CAC)/専用グリス付に関するガイドライン。WCAG2.1がベースとなっている。

※ガイドライン中のプログラムのコード例は、分かりやすさのため本来は必要な記述を省略していることがある。コード例をそのまま使用しないように注意すること。

目次
  1. 1 知覚できる
    1. 1.1 代替テキスト
      1. 1.1.1 画像に代替テキストを提供する
    2. 1.2 動画、音声に代替コンテンツを提供する
      1. 1.2.1 収録済の音声及び動画に代替コンテンツを提供する
    3. 1.3 様々な閲覧環境に適応できるようにする
      1. 1.3.1 情報及び関係性
      2. 1.3.2 意味のある順序
      3. 1.3.3 感覚的な特徴に依存しない
    4. 1.4 判別できる
      1. 1.4.1 色だけで伝えない
      2. 1.4.2 音声を制御する
      3. 1.4.3 コントラストを確保する
  2. 2 操作できる
    1. 2.1 さまざまなデバイスでの操作
      1. 2.1.1 キーボード、タッチデバイスでの操作
      2. 2.1.2 シンプルな操作で操作できるようにする
      3. 2.1.3 特定のデバイスの機能に依存しない
      4. 2.1.4 タッチターゲットサイズ
    2. 2.2 十分な時間
      1. 2.2.1 コンテンツの制限時間
      2. 2.2.2 自動再生するコンテンツを一時停止、停止、非表示にできるようにする
    3. 2.3 発作の防止
      1. 2.3.1 フラッシュさせない
    4. 2.4 ナビゲーション
      1. 2.4.1 繰り返す情報のスキップ
      2. 2.4.2 ページタイトル
  3. 3 理解できる
    1. 3.1 読みやすさ
      1. 3.1.1 ページの言語
    2. 3.2 予測できる
      1. 3.2.1 ユーザーの意図しない変更をしない
    3. 3.3 入力を支援する
      1. 3.3.1 エラーの特定
      2. 3.3.2 入力欄のラベルまたは説明
  4. 4 堅牢性
    1. 4.1 互換性
      1. 4.1.1 構文解析
      2. 4.1.2 名前・役割、及び値

S220 アトレー 2WD シャトルGTSサスキット アトレー KC TECHNICA シャトルGTSサスキット

コンテンツやUIをユーザーが知覚できる方法で提供する。

1.1 代替テキスト

1.1.1 画像に代替テキストを提供する
ガイドラインの意図

装飾ではないコンテンツとしての画像には、その画像の代わりとなるテキスト(代替テキスト)を提供する。

実装方法 / 解説

良くない実装

<img> 要素に alt 属性が無い。

<img src="fresh.jpg" />

意味のある画像を背景画像にしている。

<div style="background-image: url(fresh.jpg)"></div>

良い実装

<img> 要素の alt 属性に代替するテキストを設定している。

<img src="fresh.jpg" alt="FRESH LIVE" />

困った時

WAI-ARIAaria-label 属性を使用する。

<div style="background-image: url(fresh.jpg)" aria-label="FRESH LIVE" role="img"></div>

解説

※入力欄やボタンについては 3.3.2 入力欄のラベルまたは説明 を参照のこと

テスト・チェック方法
  1. ESlintによる自動チェック
    1. eslint-plugin-jsx-a11y/accessible-emoji
    2. eslint-plugin-jsx-a11y/img-has-alt
    3. eslint-plugin-jsx-a11y/iframe-has-title
  2. コードレビューによるチェック

1.2 動画 グロリア用 リレーオートライトシーマセドリック/グロリア 25237-0P020 日産純正部品、音声に代替コンテンツを提供する

1.2.1 収録済の音声及び動画に代替コンテンツを提供する
ガイドラインの意図
実装方法 / 解説

実装方法

代替コンテンツはコンテンツの前後に配置する、またはそれと分かる形でリンクするなどして提供する。

例外

ライブ配信のコンテンツ。ただし、可能な限り字幕の提供を行う。リアルタイムにテキストデータへと変換して提供することはコストがかかるが、聴き逃しした場合や環境の変化に強く、聴覚障害を持ったユーザー以外の利便性も高められる。

解説

1.3 様々な閲覧環境に適応できるようにする

情報、及び構造を損なうことなく、様々な方法で利用できるようにコンテンツを提供すること。

1.3.1 情報及び関係性

コンテンツやUI、及びそれらの関係性をテキストで提供するか、プログラムによる解釈ができるようにする。

実装方法 / 解説

解説

「プログラムによる解釈ができる」は、主にブラウザや検索エンジンなどのUA(ユーザーエージェント)が理解できるか、と考えて良い。

実装

適切な要素を用いてマークアップし、適切な属性を使用する。次に挙げるのは代表的な例で以下に限らない。

テスト方法
達成によるメリット

様々なデバイスやUAにコンテンツが正確に伝えられるようになる。

1.3.2 意味のある順序

コンテンツの順番に意味がある場合は、正しく読む順番をプログラムが解釈できるようにする。

実装方法 / 解説
  1. DOMの順番と表示順を一致させる
  2. 単語内の文字間を空けるためなど、文書の整形にスペースを利用しない

解説 : 意味のある順序:達成基準 1.3.2 を理解する | WCAG 2.0解説書

テスト・チェック方法
1.3.3 感覚的な特徴に依存しない

コンテンツやUIの説明は、色や形、視覚的な位置や方向、音などの感覚的な特徴だけで説明しない。

ガイドラインの意図

コンテンツやUIの説明が感覚的な特徴に依存すると、その感覚が使用できない場合や、コンテキストが変化した場合に利用が難しくなるため。

何より、明確なテキストラベルで対象を指示することは分かりやすさに繋がりすべてのユーザーにとって使いやすくなる。

実装方法 / 解説

良くない例

視覚的な位置のみで説明している。

次に進むにはページ右下のボタンをクリックしてください

形のみで説明している。

OKなら丸いボタンをクリック、キャンセルは四角いボタンをクリックしてください

良い例

形や位置だけでなく、テキストによる説明も付け加える。

次に進むにはページ右下の「次へ」というボタンをクリックしてください。
OKなら丸いOKと書かれたボタンを、キャンセルは四角いキャンセルとかかれたボタンをクリックしてください

解説

テスト・チェック方法

1.4 判別できる

コンテンツを、ユーザーにとって見やすく聞きやすいものにすること。

1.4.1 色だけで伝えない

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段としない。

実装方法 / 解説

良くない例

色の違いだけで、必須項目やエラー項目を示す

<label class="Label -required">電話番号
<input type="tel" required />
</label>
.Label.-required {
 color: red;
}
<p>20文字以上500文字以内で入力してください。</p>
<textarea></textarea>
<p><span class="NumCounter__Input -invalid">19</span>/500</p>
.NumCounter__Input.-invalid {
 color: red;
}

良い例

KC TECHNICA アトレー のみ』 S220 2WD シャトルGTSサスキット ブラック/リムポリッシュ

色だけでなくテキストでも必須項目やエラーであることを示す。

<label class="Label -required">電話番号(必須)
<input type="tel" required />
</label>
<p>20文字以上500文字以内で入力してください。</p>
<textarea></textarea>
<p><span class="NumCounter__Input -invalid">19</span>/500</p>
<p>入力文字が不足しています。20文字以上入力してください。</p>

解説

テスト・チェック方法
1.4.2 音声を制御する

可能な限り音声を自動的に再生しない。音声が自動的に再生される場合は、音声を停止、またはコンテンツの音量を調整できるメカニズムを提供する。

  1. ユーザーが望む(と予想できる)際に限って音声を自動的に再生する
  2. 動画プレイヤーには音声の調整ボタン、ミュートボタンを搭載する
テスト・チェック方法
1.4.3 コントラストを確保する

コンテンツやUI上のテキストやアイコンと背景に適切なコントラスト比を持たせる(4.5:1以上を推奨)。ただし、次の場合は除くが、可能な限りコントラスト比を確保する。

実装方法 / 解説

良くない例

現在のFRESH LIVEのカラースキームで推奨コントラスト比を満たしていないの組み合わせ。

--gray--whiteのコントラスト比は2.7:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptatum maxime voluptates quo aspernatur reiciendis, illo in tenetur. Minus odit aperiam ratione corporis nesciunt repellat cum vitae libero eius fuga!

--gray-darkest--blueのコントラスト比は4.2:1 ※太字 or 大きな文字サイズであればOK

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aliquid incidunt fuga porro accusantium quaerat, doloremque autem magnam, aliquam fugit maiores. Aliquid a iste sapiente. Asperiores veniam placeat eaque, aperiam!

--white--blueのコントラスト比は3:1 ※太字 or 大きな文字サイズであればOK

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, natus, odit. Dolor harum recusandae optio provident temporibus vero possimus quam itaque consequuntur, qui cum officiis at ducimus. Reiciendis quasi, temporibus.

--gray-deepest--redのコントラスト比は4:1 ※太字 or 大きな文字サイズであればOK

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam obcaecati sint dicta sunt reprehenderit laudantium modi velit distinctio. Id facilis odio ipsum itaque vel saepe cumque iste ex, veniam obcaecati.

--gray-darker--greenのコントラスト比は3.7:1 ※太字 or 大きな文字サイズであればOK

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi aliquam aut nesciunt vitae sequi quas commodi eveniet debitis, fugiat laborum architecto illum, totam in! Nemo eum, sequi porro hic cumque.

最低限確保できているカラースキームの組み合わせ

--gray-darker--whiteのコントラスト比は9.1:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptatum maxime voluptates quo aspernatur reiciendis, illo in tenetur. Minus odit aperiam ratione corporis nesciunt repellat cum vitae libero eius fuga!

--gray-deep--blueのコントラスト比は4.78:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aliquid incidunt fuga porro accusantium quaerat, doloremque autem magnam, aliquam fugit maiores. Aliquid a iste sapiente. Asperiores veniam placeat eaque, aperiam!

--black--redのコントラスト比は4.7:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam obcaecati sint dicta sunt reprehenderit laudantium modi velit distinctio. Id facilis odio ipsum itaque vel saepe cumque iste ex, veniam obcaecati.

--white--redのコントラスト比は4.5:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam obcaecati sint dicta sunt reprehenderit laudantium modi velit distinctio. Id facilis odio ipsum itaque vel saepe cumque iste ex, veniam obcaecati.

--gray-darkest--greenのコントラスト比は5.1:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi aliquam aut nesciunt vitae sequi quas commodi eveniet debitis, fugiat laborum architecto illum, totam in! Nemo eum, sequi porro hic cumque.

解説

テスト・チェック方法
  1. Sketch デザインデータをプラグインでチェックする
  2. デザインレビューによるチェック

※プラグインでは文字サイズと太字が考慮されないので注意する。

2 操作できる

UIコンポーネント及びナビゲーションは操作可能でなければならない。

2.1 さまざまなデバイスでの操作

2.1.1 キーボード、タッチデバイスでの操作

コンテンツやUIのすべての機能は、キーボードやタッチインタフェースで操作できるようにする。

実装方法 / 解説

良くない実装例

フォーカスを受け取れない要素への click イベントの付与や :hover 擬似クラスのみを利用したコンテンツの出し分けなど。

<div onclick="...">
 content...
 </div>

良い実装例

フォーカスを受け取れる要素の使用、tabindex 属性の付与、:focus 擬似クラスの併用など。

<button type="button" onclick="...">
 content...
</button>

HTMLのフォームコントロール、及びリンクを使用する

解説

マウスのみを想定しているUIでは、他のデバイスから使用できないことが多くあるが、キーボードやタッチデバイスでの操作を担保することで他のデバイスによる操作もカバーしやすくなる。

キーボード : 達成基準 2.1.1 を理解する | WCAG 2.0解説書

例外

※ドラッグ&ドロップ操作は軌跡に依存しないので、この例外には当てはまらない。

テスト・チェック方法
2.1.2 シンプルな操作で操作できるようにする

コンテンツやUIのすべての機能は、複雑な操作に依存せずシンプルな操作で操作できるようにする。

実装方法 / 解説

複雑な操作例 :

  1. 10秒以内に abab を入力しないと出てこないメニュー
  2. →+↓p を0.3秒以内に入力しないと出ない必殺技
例外

デバッグモードへの移行など、ユーザーには秘匿した形で機能を提供する場合は例外とする。ただしその場合もチームメンバーの開発者の使用デバイスを考慮し慎重に行うこと。

2.1.3 特定のデバイスの機能に依存しない

コンテンツやUIのすべての機能は、デバイスの特定の機能(タッチの圧力センサや、傾きセンサ)などに依存しなくても使用できるようにする。

実装方法 / 解説

良くない実装例

iOS のフォースタッチでのみ動作するメニュー。

良い実装

他の操作方法に切り替える OR 代替の動作方法を提供する。

例外
2.1.4 タッチターゲットサイズ

ポインティングのターゲットサイズは、タッチインタフェース向けUIでは 44×44 px以上を確保する。

実装 / 解説

解説

タッチインタフェースにおいて、1つの指でタップするのにターゲットサイズが小さすぎると快適に操作できない。また視線入力デバイスなどのユーザービリティも向上する。

ハーティーラダーでWeb閲覧 - YouTube

例外
テスト・チェック方法

2.2 十分な時間

ユーザーがコンテンツを読み、機能を使用するために十分な時間を提供すること。

2.2.1 コンテンツの制限時間

コンテンツに制限時間を設けない。

例外
実装方法 / 解説

解説

自動更新するコンテンツ(ニュースティッカーやカルーセル)も、一種の制限時間付きのコンテンツと考えられる。

2.2.2 自動再生するコンテンツを一時停止、

KC TECHNICA アトレー S220 2WD シャトルGTSサスキット,[#tong##]

アトレー S220 2WD シャトルGTSサスキットメーカー:ケイシーテクニカ KC TECHNICA メーカーケイシーテクニカ備考【アトレー S220 シャトルGTSサスキット (車高調)】■ストリート対応/車検対応■ノーマルアッパーマウント付の「ボルトオン」セット (1台分)■車高調整用レンチ付 (※車高調レンチはデザインが変わる場合があります)【フロント】■直巻バネ(130mm)・アッパー&ロアシート・倒立ラム式ダンパー・リアスプリング・リアショック・調整式ピロアッパーマウントのセット (1台分)■最大ダウン量:ノーマルより約100mmダウン (フルタップ式で車高は自由に変更可能です)■減衰力12段調整式:フロント 2700/1200~1200/420n■バネレート:6kg■フルタップ倒立式【リア】■ショートストローク■最大ダウン量:ノーマルより約50mmダウン■減衰力14段調整式:1145/354~345/225n■バネレート:5.5k【注意事項】※4WD車は取付不可です。【適合車種】  アトレー 2WD【型式】  S220車種S220/230 アトレーAS商品コードkct86426110001発注・納期について・発注の仕組み 当店では、商品名中に【即納】【在庫処分品】表記のない商品は、注文後メーカーへ発注します。 従いまして、商品によっては納期が長くなる場合がございます。・納期について【即納】【在庫処分品】: 概ね1週間以内 それ以外のもの: 2週間以上 ※発注後はキャンセルができません。 ※注文を頂いた後、納期のご連絡をしております。 ※納期確認後に注文を確定するかキャンセルするかを決定したい場合には、  注文時に「納期連絡の際に希望されるご対応」から希望のものをお選びください。キーワードアトレーワゴン atrai s220g s230g ダイハツ DAIHATSU ダイハツアトレーワゴン DAIHATSUアトレーワゴン ダイハツS220 アトレーワゴン ダイハツS220アトレーワゴン DAIHATSUS220 アトレーワゴン DAIHATSUS220アトレーワゴン ダイハツATRAI WAGON ダイハツATRAIWAGON DAIHATSUATRAI WAGON DAIHATSUATRAIWAGON、KCテクニカ KC TECHNICA、Suspension kit/adjustable/サスペンションキット/ 車高調整/足回/足周、エアロパーツ チューニングパーツ アフターパーツ AERO

、停止、非表示にできるようにする

動きのあるコンテンツが自動で開始され、また他のコンテンツと並行して表示される場合、ユーザーが一時停止、停止、または非表示にできるようにする。

実装方法 / 解説

動きのあるコンテンツ = アニメーション、点滅、スクロール、コンテンツの自動更新も含む。

ウェブページの中に動作し続けるコンテンツがあると、その他のコンテンツの利用の妨げとなる。特に注意力欠如障害のユーザーなどはウェブページ全てを利用できない可能性がある。

例外

2.3 発作の防止

発作を引き起こすようなコンテンツを設計しないこと。

2.3.1 フラッシュさせない

ウェブページには、1秒間に3回を超える閃光を放つものがない、又は閃光が一般閃光閾値及び赤色閃光閾値を下回っている。

実装方法 / 解説

一般閃光閾値及び赤色閃光閾値 (general flash and red flash thresholds)

あらゆる1秒間において、 一般閃光及び/又は赤色閃光 は3回以下である。もしくは、一般的な閲覧距離で、同時に生じている閃光が占める領域の合計が、画面上のどの視野10度においても、合計0.006ステラジアン (画面上の視野10度の25%) よりも多くを占めていない。

ここで: 一般閃光とは、暗いほうの相対輝度が0.80未満であるときの、最大相対輝度の10%以上の相対輝度の交互の変化のことである。ここでいう「交互の変化」とは、増加した後に減少する、又は減少した後に増加するものを指す。そして、 赤色閃光とは、彩度の高い赤色を含んだ交互の遷移のことである。 例外: ホワイトノイズ又は1辺が (典型的な閲覧距離における視野の) 0.1度未満の市松模様のように、細かくて整っている模様の閃光は、閾値を超えることにはならない。

3回の閃光 Abflug フェアレディZ Z32 Rear Spoiler ver. 01、又は閾値以下:達成基準 2.3.1 を理解する

2.4 ナビゲーション

ユーザーがコンテンツを探し出したり、現在位置を確認したりする手助けをする。

2.4.1 繰り返す情報のスキップ

複数のページ上で繰り返されている情報(ナビゲーションやサイトロゴなど)をスキップするメカニズムが利用できる。

実装方法 / 解説

解説

必ずしもスキップリンクを設置する必要はなく、ウェブブラウザ標準の機能が利用できるように適切なマークアップを使用することで達成できる。マークアップによる達成方法は下記の通り。

事例

ニュースを配信する組織のホームページには、広告、検索、その他のサービスのためのたくさんのブロック及びサイドバーに囲まれて、ページの中央にメインの記事がある。ページの先頭に 18インチラフェスタ ハイウェイスターCW(B35)系 全グレードAXEL  アクセル フォー ブラックポリッシュ 7.5Jx18ADVAN ネオバAD08R 215/40R18、そのメインの記事へジャンプするリンクがある。このリンクを使わないと、キーボードを使用している利用者は、メインの記事へ到達するまでに Tab キーを押下しながら40前後のリンクを通り抜ける必要がある。また、スクリーンリーダーの利用者は、200の単語を聞かなければならない。そして、画面拡大ソフトの利用者は、メインの記事の場所を探し回らなければならなくなる。

ブロックスキップ : 達成基準 2.4.1 を理解する | WCAG 2.0解説書

2.4.2 ページタイトル

ウェブページには、主題又は目的を説明したタイトルがある。

実装方法 / 解説

HTMLの <title> 要素に、適切なタイトルを他のページと重複することなく記述すること。

ページタイトル : 達成基準 2.4.2 を理解する | WCAG 2.0解説書

3 理解できる

3.1 読みやすさ

ユーザーや、ユーザーが使用するプログラムにとって理解しやすいような記述にする。

3.1.1 ページの言語

それぞれのウェブページのデフォルトの自然言語がどの言語であるか、プログラムによる解釈が可能である。

実装方法 / 解説

<html> 要素に lang 属性を記述する。

<!DOCTYPE html>
<html lang="ja">

3.2 予測できる

3.2.1 ユーザーの意図しない変更をしない

ユーザーが予想できないタイミングでページ全体に及ぶような変更や現在地の移動を引き起こさない。

例外
実装方法 / 解説

解説

ユーザーが予想できないタイミング = マウスホバーやキーボードフォーカスを当てるだけなど。

ホバーやキーボードフォーカスは、操作の前段階でありそのタイミングで重要な変化を引き起こすとユーザーが混乱してしまう。

良くない実装例

良い実装例

クリックやエンターキーによる実行で変更を起こす。

3.3 入力を支援する

3.3.1 エラーの特定

入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーがユーザーにテキストで説明される。

実装方法 / 解説

良くない実装例

スタイルのみでエラーであることを示し、エラーの内容が分からない。

<label> ふりがな
<input type="text" class="Input -invalid" />
</label>
.Input.-invalid {
border: 2px solid red;
}

良い実装例

テキストでエラーの内容が明示されている。

<label> ふりがな
<input type="text" class="Input -invalid" />
</label>
<p>ふりがなはひらがなかカタカナで入力してください</p>

※スタイルでも合わせて明示することを否定するものではない。

解説

3.3.2 入力欄のラベルまたは説明

ユーザーの入力を要求するUIには ブリヂストン ECOPIA エコピア NH100 9月末迄 サマータイヤ 225/45R17 WEDS ウェッズ Leonis レオニス VX ホイールセット 4本 17インチ 17 X 7 +42 5穴 114.3、ラベル又は説明文を提供する。

実装方法 / 解説

良くない実装方法

placeholder 属性を入力内容の説明に使用する。

<input type="text" placeholder="コメントを入力する" />

placeholder 属性での説明では入力が開始されると非表示になり、ユーザーを混乱させてしまう。

良い実装方法

近接する位置に説明を置き、 <label> 要素を用いて関連づける。

<label> コメントを入力する
<input type="text" />
</label>

入力欄の隣に明確なラベルづけされたボタンを配置し、入力欄の説明とする。

<input type="search" />
<button type="submit">検索</button>

説明と入力欄で構成されている節では、説明を見出しとし関連を可視化する。

<section>
<h2>ご意見・ご要望</h2>
<form>
<textarea></textarea>
<button type="submit">送信する</button>
</form>
</section>

解説

4 堅牢性

コンテンツは、支援技術を含む様々なUAが確実に解釈できるよう十分に堅牢 (robust) でなければならない。

4.1 互換性

未知のものを含む、さまざまなユーザーエージェントとの互換性を高めること。

4.1.1 構文解析

HTML、及び構築するDOMは、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どのIDも一意的にする。ただし、仕様で認められているものを除く。

構文解析 : 達成基準 4.1.1 を理解する | WCAG 2.0解説書

4.1.2 名前・役割、及び値

ユーザーが操作するすべてのUI(フォームを構成する要素、リンクなど)では、名前 (name) 及び役割 (role) は、プログラムによる解釈が可能である。又、状態、プロパティ、ユーザーが設定可能な値はプログラムによる設定が可能である。そして、支援技術を含むUAが、これらの項目に対する変更通知を利用できる。

実装方法 / 解説

良くない実装方法

HTMLにある要素を利用せず、<div><span> を利用する。

<span class="Button">button</span>

良い実装例

HTMLで定義されている要素を使用する。HTMLに適切な要素がない場合、

KC TECHNICA アトレー S220 2WD シャトルGTSサスキット

、WAI-ARIA で定義されている role 属性で適切なものがあればそれを指定する。

<button class="Button">button</button>
<button role="tab" class="Tab">Tab</button>

解説

{yahoojp}jpprem01-zenjp40-wl-zd-53527