Direct answer: ten of the 25 sites use inline SVG, with 503 icons and 560.3 KB; de-duplicated within each page they reduce to 99 distinct shapes (about 5.1× repetition). No SVG names itself, and after crediting parent links and buttons, 100 are named by a parent and 403 (80.1%) have no name at any level; only five carry aria-hidden="true" (1.0%) and none has a focusable attribute; seven of the ten sites hide no icon. Volume concentrates on E23 (237.2 KB / 92), E03 (113.7 KB / 134), E22 (64.7 KB / 84), E06 (64.6 KB / 77) and E14 (40.0 KB / 69).
This study parses <svg>…</svg> markup only; it does not render or read the accessibility tree, and names supplied by parent links or buttons are paired in a separate recheck.
Method: SVG markup plus parent pairing
On 2026-11-09 between 08:41 and 08:45 we requested the HTML of the same 25 cached-200 homepages and extracted every closed <svg>…</svg> block: total count, full markup bytes, aria-hidden="true", focusable, role="img", and whether it contains <title>, aria-label or aria-labelledby. Page-level uniqueness compares whitespace-normalised inner markup; parent naming is computed in the 09:40 recheck.
| Measure | Rule | Boundary |
|---|---|---|
| Inline SVG | A closed <svg>…</svg> in the HTML | External <img> and unclosed fragments excluded |
| Hidden | aria-hidden="true" | CSS hiding and parent aria-hidden excluded |
| Named | Inner <title>, aria-label, aria-labelledby or role=img | Names from parent links/buttons excluded |
| Unique | Identical inner markup after whitespace removal | Within a page only, not across sites |
| Size | Bytes of the complete <svg> block | Not transfer size after compression |
Result: almost no accessibility handling
| Measure | Count | Sites |
|---|---|---|
| Inline SVGs | 503 | 10 |
| Unique shapes | 99 | 10 |
| aria-hidden="true" | 5 | 3 |
| Named by the SVG itself | 0 | 0 |
| Named by a parent | 100 | 4 |
| No name at any level | 403 | 10 |
| role="img" | 0 | 0 |
| focusable attribute | 0 | 0 |
| Inline size | 560.3 KB | — |
Repetition and weight: 503 icons, 99 shapes
| Site | SVGs | Unique | Size | Hidden |
|---|---|---|---|---|
| E03 | 134 | 18 | 113.7 KB | 0 |
| E06 | 77 | 3 | 64.6 KB | 0 |
| E22 | 84 | 7 | 64.7 KB | 0 |
| E14 | 69 | 9 | 40.0 KB | 0 |
| E23 | 92 | 42 | 237.2 KB | 1 |
| E09 | 32 | 8 | 23.2 KB | 0 |
Repetition is clearest on E06: 77 SVGs from just 3 shapes; E22 is 84 to 7, E14 69 to 9 and E03 134 to 18. The same icon is inlined again and again, inflating the HTML; a <use> sprite or an external SVG file cuts both repetition and weight.
Parent naming: 100 covered, 403 not
On 2026-11-09 between 09:40 and 09:43 we rechecked the same 25 sites, pairing each SVG with its nearest <a>/<button> ancestor: a parent counts as naming the icon when it has aria-label, aria-labelledby or title, or contains visible text outside the SVG.
| Measure | Count | Share of 503 |
|---|---|---|
| Named by the SVG itself | 0 | 0% |
| Named by a parent | 100 | 19.9% |
| No name at any level | 403 | 80.1% |
The spread is uneven: E03 has 103 of 134 unnamed, E06 36 of 77 and E23 65 of 92; E09 (32), E14 (69), E22 (84) and E24 (5) are entirely unnamed. Even after crediting parent links and buttons, 403 icons (80.1%) have no readable name; the risk concentrates on icon-only buttons and links, which have neither their own title nor parent text.
What this means for acceptance
- Hide decorative icons by default. Add
aria-hidden="true"andfocusable="false"; only five of 503 did, and seven sites did not at all. - Name icon-only buttons. Even with parents credited, 403 icons (80.1%) have no name; icon-only buttons and links need
aria-labelor visible text, or a screen reader announces just “button”. - Use role=img + title for meaningful graphics. No site does; complex graphics can point at visible text with
aria-labelledby. - Stop repeating inline markup. 503 icons against 99 shapes; a sprite or external file brings 560 KB close to the weight of 99 shapes.
- Set an inline-SVG budget. E23 reaches 237.2 KB on one page, close to what many sites spend on the whole document. See the website development service.
Limits
- Markup only: no rendering or accessibility-tree check; parent names are paired heuristically and hidden text or complex combinations can be misjudged.
- Regex boundary: nested SVGs and unclosed fragments may be missed or double counted.
- Uniqueness scope: within a page by inner markup only, not across sites or by visual similarity.
- E24 retry: the site returned 504 during the recheck and succeeded after a pause, so it is included; a single fetch can still be affected by a WAF.
- Parent matching is a heuristic: only the nearest
<a>/<button>is paired, using aria or visible text; hidden text and complex combinations can be misjudged. - 25-site pilot: the same equipment-company sample; no industry claim.
Data and reproduction
Anonymised data: equipment-homepage-inline-svg-2026.csv (25 rows × 10 columns: SVG count, unique shapes, hidden, named, role, focusable, size and time). The repository keeps docs/research/2026-11-homepage-inline-svg.csv.
Naming recheck: equipment-homepage-svg-naming-2026.csv (25 rows × 10 columns: self-named, parent-named, unnamed and size). The repository keeps docs/research/2026-11-homepage-svg-naming.csv.
Parsers: scripts/svg_a11y_probe.py and scripts/svg_context_probe.py; unit tests: scripts/test_content_svg_a11y_probe.py (10) and scripts/test_content_svg_context_probe.py (9, both offline). Run:
python -m unittest scripts.test_content_svg_a11y_probe scripts.test_content_svg_context_probe
Related: homepage semantics, keyboard access and ARIA, the article inline-SVG duplication pilot, and the homepage HTML weight composition pilot.
Sources and definitions
- Sample: the 25 study-4 homepages cached as 200; ten contain inline SVG.
- Fetch: 2026-11-09 08:41–08:45 Asia/Shanghai, serial, 0.5 s apart, 15-second timeout.
- Rules: closed
<svg>blocks; hidden via aria-hidden; named via title/aria-label/aria-labelledby/role=img. - Uniqueness: identical inner markup after whitespace removal, within a page only.
Frequently asked questions
Does zero named SVGs mean every icon is inaccessible?
Zero self-named icons is not the whole picture. After crediting parent links and buttons, 100 get a name from the parent, but 403 (80.1%) have no name at any level; the risk concentrates on icon-only buttons and links, which have no text to read.
How should decorative icons be handled?
Add aria-hidden="true" and focusable="false", or use a CSS background image. Only five of the 503 did so.
How should meaningful icons be named?
Use role="img" with a <title>, or aria-label; complex graphics can point at visible text with aria-labelledby.
Why is repetition a problem?
The 503 SVGs de-duplicate to 99 shapes within their pages, so the same icon is inlined again and again; a <use> sprite or an external file would cut the HTML substantially.
Why call out E24 separately?
It returned 504 on the recheck and succeeded after a pause; the page has five SVGs, three aria-hidden and 4.5 KB, and is included in the totals.
Can the data be re-checked?
Yes. The public CSV has 25 rows by 10 columns, and scripts/svg_a11y_probe.py has 10 offline unit tests.