When reflow resolution is applied, the image and text in the "Why TypeSpec API-First for developers" section are being truncated.: A11y_TypeSpec_HomePage_Reflow

[kupatkar99]

GIT Hub Tags:

#A11yTCS; #A11ySev2; #TypeSpec; #P2_TypeSpec_Web_Sept2025; #CELA_P2; #DesktopWeb; #A11yMAS; #WCAG1.4.10; #Reflow; #A11yWCAG2.1; #Zoom; #Win11; #FTP; #ChromiumEdge;

Environment and OS details:

Application name: typespec.io
URL: https://typespec.io
ChromiumEdge Version: 140.0.3485.66 (Official build) (64-bit)

Reproduction Steps:

1. Open url "https://typespec.io" and login with valid Credentials.
2. "TypeSpec" HomePage will get open.
3. Zoom the page to 200% and Inspect the page.
4. Set the browser resolution 320 x Maximum height.
5. Observe the issue whether Image and text content are fully visible within the viewport of reflow resolution or not.

Actual behavior:

Image and text content are truncated and not fully visible within the viewport of reflow resolution.

Expected behavior:

All image and text content should reflow properly and remain fully visible without truncation.

User Impact:

Low vision users who rely on reflow resolution for improved visibility may have trouble if the images and text are not visible in reflow resolution.

Attachment:

[ccbarragan]

Hey @timotheeguerin! For this one, looks like the image in the 'Why TypeSpec' section is overflowing the width of the page.

Can you try adjusting to ensure the image fills the width of its parent container on reflow to see if that fixes the issue? For reference here is the design / live site side-by-side.

Design	Live site

[timotheeguerin]

@ccbarragan this is a bit more probematic as this is not an image but an html component.
I have redesigned it to not have this embeded window for smaller screen, let me know what you think