无障碍模式开启：二手电商 “黑马” 拥有天然属性
在当前数字化时代，很多网站和应用程序都在不断地更新和升级，以满足用户的需求和提高用户体验。但是，对于一些残障人群来说，这些设计可能并不是那么友好和易于使用。
为了解决这个问题，开启无障碍模式（accessibility mode）成为让残障人群更加顺畅地使用网站和应用程序的关键。在这篇文章中，我们将探讨如何在二手电商“黑马”中开启无障碍模式，并使得该网站拥有天然的无障碍性质。
一、无障碍模式是什么？
无障碍模式是指通过一种特定的设计，能够让不同类型的残障人士更加舒适地使用计算机和移动设备。例如，对于盲人，无障碍模式可以通过语音提示代替视觉元素；对于聋人，无障碍模式可以通过文本替代音频元素。
正如 Web Content Accessibility Guidelines (WCAG) 所指出的：
“Web 上的信息和服务对于每个人都应该是可访问的。这意味着能够访问这些内容及功能的人群，包括身体或认知残障、老年人、低成本网络设备用户和低读取或文化背景不同的人。”
二、为什么要考虑无障碍模式？
尽管我们不能将网站的无障碍性视为必需品，但这确实是一项有用的功能，可以让各种人群都能够获得良好的用户体验。不仅如此，无障碍模式还可以为企业带来更多的商业机会，因为它能够吸引更多的、有着残障状况的用户。
据全球数据平台 Statista 的数据显示，中国大陆的残障人士约有8500万名。如果这些人越来越多地使用你的网站，商业机会无疑将更多。例如，在房地产行业，“采取无障碍设计会让残障用户更容易使用软件，并从中受益，这将有助于改善房地产公司的品牌形象。”
三、在二手电商“黑马”中开启无障碍模式
二手电商“黑马”是一家拥有丰富的买家与卖家交流的平台。通过黑马，用户可以发布商品，与他人交流，买卖物品。但是，对于残障人士来说，他们可能会受到一些困扰，例如：
难以理解提示信息；
光标移动不到某个位置；
复杂的网页布局；
视频或音频材料缺乏文本描述等。
为了解决这些问题，必须考虑开启无障碍模式，使该网站变得更加友好和便捷。
- 考虑颜色对比度
二手电商“黑马”应该摆脱以黑色为主的深色主题，并在设计中考虑颜色对比度。残障人士中有很多人患有视觉障碍，颜色对比度过低会使这些人看不清重要元素，例如按钮、链接等。因此，遵循 WCAG 中的颜色对比度标准是非常必要的。
代码实现：
// javascriptcn.com 代码示例
button {
color: #56789C;
background-color: #FFFFFF;
border-color: #56789C;
}
button:hover {
color: #FFFFFF;
background-color: #56789C;
border-color: #56789C;
}- 使用键盘导航
很多残障人士无法使用鼠标来操作页面。为了能够让这些人正常地使用“黑马”网站，我们应该提供键盘导航的功能。
代码实现：
<div tabindex="1">I'm focusable with my keyboard!</div>
div:focus {
border: 2px dotted #000000;
outline: none;
}- 提供文字替代方案
例如，图片、视频等媒体资源应该为残障人士提供文字描述。 这些描述应该足够清晰，让残障人士能够清晰地了解这些元素的用途。 此外，通过 aria-label 属性，您可以为元素提供可访问性标签。
代码实现：
<img src="eagle.jpg" alt="An eagle soaring against a blue sky">
<button aria-label="Close">X</button>
- 增加可访问性属性
对于残障人士来说，许多网站的格式可能和正常网站不同。因此，我们需要在页面的头部添加一些识别信息，以提高这些网站的可访问性。 ARIA (Accessible Rich Internet Applications) 是一个标准，它提供了一些附加属性以增强页面的可访问性。
代码实现：
<div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25% progress</div>
总结
通过开启无障碍模式，二手电商“黑马”不仅能够提高用户体验，并拥有天然属性，让更多人能够访问和使用这个网站。 当然，我们只是介绍了一些基本的 HTML 和 CSS 技巧，这只是整个无障碍设计的一个组成部分。 如果您想确保您的网站是无障碍的，我们建议您遵循 Web Content Accessibility Guidelines (WCAG)，阅读无障碍设计的研究并参与显式用户测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654e931b7d4982a6eb7b655a