修改<li>元素的display属性是否会使其丢失语义？

背景：表格的display属性对语义的影响 #

当为table元素设置CSS display:block、display:grid或display:flex时，会出现问题。该表格在无障碍树中不再被识别为表格，行元素/语义也不再以任何形式呈现。

默认display属性下表格的无障碍树：

修改display属性值后表格的无障碍树：

问题 #

这一情况是否同样适用于默认display属性为list-item的<li>元素？例如，以下内联列表是否存在语义错误？

示例代码 #

CSS

li {
  display: inline;
  margin: 0 1rem;
}

HTML

<ul>
  <li>
    <a href="example.com">example 1</a>
  </li>
  <li>
    <a href="example.com">example 2</a>
   </li>
   <li>
    <a href="example.com">example 3</a>
   </li>
</ul>

解答 #

修改<li>的display为inline不会破坏列表的语义，和表格的情况完全不同：

• 表格的语义依赖于display的table系列值（如table、table-row）来构建无障碍树中的表格结构，一旦替换为block/grid/flex，浏览器就会丢弃表格相关的语义识别。
• 而列表的语义是由<ul>/<ol>和<li>的HTML标签本身决定的，修改<li>的display仅仅是改变布局表现，不会影响无障碍树对列表及列表项的识别。屏幕阅读器依然会正常播报这是一个列表，并告知列表包含的项数，每个<li>也会被识别为独立的列表项。

如果需要实现横向列表，更推荐使用flex布局，同样不会破坏语义且布局更灵活：

ul {
  display: flex;
  gap: 1rem;
}

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