应使用 元素替代 readonly 输入框来呈现计算结果，它专为动态输出设计；配合 aria-live="polite" 可确保屏幕阅读器及时播报更新，兼顾语义正确性与无障碍体验。
应使用 `
在构建可访问的 Web 计算器时，语义化 HTML 不仅关乎代码整洁，更直接影响残障用户（尤其是视障使用者）能否准确理解界面行为。将结果区域标记为 <input readonly> 是一种常见但错误的做法：尽管视觉上类似“只读显示区”，但其语义仍被辅助技术识别为“可输入控件”，易引发混淆或操作失败。
推荐方案：使用 <output></output> 元素
HTML5 提供了专用于展示计算结果的语义化元素 <output></output>。它天然表达“输出”含义，支持 for 属性显式关联影响它的表单控件（如本例中的 base 和 height），并在主流浏览器和现代屏幕阅读器中具备良好支持：
<li>
<label for="area">Triangle area:</label>
<output
for="base height"
aria-live="polite"
class="result"
id="area"
name="result">
</output>
</li>其中：
-
for="base height"建立语义关联，说明该输出由#base和#height的值共同决定； -
aria-live="polite"是关键增强：当 JavaScript 动态更新<output></output>的value或文本内容时，屏幕阅读器将以非中断方式播报新值（例如：“Area is 12.5 square units”），避免干扰用户当前操作； - 注意：
<output></output>默认为内联元素，需通过 CSS 设置display: inline-block或block并匹配输入框的尺寸、边框与背景，以保持视觉一致性。
JavaScript 更新逻辑保持不变，但需适配 <output></output>
由于 <output></output> 不支持 value 属性（它是替换内容元素），应使用 textContent（纯文本）或 innerHTML（若需富文本）更新内容：
function checkComplete() {
const baseInput = document.getElementById("base");
const heightInput = document.getElementById("height");
const areaOutput = document.getElementById("area");
if (baseInput.checkValidity() && heightInput.checkValidity()) {
const area = parseFloat(baseInput.value) * parseFloat(heightInput.value) / 2;
areaOutput.textContent = isNaN(area) ? "" : area.toFixed(2);
} else {
areaOutput.textContent = "";
}
}额外注意事项
- ✅ 始终为
<output></output>提供<label></label>：已包含在示例中，确保语音导航可定位； - ✅ 避免嵌套交互元素：
<output></output>内不应放置按钮、链接等，否则破坏语义； - ⚠️ 兼容性兜底：极少数老旧屏幕阅读器可能忽略
<output></output>语义，aria-live即为此类场景提供可靠降级保障； - ? 国际化提示：若计算器支持多语言，建议在
aria-live区域外补充单位说明（如<span aria-hidden="true">square units</span>），避免播报冗余。
综上，用 <output></output> 替代 readonly 输入框是一项低成本、高回报的无障碍优化——既符合 HTML 规范本意，又通过简洁的 ARIA 增强实现跨工具链的可靠支持。
立即学习“前端免费学习笔记（深入）”；
