>  > スプーン リジカラ リア ランディ SNC25 50300-T31-000 取付セット アライメント込 SPOON リジットカラー【店頭受取対応商品】

スプーン リジカラ リア ランディ SNC25 50300-T31-000 取付セット アライメント込 SPOON リジットカラー【店頭受取対応商品】

【送料無料】 245/40R20 20インチ LEHRMEISTER LM-S トレント15 (ガンメタブラッククリア) 8.5J 8.50-20 DELINTE デリンテ D7 サンダー(限定) サマータイヤ ホイール4本セットに関するガイドライン。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 名前・役割、及び値

SNC25 リジカラ スプーン ランディ アライメント込 取付セット リジットカラー【店頭受取対応商品】 SPOON スプーン 50300-T31-000 リア 取付セット

コンテンツや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 動画 【謝恩セール】ドライブチェーン RKジャパン GPシリーズGP520X-XW [シルバー]  124L ホンダ シャドウ400 ’00~、音声に代替コンテンツを提供する

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;
}

良い例

スプーン 右:S019、左:S020 リジカラ リア ランディ SNC25 50300-T31-000 取付セット 05-10トヨタタコマビレットグリルコンボ上+下 アライメント込 SPOON リジットカラー【店頭受取対応商品】

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

<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 自動再生するコンテンツを一時停止、

スプーン リジカラ リア ランディ SNC25 50300-T31-000 取付セット アライメント込 SPOON リジットカラー【店頭受取対応商品】通販正規販売店


ダイハツ NSLN-W62 2012年モデル BLITZ(ブリッツ)TV JUMPER(テレビ ジャンパー) 純正ナビ 走行中にテレビが見れる TST72 ブリッツ テレビジャンパー


スプーン リジカラ リア ランディ SNC25 50300-T31-000 取付セット アライメント込 SPOON リジットカラー【店頭受取対応商品】 フィット用 ハーネスインストルメントワイヤーフィットシャトル 32117-TD8-Z10

↓↓↓FORMA フォーマ NERO 85W ライディングブーツ ブラック 41 26.0cm;【USA在庫あり】 バイカーズチョイス Biker's Choice フロント フェンダー 49年-84年 FL 493360 HD;【USA在庫あり】 メンフィスシェード Memphis Shades ウインドシールド ファット 13インチ高/ライト幅9インチ FLHR クリア 2313-0003 JP店, 【USA在庫あり】 メンフィスシェード Memphis Shades ウインドシールド ファット 13インチ高 08年-17年 FXDF クリア 2313-0122 JP店, MONROE リフレックス(ReFlex) SUBARU TRAVIQ トラヴィック XM220/XM182 01/8~05/3 RE フロント 【E4963】, 【データシステム/DataSystem】TV-KIT テレビキット 切替タイプ 車種別 標準&メーカーオプションナビ用 ティーダラティオ C11 などにお勧め 品番:NTV335, 【メーカー在庫あり】 TID170F201.5 (株)タンガロイ タンガロイ TACドリル TID170F20-1.5 JP;古河バッテリー スズキ SUZUKI グース350 NK42A(91/12~) 350cc FTX12-BS アクティブ スロットルKIT TYPE-2 ガンメタ 巻取40φ/900mm 《アクティブ 1069699》↓↓↓【送料無料】資生堂 クレ・ド・ポー ボーテ シナクティフ クレーム〈クリーム〉 レフィル(詰め替え用) 40g (クレドポーボーテ), 【クーポン配布中】★送料無料 1/16 9:59AM迄★ロクシタン レーヌブランシュ ブライトUVシールド 2個セット 30ml×2【人気】【L'occitane】【乳液】, 【送料無料】チャーミングCエッセンス (25mL) [エンチーム] ビタミンCやビタミンC誘導体を配合! rsp, 【最大600円クーポン 】【15時まで】【x3個】モルトベーネ ロレッタ まいにちのすっきりシャンプー 2500ml 詰替え用(レフィル)《loretta モルトベーネ ロレッタ シャンプー 美容室 サロン専売品 詰め替え》【ビューティーエクスペリエンス】, 【お年玉コフレ・正規品・送料無料】COSMEお年玉グロスコフレSET&アディクション ネイルポリッシュ006S(ChateauBasqeシャトーバスク)(12mL)

