使用MUI构建无障碍定义列表遇屏读兼容问题求助

问题根源 #

1. MUI组件嵌套层级干扰语义识别：<ListItemText>会自动将primary和secondary内容包裹进<Typography>组件，额外的外层容器会打断屏幕阅读器对role="term"/role="definition"的语义关联，屏幕阅读器可能优先读取<Typography>的默认文本角色，忽略你手动设置的自定义role。
2. 原生与MUI的DOM结构差异：原生<ul>+<span>方案是扁平化结构，语义直接传递；但MUI组件渲染后会生成多层嵌套元素，破坏了原生语义链的连续性。
3. aria属性失效原因：MUI组件在渲染时可能动态生成或修改元素ID，导致你手动设置的aria-labelledby/aria-describedby无法正确关联到目标元素，自然起不到语义绑定作用。

修复方案 #

• 复用原生语义结构+MUI样式：绕过<ListItemText>，用原生<span>配合MUI的Typography样式类，既保留无障碍语义，又能复用MUI的排版样式：

import { List, ListItem, typographyClasses } from '@mui/material';

// 组件内使用
<List>
  <ListItem>
    <span role="term" className={typographyClasses.body1}>用户名称</span>
    <span role="definition" className={typographyClasses.body2}>用于标识平台内用户的唯一名称</span>
  </ListItem>
</List>

• 手动控制Typography底层标签：强制让<Typography>渲染为<span>，确保role直接作用在文本的直接父容器上，避免层级干扰：

<ListItemText
  primary={<Typography component="span" role="term">用户名称</Typography>}
  secondary={<Typography component="span" role="definition">用于标识平台内用户的唯一名称</Typography>}
/>

• 验证DOM结构：通过浏览器开发者工具查看最终渲染的HTML，确认role属性是否正确应用在文本节点的直接父元素上，同时检查aria关联的ID是否存在且唯一。

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