技术咨询：如何为Radio Button添加描述性文本？

嘿，给单选按钮加描述性文本其实有好几种实用的实现方式，我分场景给你拆解下，保证既能满足视觉需求，又符合无障碍标准：

这是最标准的做法，利用<label>标签绑定单选按钮，点击文本也能选中对应按钮，同时屏幕阅读器能正确识别关联关系。有两种写法：

写法一：将按钮和文本包裹在<label>内 #

<label style="display: block; margin-bottom: 8px;">
  <input type="radio" name="payment-method" value="credit">
  信用卡支付（支持Visa、MasterCard）
</label>
<label style="display: block; margin-bottom: 8px;">
  <input type="radio" name="payment-method" value="paypal">
  PayPal支付（快速安全）
</label>

写法二：用for属性绑定按钮的id #

这种写法适合按钮和文本需要分开布局的场景：

<input type="radio" name="payment-method" id="alipay" value="alipay">
<label for="alipay" style="display: block; margin-bottom: 8px;">支付宝支付（国内用户首选）</label>

如果需要给单选按钮加更长的说明文本（比如多行提示、套餐详情），可以用aria-describedby属性关联描述元素，确保无障碍工具能读取完整信息：

<div style="margin-bottom: 12px;">
  <input type="radio" name="subscription" id="basic" value="basic" aria-describedby="basic-desc">
  <label for="basic">基础会员</label>
  <p id="basic-desc" style="font-size: 14px; color: #666; margin: 4px 0 0 24px;">
    每月15元，包含高清视频观看权限，无广告
  </p>
</div>
<div>
  <input type="radio" name="subscription" id="vip" value="vip" aria-describedby="vip-desc">
  <label for="vip">VIP会员</label>
  <p id="vip-desc" style="font-size: 14px; color: #666; margin: 4px 0 0 24px;">
    每月30元，包含4K超清画质、专属弹幕、提前看更新等特权
  </p>
</div>

如果默认的单选按钮样式不符合设计需求，可以用CSS自定义外观，同时保留文本关联的功能：

/* 隐藏原生单选按钮 */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
}

/* 选中状态的样式 */
input[type="radio"]:checked {
  border-color: #007bff;
}

input[type="radio"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #007bff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 调整标签文本的对齐和样式 */
.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.radio-desc {
  font-size: 14px;
  color: #666;
  margin: 4px 0 0 26px;
}

对应的HTML结构：

<div class="radio-item">
  <input type="radio" name="theme" id="light" value="light">
  <label for="light">浅色主题</label>
</div>
<p class="radio-desc">适合白天使用，减少视觉疲劳</p>

React 示例 #

import { useState } from 'react';

function RadioWithDesc({ label, desc, value, name }) {
  const [selected, setSelected] = useState(null);

  return (
    <div style={{ marginBottom: '12px' }}>
      <input
        type="radio"
        id={`radio-${value}`}
        name={name}
        value={value}
        checked={selected === value}
        onChange={() => setSelected(value)}
        aria-describedby={`desc-${value}`}
      />
      <label htmlFor={`radio-${value}`} style={{ marginLeft: '8px' }}>{label}</label>
      <p id={`desc-${value}`} style={{ fontSize: '14px', color: '#666', margin: '4px 0 0 24px' }}>
        {desc}
      </p>
    </div>
  );
}

// 使用组件
<RadioWithDesc 
  label="自动备份" 
  desc="每天凌晨自动备份数据到云端，保留最近30天的备份记录" 
  value="auto" 
  name="backup" 
/>

Vue 示例 #

<template>
  <div class="radio-wrapper" style="margin-bottom: 12px;">
    <input
      type="radio"
      :id="`radio-${value}`"
      :name="name"
      :value="value"
      v-model="selectedValue"
      :aria-describedby="`desc-${value}`"
    >
    <label :for="`radio-${value}`" style="margin-left: 8px;">{{ label }}</label>
    <p :id="`desc-${value}`" class="radio-desc">{{ desc }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps(['label', 'desc', 'value', 'name']);
const selectedValue = ref('');
</script>

<style scoped>
.radio-desc {
  font-size: 14px;
  color: #666;
  margin: 4px 0 0 24px;
}
</style>

• 永远不要只用纯文本放在单选按钮旁边，必须用<label>绑定或者aria-label/aria-describedby属性，否则屏幕阅读器无法识别文本和按钮的关联。
• 同一组单选按钮必须设置相同的name属性，确保浏览器能正确处理单选逻辑（同一组只能选一个）。

内容的提问来源于stack exchange，提问作者Venkatesh Machineni