Contents · Meta · PDF

Test Screen Reader Text

Posts on this blog are compiled to SVG pages, which provides a consistent visual appearance but leaves assistive technology with nothing to announce. To fix the accessibility issue, the template wraps each semantic element in a #metadata(..) <driver-doc> node, and the build script runs typst query to pull that tree out and rebuild an HTML version of the post inside a <div class="sr-only"> block ahead of the image. This post exercises that pipeline: every common Typst element appears below so that a screen reader can verify extraction.

Paragraphs and emphasis

This is a plain paragraph. It contains some bold text, some italicized phrasing, and the occasional inline code span . All three should appear with their semantic wrappers intact.

Inline links

A link to the homepage should be announced as link text, not as a raw URL. A second link to Typst keeps the destination within the anchor.

Lists

Unordered list:

• First bullet.
• Second bullet with an inline code fragment inside.

Ordered list:

1. Step one.
2. Step two.
3. Step three.

Code block

fn greet(name: &str) {
    // This looks like a comment
    println!("Hello, {name}!");
}

Block quote

Premature optimization is the root of all evil.

Math

Inline math: . $e^(i pi) + 1 = 0$

Block math follows:

$ integral_0^(infinity) e^(−x^2) d x = (sqrt(pi)) / (2) $

Math equations are currently converted to raw source text, which is not ideal, but at least ensures that the content is not lost. A future improvement would be to render them in MathML or a similar format for better screen reader support.

Table

Figure

Custom elements

Closing

If every element above is readable in the sr-only block, extraction is working. If anything is missing or garbled, refer to the PDF version as a reference.

Edited on 2026-06-25