Какую семантику HTML следует использовать, чтобы сделать вывод пользовательского калькулятора доступным?

Я разрабатываю простой калькулятор. Прямо сейчас я использую элемент <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.