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# Accessibility Image Validator
A lightweight, accessible tool for reviewing image/alt text pairs in the
benchmarks-ai-alt corpus. Runs as a static site on GitHub Pages or any
local HTTP server.
## How it works
1. Start a session.
2. For each image, you see the image and the text under review.
3. Click Accept or Reject.
4. Provide a written reason (required for both).
5. End the session at any time; you are not required to finish all items.
6. Download results as JSON and submit them as a GitHub issue.
## What "the text under review" means
Not every functional image carries its own alt attribute. A search button often
puts the text in an aria-label on the button, and a logo inside a link whose
own text already names the site correctly carries alt="". So the tool shows the
accessible name, which is the text a screen reader actually announces, and says
which attribute it came from.
The image's own alt attribute is shown separately under Context, with two
distinct cases spelled out rather than collapsed together:
- (no alt attribute on the image), which is usually a defect
- (alt="", deliberately empty), which is correct when the surrounding link or
button already carries the text
Of the 78 items in the first corpus, 36 have no usable alt attribute on the
image itself, so this distinction is most of the corpus rather than an edge
case.
## Image maps
Four items are a single clickable region of an image map, an `<area>` inside a
`<map>`. The archived image is the whole map, because that is the one file the
browser downloads, so on its own the card would ask you to judge "Northeast
Michigan" against a national forecast chart.
The tool draws the region the text actually labels as an outline over the map,
and states the same thing in words underneath, because an outline conveys
nothing to a screen reader user. The note gives the shape, roughly where on the
map it sits, and its pixel bounds.
The outline assumes the coordinates were authored against the image's intrinsic
size. That is the ordinary case, and every coordinate in these four maps falls
inside the intrinsic box, but it is not guaranteed by the HTML specification: a
page that displayed its map scaled down would have coordinates in the scaled
space, and the outline would then be drawn in the wrong place.
## Running locally
Serve the repository root, not this directory. The archived images live in the
corpus construction project, and the tool reaches them with a relative path that
climbs out of this directory. A server rooted here refuses to follow it.
From the repository root:
```
python3 -m http.server 8000
```
Then open http://localhost:8000/projects/corpus-validation/ in a browser.
## Running on GitHub Pages
Serve the whole repository from the default branch at the root path, for the
same reason. The tool is then at:
```
https://equalifyeverything.github.io/benchmarks-ai-alt/projects/corpus-validation/
```
The repository has a `.nojekyll` file at its root so Pages copies the files
verbatim instead of running them through Jekyll. Nothing here needs a site
generator, and the archive is 965 image files that a build would only slow down.
## Accessibility
- Skip link for keyboard users
- Semantic HTML with proper landmarks, headings, labels, and fieldsets
- ARIA live regions announce progress changes to screen readers
- Progress bar uses role="progressbar" with aria-valuenow
- All interactive elements reachable and operable by keyboard
- Focus management: textarea receives focus when reason panel opens
- Color contrast meets WCAG AA (4.5:1 minimum for text)
- Respects prefers-reduced-motion
- No information conveyed by color alone
## File structure
- index.html: page markup
- css/style.css: styles
- js/main.js: application logic
- functional-images.jsonl: corpus data (copy from corpus-construction)
## Submitting results
When you end a session, use "Download Results (JSON)" to save your file.
Then click "Submit as GitHub Issue" to open a pre-filled issue template.
Paste or attach the JSON in the issue body.
## Data format
The downloaded JSON contains:
- session_id: unique identifier for the session
- timestamp: when the session ended
- corpus_size: total items in the corpus
- reviewed: how many items you evaluated
- accepted: count of accepted items
- rejected: count of rejected items
- results: array of individual evaluations with id, status, reason,
and timestamp