为使用 div 实现的表格自定义辅助功能阅读器

Question

我有一个像这样实现的表，并使用适当的类使其看起来像一个表：

<div>
  <div>
    <div id="e3">
      <div role="table">
        <div role="rowgroup">
          <div role="row">
            <div colspan="1" role="cell">
              <div>
                <div><span>First Name</span></div>
              </div>
            </div>
            <div colspan="1" role="cell">
              <div>
                <div><span>Last Name</span></div>
              </div>
            </div>
            <div colspan="1" role="cell">
              <div>
                <div><span>Full Name</span></div>
              </div>
            </div>
          </div>
        </div>
        <div role="rowgroup">
          <div>
            <div>
              <div>
                <div aria-label="grid" aria-readonly="true"
                     role="grid" tabindex="0">
                  <div role="rowgroup">
                    <div>
                      <div role="row" data-row-id="e3-0">
                        <div role="cell">
                          <div>
                            <div>
                              <div>John</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>Higgins</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>John Higgins</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div
                           role="row" data-row-id="e3-1">
                        <div role="cell">
                          <div>
                            <div>
                              <div>John</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>Lennon</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>Sean Lennon</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想在手机上完全自定义语音阅读器。例如，我不希望它读取“第 3 列，共 3 列”，我希望它显示为“第三列，共三列”。

Answer 1

如果您有效地呈现表格数据，如果您可以使用

<table>

会更好，但无论如何它不会改变我的答案。

您无法更改“第 3 栏（共 3 栏）”等公告。这是一般信息，可准确告诉您在表格中导航时所处的位置。 这些信息由用户控制，如果他/她觉得它没有用，他/她可能会决定隐藏它，但你，作为开发人员或文档编写者，你无法决定什么是好或坏，有用或无用为用户提供的信息。

屏幕阅读器用户通常希望提供此信息，并且绝对有必要始终准确地知道您所在的位置，特别是当表格很大和/或具有 col/rowspan 等复杂内容时。 如果没有此类信息，作为屏幕阅读器用户，您可能会快速而轻松地迷失方向。

如果公布的列号和/或行号是错误的，这可能意味着您的标记不正确，或者您的结构太复杂。如果可能的话，你应该尝试简化它。

如果您认为谈论列和行根本没有意义，可能是您实际上没有数据表，在这种情况下，最好删除所有 ARIA 角色，告诉屏幕阅读器它是数据表。

无论如何，你不应该试图让一切都按照你喜欢的方式说出来，你也不应该害怕情况并非如此。每个用户都有他/她的偏好，即使不计算用户配置，每个屏幕阅读器提供的此类信息也略有不同。

像往常一样，了解最有效和/或最清晰的数据呈现方式的最佳方法是与真实的屏幕阅读器用户进行真正的用户体验测试。