MUI: Tab焦点跳过一些重要文本，影响可访问性

Question

我有一个带有图像链接的appbar，一个警告，向用户显示他们所处的环境，以及一些显示当前登录用户详细信息的文本。

我正在用屏幕阅读器测试可访问性，但是侧边栏中的链接跳过了关注用户详细信息的选项卡。

如何让标签正确地关注用户详细信息?

<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div>
<Box style={{ display: "flex", alignItems: "center" }}>
<a aria-label="Logo Link to home page" className={classes.prodLink} href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography aria-label="environment warning" className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
<a
aria-label="Link to production environment"
className={classes.prodLink}
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
rel="noreferrer"
>
here
</a>{" "}
to go to production.
</Typography>
</Box>
// The user details are here.  Focus on this information is being skipped
<Box
id="user-info-box"
aria-label="Logged in user details"
>
<i icon }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography className={classes.userInfo} aria-label="User name and role">
{loggedUser} {userRole}
</Typography>
<Typography className={classes.userInfo} aria-label="User's experience">
{userExperience}
</Typography>
</Box>
</Box>
</div>
</Toolbar>
</AppBar>

Answer 1

使用tabindex使用户详细信息可聚焦。有关详细信息，请参阅此回答:影响材质UI控件的选项卡顺序

也许这个链接也会有所帮助:https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex?retiredLocale=de

Answer 2

用户详细信息是什么意思?像表单一样要填写的东西还是纯文本?

您不使用tab键与纯文本(如<p>)交互，您可以使用箭头键滚动以读取信息。tab键用于与链接和按钮交互。