在 GOV.UK Design System 中，Radios（单选）组件用于让用户从列表中仅选择一个选项。当用户选择特定选项后，可通过代码实现相关内容的条件性显示，同时需严格遵循无障碍标准。
何时使用与基本设置
当用户只能选一项时使用 Radios；若允许多选则改用 Checkboxes 组件。Radios 必须置于<fieldset>标签内，并配合<legend>说明问题内容。若页面仅有一个问题，<legend>内容可设为页面标题，利于屏幕阅读器识别。
条件显示的实现方式
系统支持通过 data-aria-controls 属性关联隐藏内容。例如，当用户选择“Email”选项时，其对应的输入框（id 为 conditional-contact）会显示；其他选项则保持隐藏（class 包含 govuk-radios__conditional--hidden）。实现时需确保每个单选按钮的 data-aria-controls 值与目标内容的 id 一致。
代码示例结构如下：
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input type="radio" value="email" data-aria-controls="conditional-contact">
<label for="contact">Email</label>
</div>
<div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact">
<!-- 条件显示内容 -->
</div>
</div>
Nunjucks 模板中可使用 conditional.html 参数直接传入需显示的 HTML 片段，简化开发流程。
无障碍注意事项
虽然条件显示能提升体验，但存在已知问题：用户（尤其是屏幕阅读器使用者）可能未收到内容显隐的明确通知，这不符合 WCAG 2.2 标准 4.1.2。不过测试表明，只要条件内容简单、无多部分结构，辅助技术用户仍能顺利作答。
因此建议：
- 仅对简单问题进行条件显示；
- 避免在复杂表单或含多个子项的问题中使用此功能；
- 若问题较复杂，应在后续页面逐步引导用户完成。
错误处理与提示
若用户未选择任何选项或未回答条件问题，应显示错误信息。错误文本需具体明确，如“请选择您居住的国家和地区”。对于条件性问题，错误信息应关联至初始问题，避免混淆。
其他使用建议
- 单选选项默认按字母顺序排列；也可按常见程度排序（如人口规模），但需谨慎以防强化偏见。
- 若选项差异明显，可用文本分隔符（如“or”）区分不同组别。
- 提示文字应简短、无句号，且不含链接。
- 不预勾选任何选项，避免用户误判或遗漏作答。
综上，通过合理设置 data-aria-controls 与隐藏类名，结合简单内容策略，可在保障无障碍的前提下实现 Radios 的条件显示功能。