デモ
チェッカーの経緯と機能を紹介する動画をご覧いただくか、
以下のデモコンテンツを編集したり、アラートを開いたり閉じたり、
ツールバー () を使って見出しのアウトラインを確認してみてください。このデモにはコアテストと CSA スイートの両方が含まれています。
このデモは TinyMCE エディターを使用しています。Editoria11y はほとんどのテキストエディターと互換性があり、WordPress および Drupal では CKEditor と Gutenberg へのターンキー実装も用意されています。
見出し
この見出しはレベルをスキップしています:
おっと
この見出しにはテキストがまったくありません:
この短いブロック引用は見出しかもしれません:
これは偽の見出しです
この全太字の段落は見出しかもしれません:
これは偽の見出しです
この見出しは非常に長いです:
見出しとサブ見出しは、支援技術のためにナビゲート可能な目次を作成します。数字はネスト関係のインデントを示します。非常に長い見出しは、著者が見出しに多くのことを詰め込みすぎていることを意味する可能性があります。
画像の代替テキスト
この見出しはalt属性のないテキスト画像で作られています:
alt属性がまったくない画像:

無効なalt属性を持つ画像、例:alt=”'”

ファイル名をaltとして持つ画像

altに「image of:(〜の画像)」などの冗長なテキストを持つ画像

altに「image of:(〜の画像)」などの冗長なテキストを持つリンク画像
プレースホルダーaltを持つ画像:

リンク付きでプレースホルダーaltを持つ画像:
機械生成コードのaltを持つ画像:

機械生成コードのaltを持つリンク画像:
非常に長いaltテキストを持つ画像:

リンク内の画像でaltテキストがリンクではなく画像を説明している可能性がある場合
リンク付きの任意の画像(デフォルトではテストオフ)
装飾としてマークされたfigure内の画像:
figcaptionと同じaltを持つfigure内の画像:
altなしのカルーセル内の画像:
コントラスト
判読不能な色の組み合わせ:
とても読みやすいですね。
色の手動チェックが必要:
計算不可能です。
コントラストが不十分なSVGグラフィック
コントラストの手動チェックが必要なSVGグラフィック
埋め込みとメディア
字幕の手動チェックが必要なビデオ:
音声にはトランスクリプトが必要です:
タイトルがなく手動チェックも必要なiframe:
フォーカスできないiframe:
ネストされたインタラクティブコンポーネント
アコーディオン
アコーディオン
サプライズ!意味のあるリンク
テキストがまったくないリンク
URLだけでラベルされたリンク:
https://www.youtube.com/watch?v=DLzxrzFCyOs
記号だけでラベルされたリンク:
同じ名前のリンクが異なる場所に移動する
DOI番号だけでラベルされたリンク:
doi.org/10.1145/3493612.3520468
意味のないラベルのリンク:
代替テキストのないリンクアイコン:
外部リンクアイコンやテキスト警告なしに新しいウィンドウで開くリンク
PDFへのリンク
他のドキュメントへのリンク
冗長なtitle属性を持つリンク
タブインデックスから除外する属性を持つリンク:
テキストのない要素へのaria-labelledby属性を持つリンク:
ariaラベルに汎用的な単語を持つリンク:
altテキストのないリンク画像:
発音できないaltテキストを持つリンク画像:
alt属性のないリンク画像:
テキスト付きリンクにあるalt属性のないリンク画像:
ファイル名だけをaltテキストとするリンク画像:
不審に長いaltテキストを持つリンク画像:
ページ内の壊れたリンク
開発サーバーへのリンク
重複するアンカー
テーブル
有効なヘッダーのないテーブル
| THヘッダーのないテーブルは無効です | アウトラインヘッダーはカウントされません | テーブル内のコンテンツヘッダーテストを無効にするべき |
| 空のヘッダー | |
|---|---|
| 見つけました | カメの動画 700本 |
| それぞれ | 2秒の長さ |
読みやすさ
連続した複数の単語をすべて大文字で書くと手動チェックの警告がトリガーされます。
下線付きテキスト
少しのイタリックは問題ありませんが、長い強調テキストのブロックは非常に読みにくくなります。もちろん少量は許容されますが、限界があり、段落全体にわたるのは多すぎます。これはその一例で、段落全体がイタリック体です。読みにくいと感じませんか?ただし、このテストはこれほど長くなるまで作動しないため、このような長い段落を頻繁に書かない限り、コンテンツで誤検知が出ることはないはずです。
両端揃えのテキスト
過度な上付き文字または下付き文字;下付き文字は文章や段落全体ではなく、注釈や脚注などの小さな参照に使用するものです。
極小フォント
* 一般的な文字を使った偽のリスト、
* 文字、数字、絵文字。
フォーム
ラベルのないボタン
非表示ラベルを持つ入力フィールド(表示ラベルもあるかどうか確認します)。
プレースホルダーラベルのみの入力フィールド(表示ラベルもあるかどうか確認します)。
表示ラベルと異なるアクセシブルラベルを持つボタン。
無効なaria-labelledby属性を持つボタン。
冗長なラベルを持つボタン。
リセットボタン。