当我们渲染没有自定义行为的简单控制元素时，我们通常可以利用其内置的键盘辅助功能。但是，如果我们不知道与按钮、链接或输入相关的标准键盘行为，我们可能会无意中为键盘用户创造令人困惑的体验。
“如果我们不知道与按钮、链接或输入相关的标准键盘行为，我们可能会无意中为键盘用户创造令人困惑的体验。”
例如，开发人员有时会使用 CSS 隐藏原生 HTML 单选按钮，以支持更具风格化的视觉效果。输入内容在后台是单选按钮这一点并不明显，因此键盘用户可能没有意识到他们应该使用箭头键（而不是 Tab 键）在相关选项之间切换焦点。
键盘可访问性单选输入被遮挡
三个风格化的输入，其中单选输入已被 CSS 遮挡，使其看起来更像按钮。
为了避免这个问题，我们应该显示至少类似于原生 HTML 元素的内容，以便为想要或 摩洛哥电话号码数据 需要使用键盘与其交互的任何人提供视觉提示。
键盘可访问性：集成组件的输入
三种风格化的输入，将类似于无线电输入的组件集成到设计中。
2. 构建你的应用，让键盘可以完成鼠标能做的所有事情
请注意没有内置键盘辅助功能的元素。布局元素、列表、表格、标题、段落和非语义 HTML 标签默认不支持键盘快捷键。然而，它们经常用于构建更复杂的组件，例如标签、拖放列表或模式。
JavaScript 使我们能够添加事件监听器，使非控制元素响应鼠标点击或手势。例如，在 React 中，我们可以使用onClickprop 为列表项元素添加交互性。
{item.name}
每当我们为非控制元素添加交互性时，我们都需要将其tabIndex属性设置为0。这将允许元素在按下 Tab 键时以正确的焦点顺序接收焦点。我们还需要实现 keypress 或 keydown 事件处理程序，以通过 Enter 键和/或空格键注册“点击”（可以使用两者点击链接，而按钮仅支持 Enter 键）。
{item.name}
我们可以通过使用诸如锚标签或按钮元素之类的控件来避免一些额外的工作。我们始终可构建可访问键盘 以使用 CSS 覆盖默认的链接和按钮样式，并使交互式元素跨越其非交互式父元素的整个宽度，以最大化目标区域。
{item.name}
无论我们是否使用控制元素来实现非原生功能，我们可能仍 纳米比亚 电话号码数据 需要为箭头键（在选项卡组件中的选项卡之间导航）或 Esc 键（关闭覆盖）添加事件监听器，以使我们的组件 100% 可通过键盘访问。
如果我们为更复杂的组件实现非标准键盘行为，那么提供可见的说明来描述人们可以用来与组件交互的键盘控制会很有帮助。
3. 覆盖默认焦点顺序时做额外的工作
焦点顺序是另一项与键盘可访问性密切相关的 WCAG 要求。要满足 A 级标准，焦点顺序应与页面上交互元素的视觉顺序一致。键盘用户应该能够从上到下浏览屏幕上的控制元素，并且水平方向与文本内容相同（从左到右或从右到左）。
键盘辅助功能新描述流程
在此页面上，内容从左到右呈现，键盘用户应该能够按照以下顺序在控制元素之间导航：“更新英雄形象”、“更新标签”、“更新描述”、“删除”、“发布”。
满足此标准的最简单方法是保留默认焦点顺序，该顺序由元素在标记中的排列顺序决定。当我们在控制元素的视觉顺序和它们在源代码中的布局方式之间引入差异时，我们就有无法满足此标准的风险。
您可能还喜欢： 使用 Liquid 和 Shopify 构建可 如何找到 SEO 的热门关键词：6 种策略 访问的面包屑导航。
如果我们使用上面的屏幕截图作为示例，假设我们希望“更新标签”卡片在堆叠以 印度手机号码 适应较窄的视口时与“更新说明”卡片交换位置。如果卡片呈现为弹性项目，我们可能会考虑使用 order CSS 属性在特定断点处更改它们的顺序。
虽然该order属性会影响弹性项目的视觉顺序，但它不会更新源代码中的排列顺序。因此，当用户按下 Tab 键在每个按钮之间导航时，“更新标签”按钮仍会在“更新描述”之前获得焦点，即使它们在屏幕上以相反的顺序显示。这会导致焦点意外地在页面上上下移动，给用户带来令人困惑的体验。