Concept

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 Label parameter which renders as a proper <label> with for linked to the input's id.
  • ARIA where appropriate. BOBDialog and BOBDrawer set role="dialog" + aria-modal="true" and trap focus. BOBTooltip uses aria-describedby. Data collections emit role="option" and aria-selected on 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 / IHasReadOnly and emitted as native HTML attributes on the underlying form element — screen readers announce them without extra work.
  • Focus-visible styling. The library uses :focus-visible everywhere, 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 *contrast token, so text-on-background pairings are always chosen deliberately — never accidentally.

Keyboard shortcuts by component

  • Dialog / Drawer: Esc closes, Tab cycles within the modal (focus is trapped).
  • Tooltip: focus shows when Trigger=Focus or HoverAndFocus; Esc hides click-triggered tooltips.
  • DataGrid / DataCards: Enter / Space activates a row (click handler + selection). Tab moves 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 Label or aria-label. Icon-only buttons (e.g. close, menu, delete) need an explicit AriaLabel.
  • Alt text on icons. BOBSvgIcon is decorative by default. If an icon conveys meaning that isn't duplicated in text, set aria-label on 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 ErrorText parameter) 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-motion in 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.