コンテンツへスキップ

今すぐEye-Able Auditを使って、WCAGに準拠しているかウェブサイトを監査しましょう

このウェブサイトでは、Eye-Able Audit を使用して、よくあるエラーとその検出方法について解説しています

画面右側のEye-Able Auditツールバーにあるすべてのエラーを確認してください!

デジタル製品向けソフトウェアのテスト

アクセシビリティ基準に基づくウェブサイトの自動テスト

デジタルアクセシビリティがビジネスの成長を後押しします

法的要件を遵守するためです。

Eye-Able Reportを使用してドメイン全体をスキャンする

すべてのサブページを一覧表示できる、デジタルアクセシビリティ管理ダッシュボード

このページには、Eye-Able Auditが検出できるエラーの一部のみが表示されています。すべてのルールについては、「 概要 」をご覧ください!

代替テキストがありません

ホームページのバナーの31.3%に代替テキストが設定されていません。スクリーンリーダーのユーザーが画像の内容や目的を理解できるように、画像には代替テキストが必要です。

コントラストの低いテキスト

多くのウェブサイトにおいて、コントラスト不足はアクセシビリティ上の最も多い問題点です。すべてのテキスト要素について、前景のテキストと背景色の間に十分な色のコントラストが確保されていることを確認してください。必要な最低コントラスト比はテキストのサイズによって異なりますが、大きなサイズのテキストの場合は3:1または4.5:1となります。

コントラストが非常に悪いです

見出し階層


スクリーンリーダーなどの支援技術は、障害を持つユーザー、特に視覚障害のあるユーザーがウェブサイトを閲覧する際によく利用されます。これを円滑に行うためには、サイト上で見出し(H1~H6)の明確かつ論理的な階層構造を維持することが、ストレスのないナビゲーションを確保する上で極めて重要です。

見出しを空欄にすると混乱を招く恐れがあるため、避けるべきです。

よくある問題

リンク先のテキストがありません

このリンク先の画像には代替テキストが設定されていません。リンクには、スクリーンリーダーで正しく読み上げられ、理解しやすいリンクテキストが必要です。

テーブルの構文が不正です

私の素敵なテーブル
1行目見出しがありません…

スクリーンリーダーで正しく読み取れるようにするには、表の構文が適切である必要があります(例:すべての列に見出しセルを設定するなど)。Eye-Ableは、見出しのアクセシビリティを低下させるよくあるミスを自動的に検出します。

アリアの属性

aria属性は、Webインターフェースのアクセシビリティを向上させる上で非常に有用ですが、正しい構文と役割を使用する必要があります。

ボタン

Aには、スクリーンリーダーがその目的を反映できるように、分かりやすい名前が必要です。

項目を選択してください

セレクトボックスはフォームでよく使用され、代替テキストも必要です。

無効なフォーム項目

このフォームを送信することにより、当社からの電子メールによる連絡を受け取ることに同意し、お客様の連絡先情報が当社に保存されることを了承したものとします。

名前が設定されていないリンク

各リンク要素には、その目的を説明するアクセシブルな名前またはテキストを指定する必要があります。このリンクは、無効で空になっています。

名前が参照できないオブジェクト

音声や動画などのマルチメディアコンテンツを含む要素には、スクリーンリーダー用のマークアップが必要です。

リストの外にあるリスト要素

リスト要素は、リストの外にあることはできません。リスト要素は、常に順序付きリスト <ol> または順序なしリスト <ul> の一部です。

  • 項目1
  • 項目2
  • 重複して割り当てられたAccesskey属性

    accesskey属性は、指定されたキーボードショートカットで操作できる要素を識別します。指定するショートカットは一意である必要があり、現在のページ上の他の要素では使用されてはいけません。

    文字が小さすぎます

    フォントサイズは9pxを下回らないようにしてください。

    このテキストのフォントサイズは7pxですので、拡大する必要があります

    通常のテキストと見分けがつかないリンク

    インラインリンクは、色だけでなく、他のテキストとは異なる方法で区別できるようにする必要があります。例えば、テキストに下線を引いたり、枠線を付けたりすることで、リンクを目立たせることができます。このリンクは悪い例です。

    このセクション全体がイタリック体で表示されます

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    段落の行間は、少なくとも1.5行分確保されています

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    このセクション全体が両端揃えで表示されます

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ステット・クリタ・カスド・グベルグレン、ノー・シー・タキマタ・サンクトゥス・エスト・ロレム・イプスム・ドロル・シット・アメット。ロレム・イプスム・ドロル・シット・アメット、コンセテトゥル・サディプスシング・エリトル、セド・ディアム・ノヌムイ・エイモド・テンポル・インヴィドゥント・ウト・ラボレ・エト・ドロレ・マグナ・アリクヤム・エラート、セド・ディアム・ヴォルプツア。アット・ヴェロ・エオス・エト・アクササム・エト・ジャスト・ドゥオ・ドロレス・エト・エア・レブム。

    表示名はアクセス可能な名前の構成要素ではありません

    以下のリンクには、アクセシビリティ名とは異なる表示テキストが含まれています。詳細については、こちらをご参照ください。これは、音声入力でウェブサイトを操作するユーザーにとって特に重要です。そうしないと、音声入力が正しく解釈されません。