可访问的定义列表MUI

Question

我正在尝试使用 MUI 制作一个可访问的定义列表（键值对），以便屏幕阅读器一起阅读术语和定义。 通过这个 html 标记我得到了想要的结果。

  <ul style={{ listStyle: 'none' }}>
    <li>
      <div>
        <span role="term">Product</span>
        <span role="definition">Car</span>
      </div>
    </li>
    <li>
      <span role="term">Price</span>
      <span role="definition">1250$</span>
    </li>
  </ul>

我不使用

dl

、

dt

和

dd

的原因是因为大多数屏幕阅读器不支持它们。 https://a11ysupport.io/

当使用 MUI 时，我最终得到了这个

  <List>
    <ListItem>
      <ListItemText
        primary="Product"
        secondary="Car"
        slotProps={{
          primary: {
            role: 'term',
          },
          secondary: {
            role: 'definition',
          },
        }}
      />
    </ListItem>
  </List>

这不起作用，需要逐字阅读，而不是作为术语/定义。添加

aria-labelledby

和

aria-describedby

不会改变行为。

两个示例在浏览器中的呈现方式完全相同。为什么使用 MUI 组件时会出现故障？

这是一个 StackBlitz 展示不同变体的链接

Answer 1

您说过“这两个示例在浏览器中的呈现方式完全相同”，但事实并非如此。 MUI 版本呈现此 HTML（为了清晰起见，删除了类）：

<ul>
  <li>
    <div>
      <span role="term">Product</span>
      <p role="definition">Car</p>
    </div>
  </li>
</ul>

请注意，定义元素呈现为段落，而不是您在 HTML 示例中使用的跨度。段落是块级元素，屏幕阅读器在块级元素之前和之后中断是正常的。这就是导致中断的原因。将此段落更改为跨度将使其读起来像 HTML 示例一样。