accessibility-example-project/index.html at main · Appilistus/accessibility-example-project · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <header>
      <h1>Website feedback</h1>
      <nav role="navigation" aria-label="Main navigation">
        <ul>
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </header>

    <main id="main-content">
      <section id="introduction">
        <h2>Introduction</h2>
        <p>
          We value your feedback! Help us improve our website accessibility.
        </p>
        <div class="hero-images">
          <img src="assets/cat.webp" alt="" class="decorative-image" />

          <img
            src="assets/accessibility-image.png"
            alt="Image showing various accessibility symbols"
            class="info-image"
          />
        </div>
      </section>

      <section id="user-info">
        <h2>Your information</h2>
        <form id="user-info-form">
          <div class="form-control">
            <label for="name">Name:</label>
            <input
              type="text"
              id="name"
              name="name"
              aria-required="true"
              area-describedby="name-error"
            />
            <div id="name-error" class="error" role="alert" hidden></div>
          </div>
          <div class="form-control">
            <label for="email">Email:</label>
            <input
              type="email"
              id="email"
              name="email"
              aria-required="true"
              placeholder="Example: name@example.com"
              aria-describedby="email-hint email-error"
            />
            <p id="email-hint" class="hint">Example: name@example.com</p>
            <div id="email-error" class="error" role="alert" hidden></div>
          </div>
          <div class="form-control">
            <button type="submit">Continue to feedback</button>
          </div>
        </form>
      </section>

      <section id="feedback" hidden>
        <h2>Share your experience</h2>

        <!-- progress bar -->
        <div class="quiz-progress" role="status" aria-live="polite">
          <div class="progress-bar">
            <div class="progress-fill" style="width: 0%;"></div>
          </div>
          <p class="pregress-text">0 of questions answered</p>
        </div>

        <form id="feedback-form">
          <fieldset>
            <legend>Website navigation experience</legend>
            <div class="radio-group">
              <label for="nav-easy">Easy to navigate</label>
              <input
                type="radio"
                name="navigation"
                id="nav-easy"
                value="easy"
              />
            </div>
            <div class="radio-group">
              <label for="nav-difficult">Difficult to navigate </label>
              <input
                type="radio"
                name="navigation"
                id="nav-difficult"
                value="difficult"
              />
            </div>
          </fieldset>

          <fieldset>
            <legend>Content readability</legend>
            <div class="radio-group">
              <input
                type="radio"
                name="readability"
                id="read-clear"
                value="clear"
              />
              <label for="read-clear">Content is clear and easy to read</label>
            </div>
            <div class="radio-group">
              <input
                type="radio"
                name="readability"
                id="read-unclear"
                value="unclear"
              />
              <label for="read-unclear"
                >Content was difficult to read and understand</label
              >
            </div>
          </fieldset>
          <button type="submit">Submit feedback</button>
        </form>
      </section>

      <section id="results" hidden>
        <h2>Thank you</h2>
        <div id="results-content"></div>
      </section>

      <div
        id="announcer"
        class="visually-hidden"
        role="status"
        aria-live="assertive">
      </div>

    </main>

    <script src="js/main.js"></script>
  </body>
</html>