问题描述
我有一个使用Material-UI创建的React应用程序。用户要求为整个网站启用键盘导航。我无法使用此网站上的键盘浏览表格。我的桌子看起来像https://material-ui.com/components/tables/#fixed-header。我想按键盘上的“向上箭头”和“向下箭头”上下移动。如何启用此功能?
解决方法
键盘导航通常是指仅使用键盘控件就可以专注于并触发交互式元素,如链接,按钮,日期选择器,模式等。桌子不是交互式元素,因此键盘无法聚焦。
您的用户请求可能旨在确保网站符合Web Content Accessibility Guidelines。实质性UI表在语义上被标记为带有表标题行的表,因此可以满足这些条件的基础。
如果您激活屏幕阅读器(如Mac上的VoiceOver或Windows上的NVDA),则可以使用箭头键浏览表格,屏幕阅读器会宣布每个单元格。