Every component here is keyboard-operable and screen-reader tested. Try it — unplug your
mouse.
Beta: the inventory and the markup below come straight from the toolkit's
generated export (oeltkit/oeltkit) — the
same source the components ship from. Every component is
pending manual NVDA/VoiceOver passes. The markup is real, and the demos run live —
@oeltkit/components is published (0.1.0). Two components
(<oelt-media> and <oelt-hotspot>) need a sample
media or image asset we don't ship, so they stay as static examples here.
<oelt-mcq>multiple choice / multiple response
beta
Which standard does cmi5 build on?
SCORM 1.2xAPIAICC
Right — cmi5 is an xAPI profile.
Not quite — cmi5 is built on xAPI.
View source — the exact markup an LLM writes
<!-- single answer -->
<oelt-mcq id="q1" mode="single" key="b">
<p slot="prompt">Which standard does cmi5 build on?</p>
<oelt-option value="a">SCORM 1.2</oelt-option>
<oelt-option value="b">xAPI</oelt-option>
<oelt-option value="c">AICC</oelt-option>
<p slot="correct">Right — cmi5 is an xAPI profile.</p>
<p slot="incorrect">Not quite — cmi5 is built on xAPI.</p>
</oelt-mcq>
<!-- multiple response: key lists every correct value -->
<oelt-mcq id="q2" mode="multiple" key="a c">
<p slot="prompt">Select every accessibility requirement (choose all that apply).</p>
<oelt-option value="a">Keyboard operable</oelt-option>
<oelt-option value="b">Mouse only</oelt-option>
<oelt-option value="c">Visible focus</oelt-option>
</oelt-mcq>
<!-- ungraded poll: omit key, add manual-grade -->
<oelt-mcq id="poll1" manual-grade>
<p slot="prompt">How confident are you?</p>
<oelt-option value="low">Low</oelt-option>
<oelt-option value="high">High</oelt-option>
</oelt-mcq>
Accessibility — how it behaves without a mouse
Light DOM, fully keyboard-operable, visible focus, screen-reader documented in its spec, axe-clean, honors prefers-reduced-motion.
The live demo needs a captioned sample video, which isn’t part of the toolkit export — so it stays a static example here, not a mocked-up player. (<oelt-media> refuses to render without captions or a transcript — that’s the feature.) The canonical markup is below.
<!-- text: one accepted answer, or several via | -->
<oelt-text-entry id="capital" answer="Paris">
<p slot="prompt">What is the capital of France?</p>
<p slot="correct">Correct — Paris.</p>
<p slot="incorrect">Not quite — it's Paris.</p>
</oelt-text-entry>
<!-- numeric with tolerance -->
<oelt-text-entry id="pi" mode="numeric" answer="3.14" tolerance="0.01">
<p slot="prompt">Estimate π to two decimal places.</p>
</oelt-text-entry>
<!-- open response (no key): captured, marked completed -->
<oelt-text-entry id="why" manual-grade>
<p slot="prompt">In a word, how did this lesson feel?</p>
</oelt-text-entry>
Accessibility — how it behaves without a mouse
the prompt is the input's `<label>`; on submit, focus moves to the `aria-live="polite"` feedback and correctness is conveyed in text (visually-hidden "Correct"/"Incorrect" prefix), never colour alone. Numeric mode uses `inputmode="decimal"` on a text input (not `type="number"`) for a numeric soft keyboard without spinbutton/locale pitfalls.
<oelt-quiz id="final" mastery="0.7">
<oelt-mcq id="q1" mode="single" key="b" weight="1">
<p slot="prompt">Which standard is recommended for new content?</p>
<oelt-option value="a">SCORM 1.2</oelt-option>
<oelt-option value="b">cmi5</oelt-option>
</oelt-mcq>
<oelt-text-entry id="q2" answer="cmi5" weight="2">
<p slot="prompt">Name that standard (one word).</p>
</oelt-text-entry>
</oelt-quiz>
Accessibility — how it behaves without a mouse
a `::part(status)` live region announces progress ("Answered 1 of 2 questions") and the final outcome ("Quiz complete. Score 75%."); pooled-out questions get `hidden`.
PlanBuildTestShipView source — the exact markup an LLM writes
<oelt-ordering id="lifecycle">
<p slot="prompt">Put the steps in order, first to last.</p>
<oelt-item value="plan">Plan</oelt-item>
<oelt-item value="build">Build</oelt-item>
<oelt-item value="test">Test</oelt-item>
<oelt-item value="ship">Ship</oelt-item>
</oelt-ordering>
Accessibility — how it behaves without a mouse
Light DOM, fully keyboard-operable, visible focus, screen-reader documented in its spec, axe-clean, honors prefers-reduced-motion.
ParisTokyoCairoView source — the exact markup an LLM writes
<oelt-matching id="capitals">
<p slot="prompt">Match each country to its capital.</p>
<oelt-pair prompt="France" value="paris">Paris</oelt-pair>
<oelt-pair prompt="Japan" value="tokyo">Tokyo</oelt-pair>
<oelt-pair prompt="Egypt" value="cairo">Cairo</oelt-pair>
</oelt-matching>
Accessibility — how it behaves without a mouse
Light DOM, fully keyboard-operable, visible focus, screen-reader documented in its spec, axe-clean, honors prefers-reduced-motion.
OELTKit ships accessible interaction components your AI assistant authors as plain HTML.
Each is a vanilla custom element, styled entirely by your theme tokens — no framework, no build step.
A long-standing standard for packaging and tracking e-learning in an LMS.
A modern xAPI profile for launching and tracking content, without SCORM's single-status limit.
Closest planet to the Sun.
Hottest planet.
View source — the exact markup an LLM writes
<oelt-tabs id="topics">
<oelt-tab label="Overview"><p>…</p></oelt-tab>
<oelt-tab label="Details"><p>…</p></oelt-tab>
</oelt-tabs>
<oelt-accordion single>
<!-- `single` = one section open at a time -->
<oelt-panel label="What is SCORM?"><p>…</p></oelt-panel>
<oelt-panel label="What is cmi5?"><p>…</p></oelt-panel>
</oelt-accordion>
<oelt-flip-cards>
<oelt-card front="Mercury"><p>Closest planet to the Sun.</p></oelt-card>
<oelt-card front="Venus"><p>Hottest planet.</p></oelt-card>
</oelt-flip-cards>
Accessibility — how it behaves without a mouse
Light DOM, fully keyboard-operable, visible focus, screen-reader documented in its spec, axe-clean, honors prefers-reduced-motion.
The live demo needs a sample diagram image, which isn’t part of the toolkit export — so it stays a static example here rather than an invented illustration. The canonical markup is below.