自定义单选按钮：如何让讲述器读出选中状态及无障碍属性疑问

Hey there! Let's tackle this accessibility issue with custom radio buttons. I’ve run into this exact problem before, so I know how tricky it can be to get screen readers like Narrator to play nice with custom controls.

The Core Issue: Don’t Reinvent the Wheel #

When you build custom radio buttons from scratch (without using the native <input type="radio">), you’re throwing out all the built-in accessibility semantics that browsers and screen readers rely on—including the automatic "selected/not selected" announcements.

The best practice is to build your custom visuals on top of the native radio button instead of replacing it entirely. This way, you keep all the out-of-the-box accessibility support while getting the custom look you want.

How to Implement This Properly #

Here’s a step-by-step approach:

1. Visually hide the native radio button (but don’t make it invisible to screen readers). Avoid display: none or visibility: hidden—use a "visually hidden" CSS class that keeps the element in the accessibility tree.
2. Use sibling selectors to style a custom visual element based on the native radio’s state (checked/unchecked).
3. Link the custom visual to the native input with a <label> tag, so clicking the custom element toggles the radio button.

Example code to illustrate:

<div class="custom-radio-group">
  <!-- Native radio, visually hidden -->
  <input type="radio" id="opt1" name="favorite-color" class="visually-hidden">
  <!-- Custom visual + label -->
  <label for="opt1" class="custom-radio">
    <span class="radio-dot"></span>
    Blue
  </label>

  <input type="radio" id="opt2" name="favorite-color" class="visually-hidden">
  <label for="opt2" class="custom-radio">
    <span class="radio-dot"></span>
    Green
  </label>
</div>

<style>
/* Visually hidden but accessible to screen readers */
.visually-hidden {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.custom-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 8px 0;
}

.radio-dot {
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 50%;
  transition: all 0.2s;
}

/* Style for checked state */
input[type="radio"]:checked + .custom-radio .radio-dot {
  background-color: #2196F3;
  border-color: #2196F3;
}

input[type="radio"]:checked + .custom-radio .radio-dot::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px auto;
  background-color: white;
  border-radius: 50%;
}
</style>

With this setup, Narrator will behave exactly like it does with native radio buttons—announcing "Blue, radio button, not selected" or "Green, radio button, selected" as you navigate, no extra work needed.

What About ARIA Attributes? #

Your question about aria-label, aria-labelledby, and aria-describedby is spot-on—these are safe and often necessary for accessibility, as long as you use them correctly:

• aria-label: Use this if there’s no visible text label for your radio button (e.g., an icon-only control). It adds a text description directly to the element.
• aria-labelledby: Better if you have a visible text label—link the radio button to the label’s ID. This is more flexible (supports dynamic text changes, multi-language, etc.).
• aria-describedby: Use this to add extra context or instructions (e.g., "Select your primary color"). It doesn’t replace the control’s name, just supplements it.

None of these will cause accessibility issues when used appropriately—they’re designed to improve accessibility for users relying on assistive tech.

If You Must Build a Fully Custom Radio Button #

If for some reason you can’t use the native input (rare, but possible), you’ll need to manually replicate all the native accessibility features:

• Add role="radio" to your custom element.
• Use aria-checked="true" or aria-checked="false" to explicitly set the state (this is what tells Narrator to announce "selected/not selected").
• Handle keyboard interactions: Ensure the control is focusable with Tab, and toggles state when Space or Enter is pressed.
• Manage group exclusivity: When one radio is selected, set aria-checked="false" on all others in the same group (native radios do this automatically).

But honestly, this is way more work and error-prone than just building on top of the native input. Stick with the first approach whenever possible.

内容的提问来源于stack exchange，提问作者Sayantan Ghosh