material-ui Setting Select to be readOnly does not have proper setup for Accessibility

wz1wpwve  于 6个月前  发布在  其他
关注(0)|答案(6)|浏览(60)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

链接到实时示例:
步骤:

  1. 为Select设置InputProps中的readOnly属性
  2. 使用Jaws 2023来听选择字段是“只读”的
  3. Jaws没有为该字段宣布只读。这也适用于mui网站上的文档。

当前行为 😯

  • 无响应*

预期行为 🤔

Jaws 2023不应为该字段宣布“只读”。我已经尝试了几种不同的方法,并在在网上寻找解决方案后发布了此问题。

上下文 🔦

为了让Select组件在某种程度上设置为只读时宣布只读。

您的环境 🌎

npx @mui/envinfo

Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
sdnqo3pr

sdnqo3pr1#

我目前无法访问JAWS,但似乎NVDA和VoiceOver都忽略了组合框上的aria-readonly属性。你有没有看到任何自定义选择组件的例子,它们可以正常工作?

kmpatx3s

kmpatx3s2#

@michaldudak,不,我没有。我搜索了许多搜索引擎和stackoverflow寻找任何解决方案,但结果只是将选择字段设置为禁用状态。通常情况下,屏幕阅读器甚至不会宣布它们的存在。正如我所看到的,对于所有的Mui组件来说,如果"disabled",它们就不再在选项顺序中了。因此,将"readOnly"设置为非常重要,以便在所有输入组件上工作,这样字段至少会被宣布,最好是使用"read only"。

dwbf0jvd

dwbf0jvd3#

我们可以设置他们的aria-disabled,这样他们仍然可以聚焦,并且应该由屏幕阅读器宣布。

dtcbnfnu

dtcbnfnu4#

@michaldudak,这是一个我们已经实现的选项,这样我们就可以集中精力解决主要问题。我认为需要解决的问题是,在某种程度上将"select"组件设置为"readOnly"时,会听到"只读"。我尝试通过Select的许多属性选项来实现它。我在想也许可以提供我们自己的"Input"元素,它可能具有只读属性?我已经进入了html并直接编辑了所有内容,添加了不同的属性,但无法让jaw宣布任何形式的"只读"声明。我认为组件组合可能出了问题,通过许多组件创建select组件的顺序。

jm81lzqq

jm81lzqq5#

另一个选择是根据只读状态动态更改 aria-label - 这可以在用户空间中完成。
根据规范,aria-readonly 应该与 role=combobox 一起工作。我建议向屏幕阅读器作者报告问题,以便正确实现。

afdcj2ne

afdcj2ne6#

我同意,但问题是Material UI在屏幕阅读器方面违反了HTML规则。输入没有被屏幕阅读器注意到,因为它用了一个负的tab索引隐藏了。

相关问题