Test Summary
- Triggered by:
@pelikhan
- Workflow run: §24509428811
- Pages tested: 13
- Test date: 2026-04-16
- Note: Playwright browser screenshots unavailable due to network isolation between agent and Playwright containers; analysis performed via HTML/CSS inspection with curl.
Results Overview
- 🟢 Passed: 8 pages fully clean
- 🟡 Warnings: 5 pages with mobile table label issue
- 🔴 Critical: 0
Accessibility Findings
All 13 pages passed core accessibility checks:
- ✅ Viewport meta tag present
- ✅ Skip-to-content link present
- ✅
<main> landmark present
- ✅
lang attribute on <html>
- ✅ Exactly 1
<h1> per page
- ✅ All images have
alt attributes (one apparent false positive in Architecture page is a code example demonstrating XSS sanitization inside a data-code clipboard button attribute — not a real image)
- ✅ Dark/light theme toggle present
- ✅
prefers-reduced-motion support in CSS
- ⚠️ Video elements (2 on homepage) lack
title or aria-label attributes
Responsive Design Findings
| Viewport Range |
Layout |
Issues |
| Mobile < 640px (360–428px) |
Hamburger menu + card tables |
⚠️ Table data-label attrs missing |
| Tablet 769–900px |
Hamburger menu for nav |
✅ |
| Tablet 768px (iPad) |
Edge-case at max/min-width: 768/769px boundary |
🟡 Minor overlap |
| Desktop 1366px+ |
Full sidebar layout |
✅ |
| Wide 1152px+ |
Right TOC sidebar appears |
✅ |
View Warnings: Mobile Table Card Layout (5 pages)
The CSS at @media (max-width: 640px) converts tables to a card layout where each <td> is displayed as a block. Column header labels are shown via td::before { content: attr(data-label); }. However, none of the rendered table <td> elements have data-label attributes, so the labels will be blank on mobile.
Affected pages and table counts:
/gh-aw/introduction/architecture/ — 2 tables (missing labels on all)/gh-aw/reference/engines/ — 5 tables (including comparison table with Copilot/Claude/Codex/Gemini columns)/gh-aw/reference/safe-outputs/ — 6 tables/gh-aw/reference/threat-detection/ — 3 tables/gh-aw/examples/multi-repo/ — 1 table
Root cause: The CSS ::before pseudo-element relies on data-label attributes being set on <td> elements (e.g., <td data-label="Property">). The Markdown/MDX source uses standard Markdown table syntax, which Astro/Starlight renders as plain <td> elements without these attributes. A remark plugin or rehype plugin would be needed to inject the labels from the corresponding <th> headers.
View Warning: Video Accessibility
The homepage contains 2 <video> elements that have controls and poster attributes but no title or aria-label:
<video class="gh-aw-video-element" controls poster="/gh-aw/videos/install-and-add-workflow-in-cli.png" preload="metadata">
<source src="/gh-aw/videos/install-and-add-workflow-in-cli.mp4" type="video/mp4">
Screen readers may announce these as "video" without a descriptive name. Adding title="Install and add workflow in CLI" (etc.) would improve accessibility.
View Detailed Results by Device Category
Mobile Devices (390–428px wide)
All 4 mobile viewports (iPhone 12, iPhone 12 Pro Max, Pixel 5, Galaxy S21) share the same HTML/CSS behavior:
- Hamburger menu button with
aria-label="Toggle navigation menu" and aria-expanded="false" ✅
overflow-x: hidden on html element prevents horizontal scroll ✅- Tables convert to card layout via
@media (max-width: 640px) ✅
- Card layout cell labels blank due to missing
data-label on <td> ⚠️
Tablet Devices (768–1024px wide)
- iPad at 768px sits at exact boundary of
max-width: 768px / min-width: 769px breakpoints — both apply simultaneously, with the hamburger menu CSS activating at 769px–900px
- iPad at 768px will show the desktop nav (full links) rather than the hamburger, since the hamburger range starts at 769px
- iPad Pro 11 (834px) and iPad Pro 12.9 (1024px) show the hamburger menu in the 769–900px range
Desktop Devices (1366–2560px wide)
- All desktop viewports (HD, FHD, 4K) show the full persistent sidebar layout ✅
- Feature grid adapts: 1→2→3→4 columns at 50rem/72rem/90rem breakpoints ✅
- Right TOC sidebar appears at 72rem (1152px) ✅
Recommendations
-
Fix mobile table labels (Medium priority): Add a rehype/remark plugin to inject data-label attributes from <th> text onto corresponding <td> elements. Without this, the mobile card layout shows unlabeled data cells, making reference tables (Engines comparison, Safe Outputs parameters, etc.) difficult to read on phones.
-
Add video title attributes (Low priority): Add descriptive title attributes to the 2 <video> elements on the homepage to improve screen reader announcements.
-
Verify iPad 768px behavior (Low priority): Manually verify that the nav layout at exactly 768px (iPad in portrait) renders correctly given the 768/769px boundary edge case in the CSS media queries.
References:
Generated by Multi-Device Docs Tester · ● 240.9K · ◷
Test Summary
@pelikhanResults Overview
Accessibility Findings
All 13 pages passed core accessibility checks:
<main>landmark presentlangattribute on<html><h1>per pagealtattributes (one apparent false positive in Architecture page is a code example demonstrating XSS sanitization inside adata-codeclipboard button attribute — not a real image)prefers-reduced-motionsupport in CSStitleoraria-labelattributesResponsive Design Findings
data-labelattrs missingView Warnings: Mobile Table Card Layout (5 pages)
The CSS at
@media (max-width: 640px)converts tables to a card layout where each<td>is displayed as a block. Column header labels are shown viatd::before { content: attr(data-label); }. However, none of the rendered table<td>elements havedata-labelattributes, so the labels will be blank on mobile.Affected pages and table counts:
/gh-aw/introduction/architecture/— 2 tables (missing labels on all)/gh-aw/reference/engines/— 5 tables (including comparison table with Copilot/Claude/Codex/Gemini columns)/gh-aw/reference/safe-outputs/— 6 tables/gh-aw/reference/threat-detection/— 3 tables/gh-aw/examples/multi-repo/— 1 tableRoot cause: The CSS
::beforepseudo-element relies ondata-labelattributes being set on<td>elements (e.g.,<td data-label="Property">). The Markdown/MDX source uses standard Markdown table syntax, which Astro/Starlight renders as plain<td>elements without these attributes. A remark plugin or rehype plugin would be needed to inject the labels from the corresponding<th>headers.View Warning: Video Accessibility
The homepage contains 2
<video>elements that havecontrolsandposterattributes but notitleoraria-label:Screen readers may announce these as "video" without a descriptive name. Adding
title="Install and add workflow in CLI"(etc.) would improve accessibility.View Detailed Results by Device Category
Mobile Devices (390–428px wide)
All 4 mobile viewports (iPhone 12, iPhone 12 Pro Max, Pixel 5, Galaxy S21) share the same HTML/CSS behavior:
aria-label="Toggle navigation menu"andaria-expanded="false"✅overflow-x: hiddenonhtmlelement prevents horizontal scroll ✅@media (max-width: 640px)✅data-labelon<td>Tablet Devices (768–1024px wide)
max-width: 768px/min-width: 769pxbreakpoints — both apply simultaneously, with the hamburger menu CSS activating at769px–900pxDesktop Devices (1366–2560px wide)
Recommendations
Fix mobile table labels (Medium priority): Add a rehype/remark plugin to inject
data-labelattributes from<th>text onto corresponding<td>elements. Without this, the mobile card layout shows unlabeled data cells, making reference tables (Engines comparison, Safe Outputs parameters, etc.) difficult to read on phones.Add video
titleattributes (Low priority): Add descriptivetitleattributes to the 2<video>elements on the homepage to improve screen reader announcements.Verify iPad 768px behavior (Low priority): Manually verify that the nav layout at exactly 768px (iPad in portrait) renders correctly given the 768/769px boundary edge case in the CSS media queries.
References: