Put the Beams demo front and center - #584
Merged
Merged
Conversation
A heuristic evaluation measured the canvas starting at 854 pixels into a 1083-pixel viewport, behind two paragraphs, with no visible cue that the page is interactive. The post now opens with a two-sentence lede and the demo itself; the prose follows under Controls, What you are hearing, The model, and Deliberately omitted headings. A click-to-start overlay sits on the canvas and dismisses on the first press; the echogram gains a caption and an accessible name; the canvas gains an aria-label; and a fallback message appears if the module has not started within six seconds instead of leaving a silently blank canvas. Both site layouts also gain the missing html lang attribute.
✅ Deploy Preview for p13i ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
1 participant
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.
Summary
Puts the Beams demo front and center, per the heuristic evaluation: the canvas previously started 854 px into a 1083 px viewport behind two paragraphs, with no visible cue that the page is interactive. The post now opens with a two-sentence lede and the demo itself; the prose follows under Controls / What you are hearing / The model / Deliberately omitted headings. A click-to-start overlay sits on the canvas and dismisses on the first press or key; the echogram gains a caption and accessible name; the canvas gains an aria-label; a fallback message appears if the module has not started within six seconds instead of a silently blank canvas; and both site layouts gain the missing
<html lang>attribute (WCAG 3.1.1).Before
The live post today — a text wall, demo mostly below the fold, nothing indicating interactivity:
After
Deploy preview: lede, then the demo with the click-to-start overlay — canvas top moved from y=854 to y=274:
After one click — overlay dismissed, audio active, array steered toward the C source:
Verification
Measured on the deploy preview (https://deploy-preview-584--p13i.netlify.app/posts/2026/08/beams/): canvas top y=274 (was 854), overlay
flexon load andnoneafter the first pointer press, module boots and arrivals flow, heading outline is H1 + four H2s,<html lang="en">present. Forced-failure check (script src renamed in a scratch copy): the fallback message appears at 6 s and the overlay clears. The screenshots above are committed on this branch understatic/beams/screenshots/.Not tested: mobile/touch layout pass; screen-reader runtime behavior (ARIA added and statically verified only).
Written by Claude