javascript - 可点击元素是如何在现代网站中实际实现的，我如何模拟点击？

Question

我正在尝试从网页中抓取所有可操作的元素——比如按钮、链接等。多亏了辅助功能，很容易找到应该可以点击的内容。但是，许多按钮具有不同的语义。

例如，Google Docs 中某个页面的一小段摘录：

<div
  id="alignRightButton"
  class="goog-toolbar-toggle-button goog-toolbar-button goog-inline-block"
  role="button"
  aria-disabled="false"
  aria-pressed="false"
  style="user-select: none;"
  aria-hidden="false"
  data-tooltip="Right align (⌘+Shift+R)"
  aria-label="Right align (⌘+Shift+R)"
>
  <div
    class="goog-toolbar-button-outer-box goog-inline-block"
    aria-hidden="true"
    style="user-select: none;"
  >
    <div
      class="goog-toolbar-button-inner-box goog-inline-block"
      style="user-select: none;"
    >
      <div class="docs-icon goog-inline-block " style="user-select: none;">
        <div
          class="docs-icon-img-container docs-icon-img docs-icon-align-right"
          aria-hidden="true"
          style="user-select: none;"
        >
          &nbsp;
        </div>
      </div>
    </div>
  </div>
</div>

最外面的 div 应该是可点击的，但我不知道如何处理该点击。调用.click()元素似乎不会激活其功能，以下内容也不会：

var simulateClick = function(elem) {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var canceled = !elem.dispatchEvent(evt);
};

我还尝试在鼠标按下时在页面上添加断点，但代码过于模糊，无法真正说明发生了什么。

所以，两个问题：

1）像谷歌文档这样的“现代”网站实际上是如何处理点击的？

2) 解释 ARIA 标签的屏幕阅读器如何将他们的操作发送回网页？

标签： javascripthtmlaccessibilitywai-ariascreen-readers