使用语义化元素构建可访问的计算器结果区域-html教程-PHP中文网

使用语义化 <output> 元素构建可访问的计算器结果区域元素构建可访问的计算器结果区域 " />

为计算器结果选择正确的 HTML 语义元素至关重要：是专为此类动态输出设计的标准标签，配合 aria-live 可确保屏幕阅读器及时播报计算结果，显著提升无障碍体验。

为计算器结果选择正确的 html 语义元素至关重要：`` 是专为此类动态输出设计的标准标签，配合 `aria-live` 可确保屏幕阅读器及时播报计算结果，显著提升无障碍体验。

在构建自定义计算器时，将计算结果显示区域标记为虽然视觉上可控，但语义错误——它向辅助技术传递了“用户可编辑”的错误信号，违背了 WCAG 原则（如 SC 4.1.2：Name, Role, Value）。正确做法是采用原生语义化元素。

元素专为展示计算结果或用户操作反馈而设计，具有明确的 ARIA role role="status"（部分浏览器自动映射），且支持 for 属性显式关联输入源（如 for="base height"），增强逻辑关系可读性。

为兼顾兼容性（尤其对尚未完全支持语义的老版本屏幕阅读器），应添加 aria-live="polite" 属性。该属性使更新内容以非中断方式被朗读，避免打断用户当前操作，是动态输出场景的最佳实践。

以下是优化后的关键代码片段：

<h1>Triangle Area Calculator</h1>

配套 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 写入元素（现代浏览器完全支持）：

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 = "";
  }
}

注意事项总结：