Short note on what CSS display properties do to table semantics
Posted on Sunday, 4 March 2018 by Steve Faulkner
CSS的display属性非常强大。你可以用它来改变元素的视觉展示以匹配期望的样式，但有时候这样做可能会在浏览器可访问性树（browser accessibility tree）中产生意想不到的影响，如传达给屏幕阅读软件的元素的语义。通常情况下，屏幕阅读器和其他辅助技术并不能直接访问HTML DOM，他们通过可访问性API（Accessibility APIs）获取HTML DOM的部分信息。有时候，一个元素在HTML DOM中和可访问性树中会有不同的表示（represents）。
如果在可访问性树中的表示并不符合开发人员预期，它可能是开发人员或浏览器的错误（有意或无意的）。但我们可以确定的是，它不是屏幕阅读器的错。
一个示例
the good
具有默认display属性的数据表格，其在浏览器可访问性树的表示正确传达了每个元素的语义。
每个元素在可访问性树中表示为适当的角色，例如：a table element has a role=table。
the bad
当设置table元素的display属性为block、grid或flex时，不好的事情发生了。table元素将不再表示为table（在可访问性树中），表格行元素/语义不以任何形式表示。
在可访问性树中，没有任何元素以数据表格语义表示，它们的角色都分配为role=Text frame。
可以使用ARIAtable/row/colunmheader/rowheader/cell角色（参见ARIA table design pattern ）添加语义来解决这个问题，但这对开发者来说是本不应该需要的繁重工作。 在这种情况下，浏览器不该混淆表格语义。
If nothing else, a developer should be aware that it is not always the fault of the assistive technology when we can’t have nice things.
