# 当社がテストするアクセシビリティの問題 各ページでは、当社の自動テストで見つかる問題を1つずつ取り上げ、その意味、関連するWCAGの達成基準、あらゆるサイト・Shopify・WooCommerceでの修正方法、修正の確認方法を解説します。 ## アクセシビリティの問題 - [aria-hiddenが指定されている要素は、フォーカス可能であったり、フォーカス可能な要素を含んでいたりしてはなりません](https://www.fixreports.com/ja/issues/aria-hidden-focus): WCAG 4.1.2・レベルA. フォーカス可能な要素がスクリーンリーダーからは隠されていますが、キーボードではたどり着けてしまいます。 (ARIAの属性とロール) - [autocomplete属性は正しく使用しなければなりません](https://www.fixreports.com/ja/issues/autocomplete-valid): WCAG 1.3.5・レベルAA. フォーム入力欄で、ブラウザが認識できないautocompleteの値が使われています。 (ラベルのないフォーム入力欄) - [ボタンには認識可能なテキストが存在しなければなりません](https://www.fixreports.com/ja/issues/button-name): WCAG 4.1.2・レベルA. 一部のボタンにアクセシブルな名前がないため、スクリーンリーダーの利用者には「ボタン」としか聞こえません。 (名前のないリンクとボタン) - [要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません](https://www.fixreports.com/ja/issues/color-contrast): WCAG 1.4.3・レベルAA. 一部のテキストが、ロービジョンの人が読み取れるほど背景から際立っていません。 (色のコントラスト不足) - [ドキュメントにはナビゲーションを補助するために要素がなければなりません](https://www.fixreports.com/ja/issues/document-title): WCAG 2.4.2・レベルA. ページにタイトルがないため、利用者は自分がどのページにいるのかわかりません。 (ページタイトル) - [ARIAおよびラベルに使用されているIDは一意でなければなりません](https://www.fixreports.com/ja/issues/duplicate-id-aria): WCAG 4.1.2・レベルA. ラベルや説明に使われるidを複数の要素が共有しているため、支援技術が誤ったラベルを読み上げる可能性があります。 (ARIAの属性とロール) - [フレームにはアクセシブルな名前がなければなりません](https://www.fixreports.com/ja/issues/frame-title): WCAG 4.1.2・レベルA. 埋め込まれたフレーム（多くは地図、動画、アプリのウィジェット）にタイトルがないため、スクリーンリーダーの利用者には中身がわかりません。 (ページの構造、見出し、ランドマーク) - [見出しのレベルは1つずつ増加させなければなりません](https://www.fixreports.com/ja/issues/heading-order): アクセシビリティのベストプラクティス. 見出しのレベルが飛んでいる（例：H2からH4）ため、スクリーンリーダーの利用者にとってページの構造がわかりにくくなっています。 (ページの構造、見出し、ランドマーク) - [<html>要素にはlang属性がなければなりません](https://www.fixreports.com/ja/issues/html-has-lang): WCAG 3.1.1・レベルA. ページの言語が宣言されていないため、スクリーンリーダーが誤った発音で読み上げる可能性があります。 (ページの言語) - [<html>要素のlang属性には有効な値がなければなりません](https://www.fixreports.com/ja/issues/html-lang-valid): WCAG 3.1.1・レベルA. ページの言語コードが有効ではないため、スクリーンリーダーが正しい音声を選べません。 (ページの言語) - [画像には代替テキストがなければなりません](https://www.fixreports.com/ja/issues/image-alt): WCAG 1.1.1・レベルA. 画像に代替テキストがないため、スクリーンリーダーの利用者には何が写っているのかがわかりません。 (代替テキストのない画像) - [入力ボタンには認識可能なテキストが存在しなければなりません](https://www.fixreports.com/ja/issues/input-button-name): WCAG 4.1.2・レベルA. inputのボタンにテキストがないため、スクリーンリーダーがその機能を伝えられません。 (ラベルのないフォーム入力欄) - [画像ボタンには代替テキストがなければなりません](https://www.fixreports.com/ja/issues/input-image-alt): WCAG 1.1.1, 4.1.2・レベルA. 画像ボタンに代替テキストがないため、スクリーンリーダーがその機能を伝えられません。 (代替テキストのない画像) - [フォーム要素にはラベルがなければなりません](https://www.fixreports.com/ja/issues/label): WCAG 4.1.2・レベルA. 一部のフォーム入力欄にラベルがないため、スクリーンリーダーの利用者には何を入力すればよいかがわかりません。 (ラベルのないフォーム入力欄) - [ドキュメントにはmainランドマークが1つ含まれていなければなりません](https://www.fixreports.com/ja/issues/landmark-one-main): アクセシビリティのベストプラクティス. ページにmainランドマークがないため、スクリーンリーダーの利用者が本文へ直接移動できません。 (ページの構造、見出し、ランドマーク) - [リンクは色に依存しない形で区別できなければなりません](https://www.fixreports.com/ja/issues/link-in-text-block): WCAG 1.4.1・レベルA. 段落内のリンクが色だけで区別されているため、色の違いがわからない人はリンクに気づきません。 (色のコントラスト不足) - [リンクには認識可能なテキストがなければなりません](https://www.fixreports.com/ja/issues/link-name): WCAG 2.4.4, 4.1.2・レベルA. 一部のリンクに、スクリーンリーダーが読み上げられるテキストがありません。多くはSNSのアイコンやカートのアイコンなど、アイコンだけのリンクです。 (名前のないリンクとボタン) - [ズーム機能やテキストのサイズ変更は無効にしてはなりません](https://www.fixreports.com/ja/issues/meta-viewport): WCAG 1.4.4・レベルAA. このページは、スマートフォンでのピンチズームを妨げています。 (拡大表示とリフロー) - [ページにはレベル1の見出しが含まれていなければなりません](https://www.fixreports.com/ja/issues/page-has-heading-one): アクセシビリティのベストプラクティス. ページに最上位の見出しがありません。 (ページの構造、見出し、ランドマーク) - [ページのすべてのコンテンツはlandmarkに含まれていなければなりません](https://www.fixreports.com/ja/issues/region): アクセシビリティのベストプラクティス. 一部のコンテンツが、ページのランドマーク（header、nav、main、footer）の中にありません。 (ページの構造、見出し、ランドマーク) - [[role="img"] の要素には代替テキストがなければなりません](https://www.fixreports.com/ja/issues/role-img-alt): WCAG 1.1.1・レベルA. 画像として提示されている要素に代替テキストがありません。 (代替テキストのない画像) - [スクロール可能な領域はキーボードでアクセスできなければなりません](https://www.fixreports.com/ja/issues/scrollable-region-focusable): WCAG 2.1.1・レベルA. スクロール領域にキーボードでたどり着けないため、キーボード利用者はスクロールできません。 (キーボード操作とフォーカス) - [select要素にはアクセシブルな名前がなければなりません](https://www.fixreports.com/ja/issues/select-name): WCAG 4.1.2・レベルA. ドロップダウン（多くは並べ替えやバリエーションの選択）にラベルがありません。 (ラベルのないフォーム入力欄) - [imgロールを持つ<svg>要素には代替テキストが存在しなければなりません](https://www.fixreports.com/ja/issues/svg-img-alt): WCAG 1.1.1・レベルA. 情報を伝えるSVG画像に代替テキストがありません。 (代替テキストのない画像) - [すべてのタッチターゲットは24pxの大きさか、十分なスペースがなければなりません](https://www.fixreports.com/ja/issues/target-size): WCAG 2.5.8・レベルAA. 一部のタップ対象が24×24ピクセルより小さく、間隔も狭すぎるため、スマートフォンで押しにくくなっています。 (キーボード操作とフォーカス)