我需要一些帮助才能使 NVDA 屏幕阅读器读取我在 index.html 中编写的数学表达式的自定义描述。数学表达式位于句子内。所以它看起来很像这样：
<div>
some text here...
ε<sub>x</sub> = -200(10<sup>-6</sup>),
ε<sub>y</sub> = 550(10<sup>-6</sup>),
γ<sub>xy</sub> = 150(10<sup>-6</sup>)
some more text here...
<div>
问题是屏幕阅读器无法读取上标或减号。
为了解决这个问题，我添加了aria-labelledby一个自定义描述：
<label id="label">Formula description here</label>
<div>
some text here...
<span aria-labelledby="label">
ε<sub>x</sub> = -200(10<sup>-6</sup>),
...
</span>
<div>
它部分解决了问题（仅限 Voice Over/MacOS）。但 Windows/NVDA/Firefox 不起作用。它只是忽略它。
我尝试过使用aria-labelandaria-describedby但似乎不起作用。提前致谢。
基本上，我正在尝试克隆一个元素并在 React.cloneElement 中更改其 aria-label 。我有一个组件 - ButtonArrows - 它创建两个 Button 组件，一个带有指向左侧的箭头图标，一个指向右侧。我希望能够以编程方式更改 aria-label，但连字符会引发错误。
下面是一些代码，显示了我正在尝试执行的操作：
const ButtonArrows = ({leftArrow, rightArrow, ...props})
const prevButton = (
<Button
aria-label="Previous",
icon={leftArrow}
/>
);
const nextButton = React.cloneElement(prevButton, {
//this is where the problem is:
aria-label="Next",
icon={rightArrow}
});
return(<div {...props}>{prevButton}{nextButton}</div>);
}
aria-label="Next"显然由于连字符我不能这样做。
有什么建议么？不幸的是，当涉及到 aria 标签时，React 没有类似htmlFor( 代表) 的东西。html-for我应该在 Button 上放置一个 ariaLabel 道具并将其传递下来，还是有一种方法可以直接使用我缺少的 cloneElement 来完成此操作？
我是一名开发人员，致力于使应用程序更易于访问，并且对 JAWS 非常陌生。
我读过的所有内容都aria-describedby让我相信，将其添加到fieldset包含描述的元素的 ID 中将导致当用户访问字段集（参见MDN）
但是当我测试它时，这不会发生。我已经检查过ID是正确的。
我是否误解了如何aria-describedby工作？我需要在 JAWS 中启用某个设置才能正确读取 aria 属性吗？
我目前有这个 div 与 aria-live=assertive：
<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>
目前，在我的 js 文件中，我有一种方法可以使用 tabindex （第一个标题）然后设置页面中的所有内容<p>。一旦此方法完成，我想通过我的 aria live 通知用户他现在可以使用选项卡导航：
var ariaAlert = document.getElementById('accesibility__ready');
ariaAlert.setAttribute('aria-label','Content updated tab navigation ready');
我注意到有时 aria-live 会被读取，但随后它会被所有其他标签（不是 aria-live）打断，屏幕阅读器以某种方式决定读取这些标签。
我正在使用 Chrome 和 ChromeVox 扩展程序。
那么如何阻止 aria-live 被其他厂牌打断呢？
我正在研究可访问性问题。我有一个旋转/加载器，当数据加载时它会出现在屏幕上。
<spinny aria-live="polite" role="alert" aria-label="Loading Page">
因此，当 Spinny 出现在屏幕上时，屏幕阅读器会提醒我 Spinny 已加载。现在我希望当 Spinny 离开屏幕时，我希望屏幕阅读器提供诸如已加载数据之类的消息。
我尝试过 aria-relevant、aria-atomic 等，但似乎没有任何效果。
我正在与辅助功能合作。当用户通过画外音访问电话时，他们使用向右滑动和向左滑动来到达该元素。我正在尝试检测页面级别的滑动，因此根据操作和当前活动元素，我可以动态地遍历。我们如何在 JavaScript 中检测网页级别的滑动？
我有一个两侧的移动菜单抽屉，它依赖一个隐藏的复选框在两侧之间切换/切换。
有两个 LABEL 元素，菜单抽屉的每一侧一个。每个 LABEL 通过其 FOR 属性引用隐藏 INPUT 复选框的 ID。因此，单击显示的 LABEL 会检查 INPUT 复选框并导致菜单切换侧（通过 CSS）。HTML的提炼是：
<ul class=main-menu>
<li>
<input id=toggle-drawer type=checkbox title="hidden checkbox">
<label for=toggle-drawer>See Sub Menu</label>
<ul class=sub-menu>
<li>
<label for=toggle-drawer>See Main Menu</label>
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li>Main Menu item 1</li>
<li>Main Menu item 2</li>
<li>Main Menu item 3</li>
</ul>
事实上，具有多个引用同一输入项的标签是完全有效的 HTML。
见https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1：
“通过 for 属性创建多个引用，可以将多个 LABEL 与同一个控件相关联。”
但是，WebAIM WAVE（Web 可访问性评估工具）浏览器扩展将这两个标签标记为错误，说明：
“一个表单控件最多应该有一个关联的标签元素。如果多个标签元素与控件关联，辅助技术可能无法读取适当的标签。”
作为补救措施，它继续说明：
“如果需要多个表单标签，请使用 aria-labelledby。”
aria-labelledby 似乎不适用于我的情况，因为它会被放在一个 DIV …
我的页面上有一个元素，它水平溢出并用于overflow: auto允许内容滚动到视图中。所有内容都在加载时呈现（即它始终存在于 DOM 中，在滚动到视图中时不呈现）。
页面上还有两个自定义按钮，它们使用 JavaScript 将此元素向左和向右滚动。
我需要鼠标用户可以点击按钮，键盘用户可以聚焦按钮。但对于屏幕阅读器用户来说，这些按钮实际上没有任何作用，因为元素滚动这一事实与屏幕阅读器无关，无论如何，屏幕阅读器都会宣布所有内容。
我尝试放置aria-hidden按钮容器，但这不符合可访问性规则aria-hidden-focus（请参阅https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/），因为按钮仍然可聚焦。
我的目标是为所有用户实现最佳体验，这对于屏幕阅读器意味着隐藏无用的按钮。但如果不使用 JavaScript 来尝试检测屏幕阅读器，我就无法找到一种方法来做到这一点，这似乎有点粗俗且容易出错。
有没有一种方法可以解决这个问题，同时提供良好的整体体验？
我在无序列表中有一个链接如下:
<li class="savelink">
<a href="/save"><span>Save</span></a>
</li>
通常屏幕阅读器会显示"保存".是否有可能以及使用哪个属性在不更改实际链接文本的情况下更改该属性？
业务需求是有一个链接,用图标设置样式.该图标将与链接文本互补.例如:
我尝试了咏叹调标签,没有成功.
有没有办法搜索所有display:none使用属性的实例,并aria-hidden="true"使用JavaScript 添加属性.
我的网站有数百个这样的实例,我正在寻找一个更快的方法.
它可能是这样的:(添加到一个函数)
$(*).css( "display", "none" ).attr( "aria-hidden", "true" );