在本篇博客中，我们将介绍一些改进可访问性的基本前端原则以及Magento网站背景下的含义。
测试可访问性
了解残疾人如何浏览网页是测试网站可访问性以及最终改进网站的一个重要部分。例如，身体残疾的人在浏览网站时只能使用键盘。另一个例子是视力低下的人，他们使用浏览器可访问性选项和叙述软件来提高网站的可读性。我们还可以使用各种操作系统默认的易访问性工具，浏览器易访问性选项，以及带有TAB按钮的基本键盘导航，在基本级别上评估网站的易访问性。
我个人推荐两种非常基本和简单的方法来测试你的Magento 商店的可访问性。尝试使用键盘在商店中执行以下操作，然后在关闭时使用键盘和操作系统默认旁白软件导航商店：
- 登录您的商店帐户，浏览主页并从导航中选择一个类别（如果无法访问导航，则选择站点地图）
- 浏览类别页面（如果可能，从分层导航中选择至少2个过滤器），按价格从低到高（如果可能）对结果进行排序，并将视图从网格更改为列表，反之亦然（如果可能）
- 在产品页面上，配置产品（如果可配置）并更改数量，将产品添加到购物车。在将产品添加到购物车之前，尝试查找有关产品的更多信息并循环显示图像
- 添加几个产品到您的购物车
- 在购物车页面上，删除购物车页面上的其中一个产品，更改其他产品的数量，应用促销代码并计算运费（如果有）
- 继续结帐，输入您的测试数据并完成结账
- 在“帐户”页面中检查您的订单状态，然后尝试更改帐户设置（邮件订阅，地址，密码等）
- 如果您使用自定义主题或任何影响前端的扩展，请测试商店唯一的任何功能和页面
W3C 为开发人员指定了三级可访问性核对表。优先级1包括重要的基本可访问性要求，而优先级2和优先级3包括针对残疾人的用户体验改进。当您从头开始开发网站或测试并改进现有网站的可访问性时，您可以参考此清单。
有关残障类型及其对网络浏览体验的影响的更多信息，您还可以阅读W3C的Web可访问性倡议指南，了解残疾人和网络用户的多样性。
跳到内容
有一定残疾的人主要使用键盘来浏览网站，并为他们提供“跳至内容”链接，使他们更容易访问您的主要内容。这样，用户可以快速访问主要内容并跳过通常位于链接和主要内容之间的导航链接。在Magento网站上导航的上下文中，这也意味着用户可以轻松浏览类别页面上的产品，而无需跳过左侧边栏（分层导航和过滤器）中的多个链接来访问产品列表。
添加“跳至内容”链接
添加和测试“跳至内容”链接仅对使用键盘导航网站的用户可见时包含以下步骤：
1.在标题中的某处添加以下链接。当用户按下TAB键时，“ tabindex = 1 ”属性允许此链接首先被选中（焦点对准）。
<a class="skip-to-content" tabindex="1" href="#content">Skip to content</a>
2.将id =“content”添加到包含布局文件中主要内容（默认为class =“col-main”）的元素中
3.添加以下CSS代码
.skip-to-content {
box-sizing: border-box; // remove this if you added border-box globally
position: absolute;
overflow: hidden;
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
.skip-to-content:focus {
z-index: 5; // change to z-index that fits your theme
color: #000000; // change to the color which fits your theme
background: #efefef; // change to the color which fits your theme
text-align: center;
width: 100%;
min-height: 2em;
padding: 0.5em 1em;
left: 0;
top: 0;
}
4.您可以按TAB键一次测试是否正确添加了链接，如果正确添加，链接应该变为可见，按ENTER键，焦点现在应该在您网站的主要内容上，如果链接已正确配置，则在下一个TAB键按下时，应突出显示主内容部分中的第一个链接。
测试默认的Magento 1和Magento 2键盘导航
Magento 1 RWD主题没有“跳转到内容”的快速链接，而Magento 2 LUMA主题有。Magento 2 Luma主题具有“跳到内容”按钮，其实现方式与本文的此部分所示类似，尽管Magento 1 RWD主题在主导航中没有很多将用户与主内容分开的链接，但是由于侧栏中的分层导航（也出现在主内容之前），我们可以在类别页面中遇到20个或更多的链接。
主要导航
具有复杂结构的网站，如具有许多商店，类别和子类别的Magento网站，需要具有大量链接，下拉菜单和/或大型菜单的复杂导航。例如，如果我们过于依赖鼠标悬停与我们为Magento商店创建的复杂菜单的交互，我们可能会严重限制使用键盘进行网站导航的用户的导航，解决此问题的最简单和最快捷的方法是拥有一个易于访问的站点地图链接（通常在网站的页脚中）。
另一种解决方案是创建一个也可通过键盘访问的导航，其方式与按Tab键时桌面应用程序中的下拉菜单的扩展方式类似。如果您使用的是Javascript（或任何Javascipt库，如JQuery），建议您扩展在悬停时触发的功能以触发焦点，以及通过键盘访问导航元素。如果您更喜欢为项目使用Bootstrap框架，那么框架包含bootstrap-dropdown.js，它已经实现了下拉菜单可访问性。
测试默认的Magento 1和Magento 2主导航辅助功能
Magento 1不支持主导航中下拉菜单的键盘动画，但Magento 1的RWD主题在页脚中提供了站点地图链接。Magento 2 Luma主题默认导航支持下拉列表中的键盘导航，虽然它有点复杂。用户需要使用键盘选择整个菜单栏，然后使用箭头键和Enter键导航菜单。聚焦的元素没有太清楚地显示出来，这可能在导航主要类别时引起混淆。键盘导航使用Javascript并将内联样式注入HTML标记，这可以根据个人的偏好使用类重写来改进。
基本的可访问性改进
以下是在设计和处理项目时需要考虑的一些基本辅助功能和改进，可访问性改进因内容类型而异，您可以查看W3C文档以获取更多详细信息和参考，这里只包括了我发现的最常见且易于开发人员和设计人员在项目工作时牢记的基本改进。
提供与非文本内容等效的文本
为具有特定残疾（视力不佳，听力差等）的用户提供非文本内容（图像，视频，音频内容，iframe等）的文本等效果项非常重要，有关如何改善特定类型内容的可访问性的更多详细信息，请查看W3C可访问性指南。
使用简单的语言
在文本内容中使用简单语言可以提高内容的清晰度，提高网站的可读性，并帮助用户轻松理解网站上的内容。这是一项广泛的改进，会影响所有用户的用户体验。使用简单语言，您可以显着降低用户对您的内容的不确定性（全局消息，工具提示，错误消息，验证错误消息，导航离开结账时的警报消息等）。从可访问性和包容性的角度来看，建议在提及残疾人和/或残疾人时使用包容性语言。在像Magento商店这样的复杂网站的背景下，用户了解您网站上的购物流程，获取有关产品的所有必要信息以及一般所需信息（付款选项，运输选项，退货，保修等）。使用简单语言时要记住的一般规则：
- 使用主动语态而不是被动语态
- 使用较短的单词和句子
- 解释所有不常见的单词和首字母缩略词
- 不要对用户的知识水平做出假设
- 使用尊重残疾人的语言（包容性语言）
为鼠标功能提供等效的键盘
例如，如果您的Magento商店中有一个复杂且多层次的大型菜单（商店菜单功能区 - 类别菜单功能区 - 包含子类别的大型菜单），则可能依赖于Javascript中的鼠标悬停事件或“：hover”选择器你的CSS（如果它是一个纯CSS实现）。在这种情况下，您还需要考虑实现键盘辅助功能和旁白软件支持，以便为复杂的导航提供良好的可访问性。这也适用于您网站上的所有鼠标悬停触发事件（弹出窗口，工具提示等）。
避免键盘焦点陷阱
重要的是要确保所有关键的难以处理的内容（链接、按钮、输入、控件等）都可以通过键盘导航访问，并且键盘焦点不会被困在元素中。对于键盘用户来说，焦点陷阱是最糟糕的情况，因为无法在不关闭浏览器或浏览器选项卡并最终离开网站的情况下导航离开元素。
提供放大支持
视力不佳的用户使用放大工具和浏览器内缩放选项，重要的是要确保网站看起来清晰，并且可以高达200％的缩放。尝试把你的网站放大到150％和200％，看看是否仍然可以有效地浏览它并完成结账。
注意动画风格和持续时间
虽然动画看起来令人印象深刻，我们可以使用CSS动画和过渡创建各种不同的图形效果，但我们必须记住过度使用动画，闪烁和闪烁会影响可访问性。动画可能会让一些用户分心，而一些闪烁的动画可能会引发癫痫发作。建议限制动画持续时间（个人而言，我会使用5秒作为最大值），添加对动画的控制（暂停，停止，跳过），并提供动画内容的替代方案以便访问。在评估Magento网站上的动画时，请确保加载动画，弹出动画，迷你购物车动画，全局消息动画等不会分散注意力（过于复杂或过于华丽），并且其持续时间在合理范围内。
留意对比
在撰写本文时，W3C指定文本颜色和纯色背景之间的最小对比度，对于正常大小的文本为4.5：1，对于较大尺寸的文本为3：1，文本颜色之间为7：1对比度和图像背景。作为参考，黑色和白色之间的对比度是21：1，这也是最大可能的对比度。您可以使用许多在线工具中的任何一种来计算对比度，或者您可以在先前链接的W3C规范中找到手动计算比率的公式。确保您的网站支持这些对比度，从而为视力不佳的人提供更好的文本可读性。
为屏幕阅读器提供额外内容
视力不佳或其他视觉障碍的用户使用屏幕阅读器浏览网站时，他们可能需要网站上内容的附加上下文。例如，在填写表单时，您可能希望提供关于链接的额外上下文或信息或者向这些用户提供特殊信息或者如果您的商店依赖于符号（产品质量、警告标签、奖励丝带等）或缩写和可视化表示，以传达一些信息，您的用户认为有用或关键的决定购买。
我们非常推荐使用CSS类，该类可以向有眼光的用户隐藏额外的上下文，但是屏幕阅读器仍然可以访问它。这样，我们可以为视觉障碍的人提供额外的上下文或额外的信息。我们避免使用“display:none;”CSS属性，同时向有眼光的用户隐藏内容，因为有些屏幕阅读器可能会忽略具有该CSS属性的内容。
.screen-reader-text {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
height: 1px;
width: 1px;
}
在下面的示例中，我们将为屏幕阅读器提供额外的上下文，对于我们使用CSS提供可视上下文的有视力用户不需要。
<table class="data-table table-schedule">
<thead>
<tr class=”row-months”>
<th>Jan<span class=”screen-reader-text”>uary</span></th>
<th>Feb<span class=”screen-reader-text”>ruary</span></th>
<th>Mar<span class=”screen-reader-text”>ch</span></th>
</tr>
</thead>
<!-- ... -->
</table>
ARIA在Magento 1和Magento 2
可访问的富Internet应用程序（简称ARIA）定义了使残障人士更容易访问Web内容的方法。ARIA是一组特殊的辅助功能属性，可以添加到HTML标记中。Magento 2建议在官方文档中使用ARIA，并在开发Magento 2商店时将其视为最佳实践。截至本文撰写之日，Magento 1未更新ARIA标记，这意味着Magento 1从一开始就具有较差的可访问性，需要额外的开发才能添加ARIA支持。
结论
本文仅介绍非常基本的可访问性改进，这本身就是一个广泛而复杂的领域。W3C规范涵盖了针对各种残疾用户的各种类型内容的详细可访问性改进，如果您需要更多详细信息或其他类型的内容（视频，音频等），我建议使用W3C规范。至于Magento 1和Magento 2默认主题，Magento 2默认Luma主题绝对是Magento 1 RWD主题在可访问性和推荐的最佳实践方面的一步，其中包括可访问性，但仍有进行微小改进的空间。
在开展有关可访问性和具有可访问性要求的项目的项目时，请随意分享您的想法，想法和经验，并通过在本文下面留下评论，随时分享更多有关改善电子商务网站可访问性的提示。