スプーン リジカラ リア ランディ SNC25 50300-T31-000 取付セット アライメント込 SPOON リジットカラー【店頭受取対応商品】 カロ/KARO フロアマット FLAXY 品番:2936 カラー:ブリリアントグレー他 シトロエン C4ピカソ B585F02P リアゲートのみ(リア2列目使用時用) 2011年02月~ プロジェクトμ レーシング999 フロント左右セット ブレーキパッド RX350 GGL16W F113 プロジェクトミュー プロミュー プロμ RACING999 ブレーキパット【店頭受取対応商品】 ミツビシ RVR 97.11~03.1 N73WG(4WD) ACRE(アクレ) ブレーキパッド レーシングプロ 203 リア 左右セット ブレーキ アクレ パッド, 【送料無料】 225/55R18 18インチ LEHRMEISTER レアマイスター ヴィヴァン(BMCポリッシュ) 7.5J 7.50-18 FALKEN ファルケン アゼニス FK510 SUV サマータイヤ ホイール4本セット, ザ・ビートル フロアマット【ハルトデザイン】The Beetle フロアーマット(loop・グレー)前後4セット 右ハンドル マットタイプ:ボタン フチカラー:オレンジ, 【カーヴェー】KW (カーヴェー) COILOVER Version-2 [ 減衰力伸び側調整式 ] AUDI アウディ A4; (B5) 【 02/99y-10/00y 】 Sedan & Avant; FF 車体番号/8D*X 200000 ~ (許容耐荷重F-1080/R:-1070), 18インチ サマータイヤ セット【適応車種:アテンザワゴン(GJ系)】A-TECH シュナイダー セイバーロンド ブラック/リムダイヤモンドカット 8.0Jx18Bluearth エース AE50 225/50R18

M321315 / 325488 DIXCEL Mタイプ ブレーキパッド 1台分セット 日産 ジューク NF15 1600 2010/11~ 16GT FOUR/NISMO

↓↓↓↓↓↓


↓↓↓↓↓↓


↓↓↓↓↓↓

MICHELIN スタッドレス X-ICE XI3+ 195/65R15 & Septimo G01 DGP15×6.0 114.3/5H + 45 アテンザ GG3P, Z1000(03~06年) アンダーカウル・ストリート用(サイドスタンド使用可能)綾織りカーボン製 MAGICAL RACING(マジカルレーシング), ショックアブソーバー KYB ミツビシ ギャラン/エテルナ/エメロード E57A 92/02~94/08 NSF9044 カヤバ ショック NEW SR SPECIAL(NEW SRスペシャル)リアのみ, GSX-R1000(03~04年) スキッドパッド ブラック MORIWAKI(モリワキ), 14インチ サマータイヤ セット【適応車種:オッティ(H92系)】HOT STUFF Gスピード G02 メタリックブラック 4.5Jx14ディレッツァ Z3 165/55R14

【USA在庫あり】 メンフィスシェード Memphis Shades 補修用 シールド ファット 19インチ高/ライト用カット幅 9インチ クリア ME0621 JP店;HKBハンドルボス トヨタタウンエース・マスターエース・ライトエース 40/50系 エアバック付/モニターランプ付 ■LED H4 Hi lo■8000lm 3COB■Hi/ Lo■スクラムワゴン H17.9~DG64W ヘッド■ エーヴィヒ/Ewig ブレーキパッド リア プレミアムコンパウンド EIP141PC ミニ R58 SX16 クーパー クーペ 2011年09月~;155/65R14 75S YOKOHAMA ヨコハマ BluEarth AE-01 ブルーアース AE01 TRG-GB10 TRG GB10 サマータイヤホイール4本セット

カーマット フロアマット トヨタ クラウンワゴン 3年10月~11年12月 コラムシフト-シャギーブラック;DIXCEL ディクセル ブレーキローター PDタイプ フロント アウディ A4 (B7) (車台No:8E_5_400001~) 1.8T (FF) 8EBFB 06/07~08/03

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

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

実装方法 / 解説

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

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

例外

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回の閃光 DIXCEL PD-typeブレーキディスクローター前後セットLY3PマツダMPV NA 06/2~、又は閾値以下:達成基準 2.3.1 を理解する

2.4 ナビゲーション

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

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

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

実装方法 / 解説

解説

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

事例

ニュースを配信する組織のホームページには、広告、検索、その他のサービスのためのたくさんのブロック及びサイドバーに囲まれて、ページの中央にメインの記事がある。ページの先頭に 『1番のみ』 ラパン用 リヤビューライト(ブラウン)のミラー一式のみ 84701-85K42-ZEL FIG847J スズキ純正部品、そのメインの記事へジャンプするリンクがある。このリンクを使わないと、キーボードを使用している利用者は、メインの記事へ到達するまでに 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には ●チャージスピード●レヴォーグ STI Sport VM# C/D リアボトムライン TYPE-2 カーボン製、ラベル又は説明文を提供する。

実装方法 / 解説

良くない実装方法

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に適切な要素がない場合、

スプーン リジカラ リア ランディ SNC25 50300-T31-000 取付セット アライメント込 SPOON リジットカラー【店頭受取対応商品】

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

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

解説

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