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.