> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/public-website/docs/archive-docs_public-website/accessibility-responsive-and-performance.md). # Accessibility, Responsive, And Performance This document preserves the current launch quality posture for the static public website. ## Launch QA Status Phase 16 launch review on 2026-06-02 recorded: | Gate | Status | Evidence | | ------------------------ | ------ | --------------------------------------------------------------- | | Responsive QA | passed | 19 critical routes checked at 360px, 768px, 1280px, and 1600px. | | Keyboard focus | passed | Home skip link and mobile nav focus behavior checked. | | Mobile navigation | passed | Menu opens, moves focus, and closes with Escape. | | Reduced motion | passed | `/press/` animated media fallback checked. | | Image loading | passed | Visible images checked after per-image scroll. | | Horizontal overflow | passed | Checked across critical routes and target viewports. | | Metadata/privacy checker | passed | Built-site checker passed after static build. | This evidence is local static QA. It is not formal accessibility certification, VPAT, third-party audit, or physical-device certification. ## Critical Routes Checked The launch review manually checked these routes: * `/` * `/product/` * `/features/` * `/how-it-works/` * `/use-cases/` * `/use-cases/engineering-teams/` * `/security/` * `/blog/` * `/news/` * `/investors/` * `/about/` * `/contact/` * `/press/` * `/roadmap/` * `/faq/` * `/legal/` * `/legal/privacy/` * `/legal/terms/` * `/legal/acceptable-use/` Use this same set as the minimum manual smoke target after broad layout, navigation, CSS, legal, or media changes. ## Responsive Targets Validated widths: * 360px mobile * 768px tablet * 1280px desktop * 1600px wide desktop Responsive rules: * Do not use viewport-width font scaling. * Keep text inside buttons, cards, panels, nav, and footer links. * Use stable dimensions for fixed-format UI such as previews, icon controls, counters, grids, and metric rows. * Grids should collapse to one column on narrow screens. * Product previews should not clip labels or important state. * Long words, paths, mailto links, and code-like strings need wrapping rules. ## Accessibility Baseline Implemented expectations: * semantic `header`, `nav`, `main`, `footer` * skip link * one `h1` per page * visible focus states * keyboard usable mobile nav * external links have accessible labels or visible text * status is not conveyed by color alone * images have useful alt text * reduced-motion media fallback exists where needed * legal review markers are visible text ## Reduced Motion Decorative motion must honor: ```css @media (prefers-reduced-motion: reduce) ``` Rules: * Continuous decorative motion must stop or become static. * Animated showcase media should switch to static fallback. * Hover/focus transitions should remain short and not necessary for meaning. * Important state must stay visible without animation. `OptimizedMedia.astro` handles fallback display for registry entries with a `fallbackKey`. ## Performance Posture The site is static output with no runtime app shell. Performance work completed for launch includes: * optimized Astro image output * responsive image widths * lazy media by default * high-priority image handling only where justified * reduced decorative motion cost * smaller `heroes-banner-preview.webp` derivative for launch preview use * no remote font loading * no analytics scripts * no runtime fetch/socket/beacon paths Build evidence on 2026-06-02: * 31 static pages built. * 26 optimized images built. * Built-site checker passed with 31 routes and 2185 links. ## Image Performance Rules * Use `src/lib/media.ts` for media metadata. * Use `OptimizedMedia.astro` for visible page media when practical. * Cap generated widths to useful rendered sizes. * Keep large showcase media lazy. * Do not emit high-byte originals directly for card previews. * Keep animated media out of first viewport unless a scoped performance reason exists. * Document byte-size concerns in `media-assets.md`. ## Font Performance Rules The first-release site uses local/system font stacks. Future self-hosted fonts require: * source * license * byte budget * fallback behavior * privacy review * build output checks * updated docs Do not add Google Fonts or other remote font providers without a scoped privacy and performance decision. ## Regression Checklist After substantial UI, CSS, route, or media work: 1. Run the package gates: ```bash npm --workspace @factionos/public-website run typecheck npm --workspace @factionos/public-website run build npm --workspace @factionos/public-website run check:links ``` 2. Preview the build: ```bash npm --workspace @factionos/public-website run preview ``` 3. Manually check: * 360px, 768px, 1280px, and 1600px. * Header and footer link reachability. * Mobile nav open, focus, and Escape close. * Skip link focus and jump to main. * Demo and docs CTAs. * Legal pre-review markers. * Blog/news index and at least one article page. * Press page media and reduced-motion fallback. * No horizontal overflow. * No clipped button or card text. 4. Run root gates when the change is broad: ```bash npm run format:check npm run lint npm run typecheck npm run build npm run security:secrets git diff --check ``` ## Certification Boundary Current evidence supports local launch QA only. Do not claim: * WCAG certification * VPAT completion * third-party accessibility audit * physical mobile-device certification * performance SLA * Lighthouse score guarantee Those require a later scoped effort and a stable evidence record. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://faction-os.gitbook.io/faction-os-docs/public-website/docs/archive-docs_public-website/accessibility-responsive-and-performance.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.