Skip to content

docs: give screenshots their own alt text and fill empty table headers - #30873

Open
nickvigilante wants to merge 1 commit into
mainfrom
vigilante/docs-a11y-fixes
Open

nickvigilante wants to merge 1 commit into
mainfrom
vigilante/docs-a11y-fixes

Conversation

@nickvigilante

Copy link
Copy Markdown
Contributor

Summary

An axe sweep of every page on https://coder.com/beta-docs (coder/docs-engine#224) found two content-side problems. Nine screenshots have alt text identical to the italic caption right after them, so screen readers read the same words twice (axe image-redundant-alt). Four hand-written tables have an empty top-left header cell, which leaves their row-label column without a name (axe empty-table-header). This fixes both. These are content fixes on main only; earlier release lines keep the old text.

Findings

Rule Pages Cause Fixed where
image-redundant-alt 4 Alt text repeats the caption This PR
empty-table-header 4 hand-written Empty corner header cell This PR
empty-table-header 105 CLI reference pages, audit-logs.md Generated tables with empty headers Not here: needs a generator change
empty-table-header admin/networking/port-forwarding.md Spanning corner cells in a raw HTML matrix Not here: needs a rework of that table
heading-order remote-desktops.md <div class="tab"> typo Separate PR
link-name, scrollable-region-focusable, aria-valid-attr-value, label many Engine coder/docs-engine #220, #217, #224

Fix

Each of the nine screenshots gets alt text that describes what it shows (for example, "Preset dropdown with Ruby Development added between Full Stack and Web Development"), and keeps its caption. The corner cells become "Permission" (Groups and roles), "Component" (air-gapped comparison), "Scenario" (scale-testing workloads) and "Input" (workspace tags). Tables were re-padded with markdown-table-formatter.

QA

  1. Open each production page below. Expected: the screenshots and tables look the same as before, except the four tables now show a word in their top-left header cell.
  2. In Chrome DevTools (Elements) or Firefox's Inspector, select a screenshot on the Add a language page. Expected: its alt differs from the italic caption under it.

Pages to compare

What to check Production Preview
Screenshot alt text vs caption https://coder.com/beta-docs/@main/get-started/customize-your-template/add-a-language/ This PR's GitHub preview: https://github.com/coder/coder/blob/vigilante/docs-a11y-fixes/docs/get-started/customize-your-template/add-a-language.md
Roles table corner cell https://coder.com/beta-docs/@main/admin/users/groups-roles/ https://github.com/coder/coder/blob/vigilante/docs-a11y-fixes/docs/admin/users/groups-roles.md
Scale-testing table corner cell https://coder.com/beta-docs/@main/install/validate/scale-testing/ https://github.com/coder/coder/blob/vigilante/docs-a11y-fixes/docs/install/validate/scale-testing.md

Testing

markdownlint-cli2 and markdown-table-formatter over the eight changed files: 0 errors. Re-running the sweep after merge should drop image-redundant-alt and the four tables' empty-table-header findings from @main.

Upstream

No: these are Coder content fixes, not Fumadocs bugs.

Linear: DOCS-1303


🤖 Built with AI assistance.

An accessibility sweep of the beta docs site found screenshots whose alt
text repeats the italic caption beside them, so screen readers read the
same words twice, and tables with an empty top-left header cell, which
leaves the row-label column unnamed. Each alt now describes what the image
shows, and each corner cell names its column.

Assisted-by: AI
@github-actions

Copy link
Copy Markdown
Contributor

Docs preview

Check off each page once it's been reviewed. If a page changes in a later push, its checkbox clears automatically so it gets a fresh look. Pages not yet wired into the docs navigation aren't listed here.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant