Accessibility
What BlazOrbit does for you out of the box — keyboard navigation, focus management, ARIA roles, contrast tokens — and where you still need to help.
What you get automatically
- Native semantics. Inputs render actual
<input>/<select>/<textarea>elements — not divs with handlers. Buttons are real<button>elements. - Label association. Every input exposes a
Labelparameter which renders as a proper<label>withforlinked to the input's id. - ARIA where appropriate.
BOBDialogandBOBDrawersetrole="dialog"+aria-modal="true"and trap focus.BOBTooltipusesaria-describedby. Data collections emitrole="option"andaria-selectedon selectable rows. - Keyboard navigation. Tooltips can be triggered by focus. Modals close on Escape. Data cards and rows respond to Enter and Space.
- Disabled / required / readonly as real attributes. These are exposed through
IHasDisabled/IHasRequired/IHasReadOnlyand emitted as native HTML attributes on the underlying form element — screen readers announce them without extra work. - Focus-visible styling. The library uses
:focus-visibleeverywhere, so mouse users don't see ring outlines while keyboard users still get a clear focus indicator. - Color contrast tokens. The palette pairs every semantic color with a
*contrasttoken, so text-on-background pairings are always chosen deliberately — never accidentally.
Keyboard shortcuts by component
- Dialog / Drawer:
Esccloses, Tab cycles within the modal (focus is trapped). - Tooltip: focus shows when
Trigger=FocusorHoverAndFocus;Eschides click-triggered tooltips. - DataGrid / DataCards:
Enter/Spaceactivates a row (click handler + selection).Tabmoves between rows when interactive. - Dropdown: open with Space / Enter / ArrowDown, navigate options with arrows, select with Enter, close with Escape.
- Switch / Checkbox / Radio: Space toggles — standard browser behavior.
- DatePicker: arrow keys navigate days, Enter commits, Escape cancels.
Where you still need to help
- Meaningful labels. Every interactive control needs a
Labeloraria-label. Icon-only buttons (e.g. close, menu, delete) need an explicitAriaLabel. - Alt text on icons.
BOBSvgIconis decorative by default. If an icon conveys meaning that isn't duplicated in text, setaria-labelon the parent element or wrap it with screen-reader-only text. - Landmarks. Use
<main>,<nav>,<header>,<aside>— BlazOrbit doesn't impose a layout; you wire those yourself. - Validation messages. When an input has an error, surface the message in text (via the
ErrorTextparameter) so screen readers announce it, not just color. - Don't defeat contrast. When you override a semantic color, override its contrast pair too. Otherwise you'll end up with low-contrast text.
- Motion. Transitions are defined with keyframes. Honor
prefers-reduced-motionin any custom transitions you add.
Testing tips
- Navigate your entire page with Tab / Shift+Tab — every interactive element should be reachable and show a focus indicator.
- Zoom to 200% — no clipping, no horizontal scroll.
- Try it with Windows Narrator, macOS VoiceOver, or NVDA at least once. Landmark navigation and form labels show up quickly.
- Check both themes — light and dark palettes have independent contrast.