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<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Image Validator</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<h1>Accessibility Image Validator</h1>
<p class="header-subtitle">Evaluate image alt text in our benchmark corpus</p>
</header>
<main id="main-content">
<section id="session-controls" aria-label="Session controls">
<div class="controls-row">
<button id="start-session" type="button">Start New Session</button>
<button id="end-session" type="button" disabled>End Session</button>
</div>
</section>
<section id="session-status" class="hidden"
aria-label="Session progress">
<p class="status-line">
Session: <strong id="session-id-display"></strong>
</p>
<p class="status-line" aria-live="polite" aria-atomic="true">
<span id="progress-count">0</span>
of <span id="total-count">0</span> reviewed
</p>
<div id="progress-bar" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
aria-label="Validation progress">
<div id="progress-fill"></div>
</div>
</section>
<section id="validation-card" class="hidden"
aria-label="Image under review">
<div class="card-image">
<div id="image-frame">
<img id="current-image" src="" alt="">
<svg id="region-overlay" class="hidden" aria-hidden="true"
preserveAspectRatio="xMidYMid meet"></svg>
</div>
<p id="image-placeholder" class="placeholder hidden">
No external image. Evaluate using the context below.
</p>
</div>
<p id="region-note" class="region-note hidden"></p>
<div class="card-details" aria-hidden="true">
<h2>Alt text under review</h2>
<blockquote id="current-alt">
</blockquote>
<p id="current-alt-source" class="alt-source"></p>
</div>
<details class="card-context">
<summary>Context</summary>
<dl>
<dt>Source page</dt>
<dd id="context-page"></dd>
<dt>Element role</dt>
<dd id="context-role"></dd>
<dt>Alt attribute</dt>
<dd id="context-alt"></dd>
<dt>Surrounding text</dt>
<dd id="context-surrounding"></dd>
</dl>
</details>
<fieldset class="decision-fieldset">
<legend>Your evaluation</legend>
<div class="decision-buttons">
<button id="accept-btn" type="button"
class="btn-accept">Accept</button>
<button id="reject-btn" type="button"
class="btn-reject">Reject</button>
</div>
<div id="reason-group" class="hidden">
<label for="reason-input" id="reason-label">
Reason
</label>
<textarea id="reason-input"
aria-describedby="reason-hint"
rows="4"></textarea>
<p id="reason-hint" class="hint">
Optional.
</p>
<div class="reason-actions">
<button id="submit-btn" type="button">Submit</button>
<button id="cancel-btn" type="button"
class="btn-cancel">Cancel</button>
</div>
</div>
</fieldset>
</section>
<section id="results" class="hidden" aria-label="Session results">
<h2>Session ended</h2>
<p id="results-summary"></p>
<p>Download your results, then open a GitHub issue and
attach or paste the file.</p>
<div class="results-actions">
<button id="download-results" type="button">
Download results
</button>
<a id="github-issue-link"
href="https://github.com/EqualifyEverything/benchmarks-ai-alt/issues/new?template=validation-report.md"
target="_blank"
rel="noopener noreferrer">
Open GitHub issue (new tab)
</a>
</div>
</section>
</main>
<footer>
<p>
Part of the
<a href="https://github.com/EqualifyEverything/benchmarks-ai-alt">
benchmarks-ai-alt</a> project.
</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>