Test Summary
Note: The local dev server was started successfully but Playwright runs in a separate network namespace and could not reach the container bridge IP (172.30.0.20). Tests were performed against the production site at github.github.com/gh-aw/ which reflects the currently deployed docs.
Results Overview
- 🟢 Passed: 12 checks
- 🟡 Warnings: 2
- 🔴 Critical: 0
Warnings
🟡 W1 — Small Touch Targets on Mobile (WCAG 2.5.5)
On all mobile viewports (360–428px), multiple interactive elements are below the recommended 44×44px minimum touch target size:
| Element |
Size |
Device |
| Theme toggle button |
32×32px |
All mobile |
| "Community Feedback" link |
149×19px |
All mobile |
| "llms.txt" link |
50×25px |
All mobile |
Approximately 11 elements per mobile viewport fall below the WCAG 2.5.5 minimum. The height issue is most prevalent for inline links in the footer/header area. This is partially a Starlight framework default, but custom CSS can be added to increase padding on the most-used interactive elements.
Recommendation: Add min-height: 44px and display: inline-flex; align-items: center to the theme toggle button, or increase padding on commonly-tapped links.
🟡 W2 — Tablet Breakpoint: Hamburger Menu Active at 768px–834px
On iPad (768×1024) and iPad Pro 11 (834×1194), the site uses the mobile hamburger/overlay navigation pattern rather than a persistent sidebar. The sidebar breakpoint appears to activate around ~1100px. At these tablet sizes:
- Sidebar is hidden behind a toggle button
- Navigation menu is full-width overlay
- Users may not discover the navigation without tapping the menu button
This is default Starlight behavior. Consider whether the sidebar breakpoint should be lowered for a better tablet experience.
View Detailed Test Results by Device
Mobile Devices
| Device |
Viewport |
Load |
Overflow |
Hamburger |
Search |
Touch Targets |
| iPhone 12 |
390×844 |
✅ 200 |
✅ none* |
✅ |
✅ |
🟡 11 small |
| iPhone 12 Pro Max |
428×926 |
✅ 200 |
✅ none* |
✅ |
✅ |
🟡 11 small |
| Pixel 5 |
393×851 |
✅ 200 |
✅ none* |
✅ |
✅ |
🟡 11 small |
| Galaxy S21 |
360×800 |
✅ 200 |
✅ none* |
✅ |
✅ |
🟡 11 small |
*sr-only SPAN elements flagged by overflow check are intentional (screen-reader-only, off-screen positioned) — not real layout issues.
Tablet Devices
| Device |
Viewport |
Load |
Overflow |
Sidebar |
Hamburger |
Search |
| iPad |
768×1024 |
✅ 200 |
✅ none |
🟡 overlay |
✅ |
✅ |
| iPad Pro 11 |
834×1194 |
✅ 200 |
✅ none |
🟡 overlay |
✅ |
✅ |
| iPad Pro 12.9 |
1024×1366 |
✅ 200 |
✅ none |
🟡 overlay |
✅ |
✅ |
Desktop Devices
| Device |
Viewport |
Load |
Overflow |
Sidebar |
Hamburger |
Search |
| HD |
1366×768 |
✅ 200 |
✅ none |
✅ 300px |
✅ hidden |
✅ |
| FHD |
1920×1080 |
✅ 200 |
✅ none |
✅ 300px |
✅ hidden |
✅ |
| 4K |
2560×1440 |
✅ 200 |
✅ none |
✅ 300px |
✅ hidden |
✅ |
View Accessibility & SEO Checks
| Check |
Result |
<html lang="en"> |
✅ Present |
| Viewport meta tag |
✅ width=device-width, initial-scale=1 |
| Single H1 per page |
✅ |
| Images with alt text |
✅ All 1 image has alt |
| No broken images |
✅ |
| Meta description |
✅ Present |
| Open Graph tags |
✅ og:title, og:description, og:image |
| Mermaid diagrams render |
✅ Successfully rendered |
| No tiny text (<12px) |
✅ |
| ARIA labels on interactive elements |
✅ aria-label, aria-expanded on nav button |
View Desktop Screenshot
Desktop FHD (1920×1080) — Home page:
Recommendations
- Touch targets (low effort): Increase the theme toggle button to at least 44×44px via CSS. Consider adding more vertical padding to footer links on mobile.
- Tablet nav (medium effort): Consider lowering the Starlight sidebar breakpoint from ~1100px to ~768px so iPad users see a persistent sidebar instead of an overlay.
References:
Generated by Multi-Device Docs Tester · ◷
Test Summary
@pelikhanResults Overview
Warnings
🟡 W1 — Small Touch Targets on Mobile (WCAG 2.5.5)
On all mobile viewports (360–428px), multiple interactive elements are below the recommended 44×44px minimum touch target size:
Approximately 11 elements per mobile viewport fall below the WCAG 2.5.5 minimum. The height issue is most prevalent for inline links in the footer/header area. This is partially a Starlight framework default, but custom CSS can be added to increase padding on the most-used interactive elements.
Recommendation: Add
min-height: 44pxanddisplay: inline-flex; align-items: centerto the theme toggle button, or increase padding on commonly-tapped links.🟡 W2 — Tablet Breakpoint: Hamburger Menu Active at 768px–834px
On iPad (768×1024) and iPad Pro 11 (834×1194), the site uses the mobile hamburger/overlay navigation pattern rather than a persistent sidebar. The sidebar breakpoint appears to activate around ~1100px. At these tablet sizes:
This is default Starlight behavior. Consider whether the sidebar breakpoint should be lowered for a better tablet experience.
View Detailed Test Results by Device
Mobile Devices
*
sr-onlySPAN elements flagged by overflow check are intentional (screen-reader-only, off-screen positioned) — not real layout issues.Tablet Devices
Desktop Devices
View Accessibility & SEO Checks
<html lang="en">width=device-width, initial-scale=1og:title,og:description,og:imagearia-label,aria-expandedon nav buttonView Desktop Screenshot
Desktop FHD (1920×1080) — Home page:
Recommendations
References: