Hyper-V Manager and Windows Admin Center: Aligning Accessibility Features in Virtual Machine Creation Workflows

ARIA Attributes and Narrator Hints for Admin Center VM Creation

To match Hyper-V Manager's UI Automation announcements, apply these WAI-ARIA patterns to the Windows Admin Center VM creation wizard:

Wizard Container and Steps

• role="dialog" with aria-modal="true" on the wizard root — traps screen-reader focus inside the flow.
• aria-labelledby="wizard-title" referencing a heading (<h1 id="wizard-title">Create Virtual Machine</h1>) so Narrator announces the wizard purpose on entry.
• Each step panel: role="region" aria-labelledby="step-N-title" where the step title is an <h2 id="step-N-title">.

Form Controls

• Every <input>, <select>, <textarea> must have an explicit <label for="control-id"> or aria-labelledby="label-id" — this replicates Hyper-V Manager's labeled-control behavior.
• Helper text (format hints, validation rules): aria-describedby="hint-id" pointing to a visually hidden <span id="hint-id" class="sr-only"> element. Example: aria-describedby="vm-name-hint" with <span id="vm-name-hint" class="sr-only">Name must be 1-64 characters, alphanumeric and hyphens only</span>.
• Required fields: aria-required="true" plus required attribute.
• Error states: aria-invalid="true" and aria-describedby="error-id" linking to the live error message.

Navigation Buttons

• Previous/Next/Finish: <button> with visible text; add aria-disabled="true" when inactive (not disabled if you want focusable but announced as unavailable).
• Cancel: aria-label="Cancel virtual machine creation" if icon-only.

Live Regions for Dynamic Updates

• Validation summaries: role="alert" aria-live="assertive" container that appears only when errors exist.
• Progress steps: role="status" aria-live="polite" for step-change announcements ("Step 2 of 5: Configure Hardware").

High Contrast Theme Standardization

Hyper-V Manager inherits Windows system colors automatically via UIA. For Admin Center, enforce parity with CSS system-color keywords and the prefers-contrast media query:

CSS System-Color Tokens

:root {
  --bg: Canvas;
  --text: CanvasText;
  --link: LinkText;
  --button-bg: ButtonFace;
  --button-text: ButtonText;
  --button-border: ButtonBorder;
  --input-bg: Field;
  --input-text: FieldText;
  --input-border: GrayText;
  --focus-ring: Highlight;
  --focus-text: HighlightText;
}

@media (prefers-contrast: more) {
  :root {
    --input-border: ButtonBorder; /* stronger border in forced-colors */
    --focus-ring: ButtonText;     /* visible focus in high contrast */
  }
}

/* Forced-colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .vm-wizard { forced-color-adjust: auto; }
  .vm-wizard button { border: 1px solid ButtonBorder; }
  .vm-wizard input, .vm-wizard select { border: 1px solid GrayText; }
  .vm-wizard :focus { outline: 2px solid Highlight; outline-offset: 2px; }
}

Implementation Checklist

1. Replace all hardcoded hex/rgb colors with the system-color variables above.
2. Remove background-image gradients on buttons/inputs — they disappear in forced-colors mode.
3. Ensure focus outlines use Highlight / HighlightText (not custom blues).
4. Test with @media (forced-colors: active) overrides for any SVG icons (use currentColor for strokes/fills).

Verification Steps

1. Run Accessibility Insights for Windows against both Hyper-V Manager (select the MMC window) and Admin Center (Edge/Chrome DevTools → Accessibility tab). Compare UIA tree vs. DOM tree for name, role, value, and state parity on each control.
2. Enable Narrator (Win+Ctrl+Enter) and walk the full VM creation flow in both tools. Verify: wizard title announced on entry, each control announces name + hint + required state, errors announced immediately, step changes announced.
3. Turn on High Contrast (Settings → Accessibility → Contrast themes). Confirm all text meets 4.5:1, borders visible, focus indicator visible, no content lost.
4. Test in Edge (Chromium) and Firefox — ARIA support differs slightly (e.g., aria-describedby on <select> announced in Edge but not Firefox without role="combobox").

Open Diagnostic Question

Which Windows Admin Center version (e.g., 2303, 2403, 2503) and target browser baseline (Edge 118+, Firefox 115+, Chrome 118+) are you supporting? Legacy WAC releases (< 2209) lack prefers-contrast support and may require a polyfill or fallback stylesheet.