元素构建可访问的计算器结果区域
" />
为计算器结果选择正确的 HTML 语义元素至关重要： 是专为此类动态输出设计的标准标签，配合 aria-live 可确保屏幕阅读器及时播报计算结果，显著提升无障碍体验。
为计算器结果选择正确的 html 语义元素至关重要：`
在构建自定义计算器时，将计算结果显示区域标记为 <input readonly> 虽然视觉上可控，但语义错误——它向辅助技术传递了“用户可编辑”的错误信号，违背了 WCAG 原则（如 SC 4.1.2：Name, Role, Value）。正确做法是采用原生语义化元素 <output></output>。
<output></output> 元素专为展示计算结果或用户操作反馈而设计，具有明确的 ARIA role role="status"（部分浏览器自动映射），且支持 for 属性显式关联输入源（如 for="base height"），增强逻辑关系可读性。
为兼顾兼容性（尤其对尚未完全支持 <output></output> 语义的老版本屏幕阅读器），应添加 aria-live="polite" 属性。该属性使更新内容以非中断方式被朗读，避免打断用户当前操作，是动态输出场景的最佳实践。
以下是优化后的关键代码片段：
<h1>Triangle Area Calculator</h1>
<form>
<ul>
<li>
<label for="base">Triangle base:</label>
<input type="number" step="any" id="base" name="base" required onchange="checkComplete()">
</li>
<li>
<label for="height">Triangle height:</label>
<input type="number" step="any" id="height" name="height" required onchange="checkComplete()">
</li>
<li>
<label for="area">Triangle area:</label>
<!-- 语义正确 + 关联输入 + 可访问更新 -->
<output for="base height" aria-live="polite" class="result" id="area" name="result"></output>
</li>
</ul>
</form>配套 CSS（保持视觉一致性）：
.result {
box-sizing: border-box;
display: inline-block;
vertical-align: bottom;
width: 100px;
height: 1.5rem;
padding-left: 2px;
border-radius: 4px;
border: 1px solid #333;
background-color: whitesmoke;
font-family: inherit; /* 继承父级字体，确保可读性 */
}JavaScript 部分无需修改逻辑，仅需将 value 写入 <output></output> 元素（现代浏览器完全支持）：
function checkComplete() {
const base = document.getElementById("base");
const height = document.getElementById("height");
const areaOutput = document.getElementById("area");
if (base.checkValidity() && height.checkValidity()) {
areaOutput.value = (parseFloat(base.value) * parseFloat(height.value) / 2).toFixed(2);
} else {
areaOutput.value = "";
}
}注意事项总结：
- ✅ 始终用
<output></output>替代readonly <input>表达只读计算结果； - ✅ 必须设置
aria-live="polite"（或"assertive"仅当需强提示时），不可省略； - ✅
for属性值应为空格分隔的关联输入id列表，强化语义关联； - ❌ 避免使用
div+role="output"等冗余 ARIA 方式——原生语义优先； - ? 测试建议：使用 NVDA、VoiceOver 或 ChromeVox 触发计算，确认结果被清晰、及时朗读。
遵循以上规范，即可在不牺牲视觉设计的前提下，构建真正符合无障碍标准的专业计算器。
