- MUST READ: Submission requirements
- Entry form template
You can find a very good reference to Github flavoured markdown reference in this cheatsheet. If you want something a bit more WYSIWYG for editing then could use StackEdit which provides a more user friendly interface for generating the Markdown code. Those of you who are VS Code fans can edit/preview directly in that interface too.
V Legacy
Best Marketplace App for Sitecore AI - Build something publishable. Not just a demo.
SitecoreA11Y is a Sitecore Marketplace app that brings real-time accessibility auditing directly into the Sitecore Pages editor. Content authors and developers can scan any page for WCAG violations without leaving the CMS.
-
Module Purpose
A Page Builder Context Panel extension that scans the live preview for accessibility issues using axe-core, then enriches every violation with AI-generated explanations and fix suggestions powered by the Sitecore Marketplace AI SDK. -
What problem was solved
Accessibility defects are usually caught late — during QA or after launch — because content authors have no visibility into WCAG compliance while they build pages. Manual audits are slow, expensive, and disconnected from the authoring workflow.- How this module solves it
- The app subscribes to
pages.contextso it reacts whenever the author navigates or edits a page. - On demand, it injects axe-core into the Sitecore preview iframe via
EXECUTE_IN_PREVIEW, runs a full DOM audit, and highlights offending elements with a red outline. - Raw violations are deduplicated, scored by impact, and sent to an AI endpoint that returns plain-language explanations and actionable fix suggestions (categorised as code or content fixes).
- Results are displayed in-context with an accessibility score (0–100), WCAG tags, the offending HTML snippet, and deep links to Deque's rule documentation — all visible in the Page Builder side panel without any context switch.
- The app subscribes to
- How this module solves it
⟹ Provide a video highlighing your Hackathon module submission and provide a link to the video. You can use any video hosting, file share or even upload the video to this repository. Just remember to update the link below
⟹ https://youtu.be/_xhmNzot_uk
- Sitecore XM Cloud subscription with access to the Pages editor
- Sitecore Cloud Portal developer account with permissions to register Marketplace apps
- Node.js 16+ and npm 10+
- OpenAI API key — used by the
/api/scan-a11yroute to generate plain-language explanations and fix suggestions for each accessibility violation - Sitecore Marketplace SDK packages (installed via npm):
@sitecore-marketplace-sdk/client^0.3.2@sitecore-marketplace-sdk/xmc^0.4.1@sitecore-marketplace-sdk/ai^0.1.0
- axe-core ^4.11.1 — injected at runtime into the Sitecore preview iframe for WCAG auditing
- Clone this repository.
- Install dependencies and run the SitecoreA11Y app:
cd src/SitecoreA11Y npm install - Configure environment variables (see Configuration below).
- Start the dev server:
npm run dev. - Register and deploy the app in the Sitecore Cloud Portal (Marketplace) and connect it to your XM Cloud Pages environment so the context panel appears in the Pages editor.
Set the following in a .env file in src/SitecoreA11Y/ (copy from .env.example). Do not commit .env or put API keys in this repository.
| Variable | Required | Description |
|---|---|---|
OPENAI_API_KEY |
Yes | Your OpenAI API key. Used by /api/scan-a11y to generate explanations and fix suggestions for accessibility violations. |
NEXT_PUBLIC_SCAN_API_BASE_URL |
No | Full URL of your deployed Next.js app (e.g. https://your-app.vercel.app) when the app is embedded in XM Cloud, so the scan can call your API. If omitted, the app uses the host's API when available. |
Example (replace with your own values locally; never commit real keys):
cp .env.example .env
# Edit .env and set OPENAI_API_KEY and optionally NEXT_PUBLIC_SCAN_API_BASE_URLWhere to find it
SitecoreA11Y runs as a context panel in the Sitecore Pages editor. After the app is registered and connected to your XM Cloud project, open any page in Pages — the accessibility panel appears in the side panel (context panel area).
How to run a scan
- In the Pages editor, open the page you want to audit.
- Open the SitecoreA11Y context panel.
- Click "Scan page accessibility".
The app injects axe-core into the page preview, runs a full WCAG audit, sends violations to the AI endpoint for explanations and fix suggestions, then shows the results in the panel. - While the scan runs, the panel shows a loading state ("Scanning accessibility...").
Reading the results
- Accessibility score — A number from 0 to 100 at the top. Color indicates severity: green (e.g. >80), amber (e.g. 60–80), red (e.g. ≤60).
- Issues list — Each item includes:
- Rule name (axe rule / issue type)
- Rendering — Sitecore component that contains the issue (when available)
- WCAG — Related WCAG criterion/criteria
- HTML snippet — Offending element markup
- Explanation — Plain-language description of the issue (AI-generated)
- Fix — Suggested fix (code or content)
- Learn more — Link to Deque’s rule documentation
Violations are also highlighted in the page preview (red outline) so you can see where each issue appears.
Optional
Expand "Renderings on page" at the bottom to see the list of renderings detected on the current page (for debugging or context).
You can add screenshots to the docs/images folder and link them here to illustrate the panel and results.
If you'd like to make additional comments that is important for your module entry.