Improve simulation accessibility for screen readers and keyboard users - #41
Merged
Merged
Conversation
- Add `a11y` section to i18n strings (EN + FR) with labels for the video
player, timeline scrubber, rewind button, digitizing overlay, track
checkbox/delete actions, data table, and CSV export button; expose them
via a new `StringManager.getA11y()` method
- VideoPlayerNode: set `aria-label` on the HTML <video> element so screen
readers announce "Video player" rather than the bare element
- PlaybackControlsNode: add `accessibleName` to the timeline Slider
("Video timeline — drag to seek") and to the rewind RectangularPushButton
("Rewind to start"), replacing invisible icon-only affordances
- DataTableNode: add a visually-hidden `<caption>` to the HTML table,
add `scope="col"` to every `<th>` so column headers are properly
associated with their data cells, and supply a plain-text `aria-label`
on color-coded track headers whose HTML content is not readable as text;
add `accessibleName` to the CSV export button
- TrackListPanel / TrackRowNode: add `accessibleName` to each track
checkbox ("Digitize track A/B/C…") and delete button ("Remove track
A/B/C…") so their purpose is unambiguous without visual context
- DigitizingOverlayNode: expose the digitizing hit area in the parallel
DOM via `tagName: "div"` and `accessibleName`, making the interactive
region discoverable to assistive technology
https://claude.ai/code/session_01HY85QRjhNBGPrYbj4WSMZc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add
a11ysection to i18n strings (EN + FR) with labels for the videoplayer, timeline scrubber, rewind button, digitizing overlay, track
checkbox/delete actions, data table, and CSV export button; expose them
via a new
StringManager.getA11y()methodVideoPlayerNode: set
aria-labelon the HTMLPlaybackControlsNode: add
accessibleNameto the timeline Slider("Video timeline — drag to seek") and to the rewind RectangularPushButton
("Rewind to start"), replacing invisible icon-only affordances
DataTableNode: add a visually-hidden
<caption>to the HTML table,add
scope="col"to every<th>so column headers are properlyassociated with their data cells, and supply a plain-text
aria-labelon color-coded track headers whose HTML content is not readable as text;
add
accessibleNameto the CSV export buttonTrackListPanel / TrackRowNode: add
accessibleNameto each trackcheckbox ("Digitize track A/B/C…") and delete button ("Remove track
A/B/C…") so their purpose is unambiguous without visual context
DigitizingOverlayNode: expose the digitizing hit area in the parallel
DOM via
tagName: "div"andaccessibleName, making the interactiveregion discoverable to assistive technology
https://claude.ai/code/session_01HY85QRjhNBGPrYbj4WSMZc