The page places the same three statements in a fixed SVG composition and a separate live HTML notice. You can adjust the live notice’s font size, line height, and letter spacing without changing the words. The comparison shows what those controls affect; it does not evaluate a production announcement.
Use the worked example
Set the live type to 28 px and line height to 1.8, then choose Apply. Read “Model review,” “Tuesday 3 PM,” and “Bring the revised sketch” in both versions. The live words can wrap differently while the SVG keeps its internal composition. Neither version should lose part of the message.
Trace the result step by step
Use “Model review” as the heading and the other two statements as details. Do not replace Tuesday with a date, supply a venue or turn the wording into a different instruction. Those facts are not provided.
W3C's explanation of SC 1.4.5 supports using text when available technology can produce the desired presentation, and explains limited customizable or essential-presentation exceptions. Its examples include styled headings made with CSS. Apply that rationale to this ordinary notice; decorative typography alone does not establish a need to bake these instructions into pixels.
Live text can still clip if a container has a fixed height or unsuitable styling. Check all three statements after increasing type and spacing in the actual narrow layout; a readable heading alone does not establish that the instruction survived.
Use bounded, labeled example controls for text scale, line height and letter spacing, applying only to the live notice. Keep their values visible. Reset restores the authored presentation defaults and leaves every content statement unchanged. Browser/user presentation settings remain a separate verification concern; custom controls are not a complete accessibility evaluation.
The page’s wordmark note raises a different question: whether a particular identity mark requires its original presentation. It does not display a separate wordmark for you to assess. For a real logo or wordmark, record the specific reason its appearance matters instead of treating every announcement from that organization as exempt.
For this notice, the time and instruction are ordinary information that can remain live text. A useful review note would identify those statements, explain why CSS can present them, and record any remaining concern about the replacement. The page gives you a comparison to discuss; it does not create that review note or decide an exception for you.
When the two representations are compared, verify the content before the styling: heading, time and instruction must all survive. A screenshot that looks uncluttered after the instruction disappears is not a successful comparison.
Try letter spacing of 0.1 em after changing the size and line height, and read the instruction again. The controls accept 16–40 px for size, 1–2.5 for line height, and 0–0.3 em for letter spacing. Apply updates the live notice; Reset restores 20 px, 1.5, and 0. These are demonstration ranges, not a claim that every reader needs the same settings.
The live version stores its words as text and styles their presentation separately. Font-size, line-height, and letter-spacing adjustments apply only to that notice. The fixed SVG keeps its internal positions. A production bitmap would scale as a whole and needs its own comparison rather than being confused with the SVG example.
Copy a prompt for this example
Create one HTML comparison of a fixed notice graphic and an adjustable live-text notice. Both must preserve exactly these three statements: Model review; Tuesday 3 PM; Bring the revised sketch. Do not add a venue or calendar date.
Draw an original inline SVG composition for the fixed side, with a dark background and separately positioned heading, time, and instruction. Label it as a fixed SVG example, not a bitmap or screenshot. On the other side use ordinary HTML text, with Model review as its heading and the other statements as details.
Provide labeled fields for live type size, line spacing, and letter spacing, plus Apply live text settings and Reset. Accept type size 16 through 40 pixels, line height 1 through 2.5, and letter spacing zero through 0.3 em. Reject missing or out-of-range values with a correction message. Apply valid values only to the live notice.
Start with 20 pixels, line height 1.5, and letter spacing zero. Reset restores those settings without changing the words. A 28-pixel size and line height 1.8 should make it possible to compare live wrapping with the fixed graphic's composition.
Include a brief note that a wordmark's essential identity purpose is different from an ordinary notice's instructions. Do not present the comparison as a complete accessibility evaluation. Use side-by-side sections on wider screens and a readable stacked layout on phones. Return the complete self-contained HTML.
List the words in your own announcement before replacing its image, then compare them with the proposed live version at a narrow width. NOS can preview the prepared HTML comparison for that discussion. Check the actual replacement’s text adjustments and layout as part of your accessibility review.