我应该使用什么 HTML 语义来使自定义计算器的输出易于访问？

Question

我正在开发一个简单的计算器工具。现在，我使用带有

<input>

属性的

readonly

元素来设置计算结果的样式。然而，虽然我认为这会产生理想的美感，但我担心这对于可访问性来说是一个糟糕的选择，因为这不是输入，而是输出。这里使用不同的 HTML 元素更合适吗？

这是我正在尝试做的事情的一个小复制品：

<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>
            <input type="number" step="any" class="result" id="area" name="result" readonly>
        </li>
    </ul>
</form>

form ul {
  list-style: none;
}
input.result{
  background-color: whitesmoke;
}

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

这是 JSFiddle 项目中的上述内容。

Answer 1

<output>

：输出元素

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

form ul {
  list-style: none;
}
input.result{
  background-color: whitesmoke;
}

<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" class="result" id="area" name="result"></output>
        </li>
    </ul>
</form>