自定义计算器输出区域的无障碍HTML语义选型咨询

你担心用readonly的<input>展示计算结果不利于无障碍访问是对的——屏幕阅读器仍会将其识别为输入控件，而非纯输出内容，这会给依赖辅助技术的用户带来认知混淆。以下是两个更合适的方案：

1. 使用HTML5 <output>元素（推荐） #

<output>是专门为表单计算结果设计的语义化元素，天生支持无障碍，能明确告知浏览器和辅助技术这是输出内容。它可以通过for属性绑定相关输入项的ID，建立输入与输出的关联关系。

修改后的代码示例： #

HTML

<h1>Triangle Area Calculator</h1>
<form id="triangleForm">
    <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 class="result" id="area" for="base height"></output>
        </li>
    </ul>
</form>

CSS

form ul {
  list-style: none;
}
.output.result {
  /* 模仿输入框样式 */
  padding: 0.3em;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: whitesmoke;
  display: inline-block;
  min-width: 100px;
}

JavaScript

function checkComplete() {
    const base_input = document.getElementById("base")
    const height_input = document.getElementById("height")
    const area_result = document.getElementById("area")
  
    if (base_input.checkValidity() && height_input.checkValidity()){
        area_result.textContent = (base_input.value * height_input.value / 2).toString()
    } else {
        area_result.textContent = ""
    }
}

2. 带aria-live的<span>元素 #

如果需要完全自定义样式，也可以用<span>配合aria-live属性——这个属性会让屏幕阅读器自动播报元素内容的动态变化，确保用户能及时获取更新的计算结果：

示例片段： #

<li>
    <label for="area">Triangle area:</label>
    <span class="result" id="area" aria-live="polite"></span>
</li>

CSS和JS修改方式与<output>方案类似，只需确保用textContent赋值即可。

这两个方案都能解决无障碍问题，其中<output>因为语义更明确，是首选方案。

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