无障碍优化：键盘导航至动态表头Submit按钮的逻辑设计问题

示例代码 #

HTML代码

<div id="app"></div>

JavaScript代码

function onChange(e) {
  total += parseInt(e.target.value);
  headerCellButton.value = 'Submit: ' +  total;
}

function createHeaderRow(){
  headerRow = document.createElement("tr");
  headerCell = document.createElement("th");
  headerCell.textContent = 'Type';
  headerRow.appendChild(headerCell);
  headerCell1 = document.createElement("th");
  headerCellButton = document.createElement('input');
  headerCellButton.type = 'button';
  headerCell1.appendChild(headerCellButton);

  headerRow.appendChild(headerCell1);

  table.appendChild(headerRow);
}

function createRow(text){
  tr = document.createElement('tr');
  td = document.createElement('td');
  td.innerText = text;
  tr.appendChild(td);

  td = document.createElement('td');
  tr.appendChild(td);
  var input = document.createElement('input');
  input.addEventListener("input", onChange);
  input.type = 'text';
  td.appendChild(input);
  table.appendChild(tr);
}

const appDiv = document.getElementById('app');
var total = 0;
var headerCellButton;
var table = document.createElement("table"),
  tr,
  td,
  row,
  cell;

  createHeaderRow();
  createRow('Enter Amount to Buy Bannana');
  createRow('Enter Amount to Buy Cauli FLower');
  createRow('Enter Amount to Buy Beetroot');
  createRow('Enter Amount to Buy Carrot');
  createRow('Enter Amount to Buy Orange');
  createRow('Enter Amount to Buy Pomogranate');
  createRow('Enter Amount to Buy Potato');
  createRow('Enter Amount to Buy Tomato');

  table.border = '1px';
  appDiv.appendChild(table);

界面截图 #

问题说明 #

如上述示例应用及截图所示，鼠标用户操作便捷——无需填写所有行的数值，就能直接点击Submit按钮。

但键盘用户体验存在问题：需要多次按Tab键才能定位到Submit按钮。理想状态下，用户输入完一个数值后按Tab键应直接跳转至Submit按钮，但这里存在矛盾——我们无法判断用户是想直接提交，还是想继续填写更多数值后再提交。

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