作为全球最大的电商之一，Amazon一直致力于提供更好的购物体验。为让所有用户能更轻松地进行购物，Amazon 近期推出了一项无障碍方案调整。 这项调整通过优化网站界面、改进搜索体验，让所有用户，特别是视障人士和听障人士能够更轻松、更无阻碍地访问和使用Amazon网站。
在这篇文章中，我们将详细介绍这项Amazon无障碍方案调整的内容，希望能够给前端开发者提供一些指导意义。
针对盲人用户的具体调整
Amazon的新方案针对若干种不同类型的残障用户提供了符合他们使用需要的优化服务。 针对盲人用户（即使用屏幕阅读器，屏幕上不显现任何图片或文字的用户)，Amazon网站的调整如下：
1. 提高有序列表的可读性
有序列表在网站页面中经常使用，特别是在商品详情页中的不同尺寸商品里。为让盲人用户可以更清晰地理解不同规格的商品，Amazon新增了属性为aria-setsize和aria-posinset的标签来规范有序列表。这样就能让屏幕阅读器和盲人用户正确读出每一个选项的位置和数量。
示例代码：
<ol role="listbox"> <li role="option" aria-setsize="4" aria-posinset="1">大容量40ML</li> <li role="option" aria-setsize="4" aria-posinset="2">中容量20ML</li> <li role="option" aria-setsize="4" aria-posinset="3">小容量10ML</li> <li role="option" aria-setsize="4" aria-posinset="4">超大容量100ML</li> </ol>
2. 易于访问的跳转链接
在网站页面中，特别是在搜索结果页中，Amazon提供了一些页面链接，点击该链接将跳转到相应的位置。而这对于盲人用户来说是不方便的。为了较好的解决该问题，Amazon新增了<a>元素的title标签，将链接控制方法统一成“【跳转】+目标链接名称”，这样盲人使用屏幕阅读器时就能清晰地知道该链接的跳转信息。
示例代码：
<a href="#section1" title="跳转到专辑：让我们一起来听音乐" role="link">让我们一起来听音乐</a>
3. 利用ARIA标签加强对话框使用体验
在利用Amazon搜索功能时，出现在网站界面上的面板被称为“对话框”。要让盲人用户更加方便地使用对话框，Amazon为对话框加入了ARIA标识属性，标识出对话框根元素和其它相关元素的角色和状态，让屏幕阅读器能清晰地区分。
示例代码：
<div role="dialog" aria-modal="true" aria-describedby="helper-modal-description"> <div id="helper-modal-description">这是一个通用的对话框</div> <button type="button" aria-label="关闭对话框">X</button> </div>
对听障用户的具体调整
除了针对视障人士进行的调整外，Amazon还针对听障人士提供了相应的优化。
1. 视觉提示的补充
在增加视觉提示的同时，Amazon也通过修改页面元素标签和样式等方法，强制对每个必须被提供的视觉提示方法上下文描述。这样所有的提示信息对听障用户来说框架是可读的。
示例代码：
-- -------------------- ---- ------- -------- ------------------ -------------- -------------- ----------- ---- --------------- ---------------- --------------- ----- ----------展开代码
2. 提高页面通用性
网站的通用性对于所有用户都是非常重要的。为确保所有用户都能够方便地使用Amazon网站，特别是听障人士，网站中的元素必须能够被屏幕阅读器正确解读。Amazon在界面中把重点放在元素语义上，尽量多地使用role属性和语义标签，以便于屏幕阅读器能将页面元素正确转述。
示例代码：
<label for="search-input" role="search">输入您要搜索的商品名或关键词：</label> <input type="text" id="search-input" role="searchbox" aria-label="查询输入框" />
小结
通过这次无障碍方案的调整，Amazon使得其网站的界面更易于使用，并且同时在可访问和无障碍性方面提供了更多的支持。开发人员在编写页面元素时，尽量注重语义性和良好的屏幕阅读器兼容性，这样就能为所有用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cf8331e46428fe9eaf3bc6
