石家庄网站制作公司哪家好？ 设计具有键盘可访问性的应用程序的5个步骤
键盘辅助功能
当我们想到“普通”用户时，我们倾向于想象他们在计算机上时使用鼠标或触控板。但是，如果他们的首选或唯一选择是使用键盘呢？您是否考虑过考虑键盘可访问性来设计应用程序？
某人可能不愿意，或者能够操作鼠标或触控板来使用计算机的原因有很多。它们可能具有永久性，慢性或暂时性状况，从而限制了它们的敏捷性或肌肉控制力，从而导致手腕或手部敏感，或者难以在屏幕上跟随鼠标光标。他们也可能是“高级用户”，他们正在寻找更多捷径来简化他们的工作流程。在任何这些情况下，键盘都可能是个人与技术互动的首选或必要手段。
在本文中，您将了解键盘可访问性准则，以及在设计应用程序以确保它们可通过键盘访问时要记住的5个步骤。
加入我们的Shopify合作伙伴市政厅-统一版
在本月的Partner Town Hall，我们将讨论Reunite的发布会和新闻，这些会影响您的业务。另外，我们将仅为Shopify合作伙伴和开发人员分享一些特别的公告。你不想错过这个。请在5月28日（星期四）美国东部时间上午10:00注册，加入我们。
键盘辅助功能如何工作？
如果可以通过键盘访问应用程序，则意味着人们可以选择仅使用键盘来操作控件元素。控件元素是页面上的任何交互式组件，例如按钮，链接，表单输入，视频和其他交互式内容。
键盘导航基础
以下是一些用于键盘导航的基本键：
导航到下一个控件元素：选项卡（或相关单选按钮的向右或向下箭头键和选择选项）
导航到上一个控件元素： Shift + Tab（或相关单选按钮和选择选项的向左或向上箭头键）
单击控件元素： Enter和/或空格键
在相关单选按钮或选择选项之间导航：箭头键
您可以在本文中了解有关HTML元素的标准键盘行为的更多信息。
焦点顺序
控制元素可以响应键盘事件的顺序称为焦点顺序。当一个元素成为焦点时，您可以使用某些键盘控件与其进行交互。当元素失去焦点时，它将变得模糊。浏览器呈现默认焦点状态，以帮助用户跟踪当前处于焦点的元素。
键盘辅助功能：Tab键顺序移位
当用户按下键盘上的Tab键时，焦点从一个交互式元素顺序转移到另一个交互式元素。当元素获得焦点时，焦点状态将应用于该元素。在此示例中，焦点所在的元素由灰色轮廓，带下划线的文本和稍微放大的箭头图标标识。
您可能还会喜欢： 通用设计：11个实用技巧，使您的网站和应用程序更易于访问。
键盘可访问性和Web内容可访问性指南（WCAG）
《 Web内容可访问性指南》（WCAG）概述了三个级别的合规性-A级，AA级和AAA级-已被用作全球区域或国家级Web可访问性法律的标准。
键盘可访问性是达到A级标准的成功标准之一。级别标准描述了所有Web内容的必备功能。它们也被认为是最容易实现的。
也就是说，如果我们不小心，键盘的可访问性也很容易出错。以下是网上常见的键盘可访问性问题的示例：
潜意识状态
焦点顺序错误
无法获得关注的互动元素
复杂的组件无法进行键盘交互
“如果我们不小心，键盘的可访问性也很容易出错。”
幸运的是，我们可以使用很多技术来牢记键盘用户并避免在我们自己的应用程序中犯这些错误。
订阅我们的开发者摘要新闻通讯
通过我们的季度开发者摘要，了解Shopify API和其他开发者产品的最新更改。
构建键盘可访问应用程序的5个步骤
1.设计直观的交互
当我们呈现简单的控件元素而没有自定义行为时，通常可以利用它们的内置键盘辅助功能。但是，如果我们不知道与按钮，链接或输入相关的标准键盘行为，则可能会无意间为键盘用户带来混乱的体验。
“如果我们不了解与按钮，链接或输入相关的标准键盘行为，我们可能会无意间为键盘用户带来混乱的体验。”
例如，开发人员有时会使用CSS隐藏本机HTML单选按钮，以便使用更具风格的外观。输入不是幕后的单选按钮并不明显，因此键盘用户可能没有意识到他们应该使用箭头键（而非Tab键）在相关选项之间切换焦点。
键盘可访问性：CSS遮挡的无线电输入
三个风格化的输入，其中单选输入已被CSS遮盖，使它们看起来更像按钮。
为避免此问题，我们应该显示至少类似于本机HTML元素的内容，以便为希望或需要使用键盘与其交互的任何人提供视觉提示。
键盘辅助功能：集成组件的输入
三个风格化的输入，将类似于无线电输入的组件集成到设计中。
2.石家庄网站制作公司哪家好？构建您的应用程序，以便键盘可以完成鼠标可以执行的所有操作
请注意内置键盘可访问性功能所没有的元素。布局元素，列表，表，标题，段落和非语义HTML标签默认情况下不支持键盘快捷键。但是，它们经常用于构建更复杂的组件，例如选项卡，拖放列表或模式。
JavaScript使我们能够添加事件侦听器，以使非控制元素响应鼠标单击或手势。例如，在React中，我们可以使用onClickprop向列表项元素添加交互性。
{item.name}
每当我们向非控制元素添加交互性时，都需要将其tabIndex属性设置为0。当按下Tab键时，这将允许元素以正确的焦点顺序接收焦点。我们还需要实现keypress或keydown事件处理程序，以通过Enter键和/或空格键来注册“点击”（可以同时使用链接单击链接，而按钮仅支持Enter键）。
{item.name}
我们可以通过使用诸如锚标记或按钮元素之类的控件来避免一些额外的工作。我们始终可以使用CSS覆盖默认的链接和按钮样式，并使交互式元素跨越其非交互式父级的整个宽度，以最大化目标区域。
无论我们是否将控件元素用于非本机功能，我们仍可能需要为箭头键（在选项卡组件中的选项卡之间导航）或退出键（以关闭叠加层）添加事件侦听器，以使组件100键盘可用百分比。
如果我们为更复杂的组件实现非标准的键盘行为，则提供可见的说明来描述人们可以用来与组件交互的键盘控件会很有帮助。
3.覆盖默认焦点顺序时，请执行其他工作
焦点顺序是另一个与键盘可访问性紧密相关的WCAG要求。为了满足A级标准，焦点顺序应与页面上交互式元素的视觉顺序保持一致。键盘用户应该能够在屏幕上的控件中从上到下以及在与文本内容相同的水平方向（从左到右，或从右到左）中导航。
键盘辅助功能：更新描述流程
在此页面上，内容是从左向右呈现的，键盘用户应能够按以下顺序在控制元素之间导航：“更新英雄图像”，“更新标签”，“更新描述”，“删除”， “发布”。
满足此条件的最简单方法是保留默认的焦点顺序，该顺序由标记中元素的排列顺序直接确定。当我们引入控制元素的视觉顺序与其在源代码中的布局方式之间的差异时，我们就有可能无法满足此标准。
您可能还会喜欢： 使用Liquid和Shopify构建可访问的面包屑导航。
如果我们以上面的屏幕截图为例，假设我们希望“更新标签”卡在堆叠较窄视口时将其与“更新描述”卡切换位置。如果卡片被渲染为弹性物品，我们可以考虑使用orderCSS属性在特定的断点处更改其顺序。
。容器 {
显示：flex;
}
@media（最大宽度：600 px）{
。卡：第n个孩子（2）{
订购：3 ;
}
}
查看原始GitHub 托管?的example.css
虽然该order属性影响弹性项目的视觉顺序，但它不会在源代码中更新其排列。结果，当用户按下Tab键在每个按钮之间导航时，即使“更新标签”按钮在屏幕上以相反的顺序显示，它们仍将在“更新描述”之前获得焦点。这会导致焦点意外地在页面上上下移动，从而给用户带来混乱的体验。
键盘辅助功能：更新描述流程已重新排序
如果使用CSS在视觉上对“更新标签”和“更新描述”按钮进行重新排序，则键盘用户希望“更新描述”在“更新标签”之前获得焦点。但是，CSS不会更改标记中元素布局的顺序。这会在控制元素获得焦点的顺序（由标记确定）与它们在屏幕上显示的顺序之间产生差异。
避免此问题的一种方法是在标记中呈现两种版本的卡：一种以对于较宽视口宽度预期的顺序，另一种以对于较窄视口宽度所需的顺序。我们可以使用该display属性在某些断点处在它们之间切换。
<！-以所需的顺序排列的卡可用于更宽的视口->
< div class = “容器” >
< div class = “卡片” >
< 按钮>更新英雄图像
< div class = “卡片” >
< 按钮>更新标签
< div class = “卡片” >
< 按钮>更新描述
<！-卡以所需的顺序排列以缩小视口->
< div class = “ 堆叠的容器” >
< div class = “卡片” >
< 按钮>更新英雄图像
< div class = “卡片” >
< 按钮>更新描述
< div class = “卡片” >
< 按钮>更新标签
查看原始cards.html 托管与?通过GitHub上
如果我们不想在标记中保留两个版本，则需要使用JavaScript来更新tabIndex卡片堆叠在页面上的属性。根据我们要渲染的控件元素的数量，与在标记中维护卡的不同版本相比，这种方法可能更难于正确使用。
如何tabIndex影响焦点顺序
设置tabIndex为0：将元素添加到默认焦点顺序中，该位置由其在HTML文档中的位置确定
设置tabIndex为-1：从焦点顺序中删除元素；它不会得到关注
设置tabIndex为正数：将元素添加到默认焦点顺序中，在由数字值表示的位置
4.自定义焦点状态时，请为最需要它们的用户设计
浏览器使用outlineCSS属性来呈现某种形式的视觉指示，表明元素处于焦点。焦点状态旨在帮助用户识别在使用键盘导航页面时哪个元素将注册键盘事件。
对于设计人员和开发人员来说，替换浏览器提供的默认焦点状态是很常见的。这可能涉及更新默认outline，或者完全删除它，并用另一个CSS属性替换它，比如background，border，box-shadow，color，或transform。
但是，我们决定在我们的应用程序中呈现自定义焦点状态，我们应确保它们满足以下可访问性要求：
足够的色彩对比度：我们的对焦状态与其周围的颜色之间应该有足够的对比度，以便视力障碍的用户可以轻松地跟踪当前对焦的元素。
颜色变化与其他视觉指示器配对：色盲用户可能无法注意到更改元素边框，字体或背景的颜色。应该将其与不需要用户能够区分颜色的其他视觉更改配对。这也适用于涉及颜色变化的悬停和错误状态。
在高对比度主题中可见：在Windows设备上启用高对比度模式时，将忽略某些CSS属性，包括background和box-shadow。颜色的变化也可能不会被记录，这就是为什么依赖附加的指示符变得双重重要的原因，这些附加的指示符对于需要在背景色和前景色之间需要更多对比度的人们来说是可以感知的。
尽管可以覆盖默认outline属性，但切勿在没有提供替代的情况下删除默认焦点状态。
5.为键盘用户提供快捷方式
如果有人使用鼠标来导航网页，则在页面加载时，他们可以滚动浏览多余的标题内容，以获取所需的信息。对于键盘用户而言，此过程并不那么精简，他们可能需要通过多个导航链接或页面主要内容之前的任何其他控制元素进行制表。
作为开发人员，我们可以在应用程序每个页面的顶部提供“跳过链接”，以使键盘用户可以绕过页面主要内容之前的控制元素。跳过链接通常从视图中隐藏起来，直到获得焦点为止。使用鼠标与您的应用进行交互的用户看不到它，但是它将成为使用键盘的人获得关注的第一个元素。
单击链接后，焦点将转移到主要内容容器，并且键盘用户可以立即开始在页面上的主要控制元素之间进行制表。
键盘辅助功能：开始您的业务
< 身体>
< 身体>
< 一 类 = “视觉隐藏的” HREF = “#mainContent” >跳至主要内容
< 标头> ...
< 主 ID = “ mainContent” >
...
查看原始GitHub 托管于?的index.html
跳过链接不仅仅是便捷的快捷方式。它们是旁路模块的一个示例，必须满足A级WCAG标准。
经常通过自己成为键盘用户来测试您的应用
对于不习惯使用辅助技术或设备的用户，测试键盘的可访问性具有相对较低的学习曲线。您所需要做的就是访问键盘，熟悉标准键盘行为以及访问Windows高对比度模式（通过购买Windows设备或安装虚拟机）。
在测试应用程序的键盘可访问性时，请牢记以下一些问题：
我可以使用键盘与响应鼠标单击和手势的任何事物进行交互吗？
有人会在焦点时知道如何与该元素进行交互吗？
焦点顺序是否与页面上交互式元素的视觉顺序匹配？
即使我需要更高的颜色对比度，我也可以跟踪当前焦点在哪个元素上吗？
我可以轻松进入页面的主要内容吗？
对所有这些问题回答“是”都无需花费很多精力，并且在任何情况下都可以对用户产生积极影响：他们是否有身体残疾，正在寻找节省时间的方法或需要使用用一只手的电脑。
可访问性测试是应用程序开发的关键组成部分。具体地说，键盘的可访问性与为使用屏幕阅读器的用户提供替代文本，或为无法听到音频内容的人们提供字幕一样重要。归根结底，如果您希望完全访问应用程序，则不需要使用鼠标即可使用该应用程序。
