accessibility-devops/pages/fail.html at main · nfreear/accessibility-devops · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html fail-no-lang>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

  <link rel="stylesheet" href="fail.css">

  <h1> Fail </h1>

  <nav>
    <ul>
      <li><a href="pass.html">Pass</a>
      <li><a href="fail.html">Fail</a>
    </ul>
  </nav>

  <p>This page contains some examples of accessibility failures.</p>

  <p>
    <x-test fail>
      <img src="example"> <x-test-desc>FAIL: Missing "alt" attribute. (1.1.1)</x-test-desc>
    </x-test>
  </p>

  <p>
    <x-test fail>
      <img src="#" class="decorative" alt="decorative"> <x-test-desc>FAIL: Decorative images should have empty "alt" attributes (1.1.1)</x-test-desc>
    </x-test>
  </p>

  <p>
    <x-test fail>
      <a href="#" class="empty-link"></a> <x-test-desc>FAIL: Missing accessible name for link (4.1.2)</x-test-desc>
    </x-test>
  </p>

  <p>
    <x-test fail>
      Test <input> <x-test-desc>FAIL: No accessible name / No prog. associated visual label.</x-test-desc>
    </x-test>
  </p>

  <p>
    <x-test fail>
      <iframe src="https://example.org"></iframe>
      <x-test-desc>FAIL: Iframe without a meaningful name in the "title" attribute (4.1.2)</x-test-desc>
    </x-test>
  </p>

  <p>
    <x-test fail>
      <span class="low-contrast">Hello, I fail the text contrast test!</span>
      <x-test-desc>FAIL: text contrast (minimum) (1.4.3)</x-test-desc>
    </x-test>
  </p>

</html>