时至今日，Web页面或Web应用上色彩都是很丰富的。一般情况之下，开发者给Web上色大多是根据视觉设计师提供的设计稿来定义。颜色除了能决定Web在视觉上的美观之外，还能直接影响Web可访问性。因为访问或使用你产品的用户可能会在较亮的环境下（比如阳光下），或设备陈旧上（比如低分辨率显式器），颜色可以直接决定用户能否较好的访问。除此之外，可能有一些视觉障碍的用户（比如视弱，色盲）使用你的产品，这群用户群体同样会受颜色影响。

最近一直在思考一个问题：“在互动团队这么多年了，什么样的互动项目是有温度的呢？又应该如何构建有温度的互动项目呢”？想了很久，接下来以我自己角度的理解来尝试着回答，如果回答不对之处，还请路过的大婶拍砖指正。一直以来，自己都在探索Web可访问性相关的技术，不过大部分经验都是停留在PC端，而如今天是移动端的天下，所以想看看在移动端上如何来做Web可访问性。特别是在这样的互动项目（带有游戏化）又应该如何做Web可访问性？带着这样的问题，开始征程。但在2019年双11的时候，主互动多人PK项目上线了，公关部的同学看到支付宝的有无障碍方面的能力，希望我们的项目也能具备无障碍方面的能力。

近一年来一直以来都在致力让手淘互动项目更有温度，虽然借助自己所掌握的有关于A11Y（Web可访问性）相关的理论知识，让互动项目更具可访问性，但其中有很多细节还是有待于完善，特别是焦点冗余部分，更是令我感到头痛。为了优化这方面的细节，我尝试着通过 WAI-ARIA 中 aria-label、 aria-labelledby 和 aria-describedby 属性来进行优化，却事与愿违，而且这几个属性一直令我感到困惑。为了彻底的能搞清楚这几个属性，我打算花一些时间来和大家一起探讨它们。如果你对这几个属性感兴趣的话，请继续往下阅读。

众所周之，React目前是前端领域最为流行的JavaScript框架之一，很多Web开发都是基于React进行Web开发。但据 WebAIM Million统计分析可得知“使用React框架开发的Web应用或Web页面就可访问性方面而言，其错误要比一般的主页多出5.7%”。而且在社区中普遍认为，基于React开发的Web应用对于Web可访问性本来就差，而且开发者无法很好的基于React框架开发出具有可访问性的Web应用。事实上这是一种错误的认知，基于React能不能开发出具有可访问性的Web应用和React本身并没有太多的关系，因为开发一个具有可访问性的Web应用更多的是和HTML和WAI-ARIA有着紧密的关联。换句说，基于React开发具有可访问性的Web应用，应该注意些什么，以及如何更好的开发更具可访问性的Web应用。这是今天要和大家一起聊的话题。

很多Web开发者一直都认为使用WAI-ARIA是增强Web可访问性的最佳方式，但是对于了解或者说经常构建可访问性Web应用的开发同学来说，WAI-ARIA其实对于Web可访问性来说是一种“毒药”。这么说是有一定道理的，即：“滥用WAI-ARIA还不如不使用”。这句话的意思是说，如果你对WAI-ARIA不了解，随意使用的话不但不能给Web可访问性带来好处，反而会让Web可访问性更差。你可能会为这种观点感到困惑，如果真是如此，那么接下来的内容你很有必要阅读。

这一年多来一直在探讨Web可访问性相关的知识，在小站上也陆续输出了一些有关于Web可访问性相关的技术文章。构建Web可访问性应用或页面涉及到的知识领域绝不仅是某个方面，从设计开始，到Web开发中的HTML、CSS、JavaScript各方面都有，甚至领域还可以更小，比如颜色，工具，ARIA以及一些属性的使用。但是对于很多从未接触过Web可访问性开发的同学来说，他还是会感到困惑。那么今天这篇访问就是来帮助开发者解惑的。因为文章主要就是和大家一起探讨，Web开发者可以根据下面提到的内容或者说手段来对Web可访问性进行优化。如果你对这方面感兴趣的话，请继续往下阅读。

在互动团队的同学都知道，我们团队有一个明确的愿景： 人人可开发，处处有互动  。其实我想说，除了 人人可开发，处处有互动 还应该让 互动有温度，让互动能说话 。去年双11的 PK盖楼 上过头条，火爆全网，我想今年双11主互动项目： 超级星秀猫 也将会再次燃爆全网。记得去年我和大家一起聊了聊如何构建 有温度的互动 ，让30万视障人士可以很好的在天猫双11“剁手”“盖楼”分红包。说实话，看到这样的消息，作为主导互动无障碍优化的我来说， 无比的自豪，无比的幸福 ！今年我将和我们团队的 @光驰 同学和大家一起聊聊：“ 如何通过技术，让互动能说话 ”。

在A11Y中有一个非常重要的点就是关于Web页面或应用上焦点的管理。焦点的管理涉及到多个部分，比如焦点的顺序，焦点的样式等等。这些看上去细微的地方，对于Web的可访问性是非常的重要，特别是对于重度依赖于键盘操作的用户群体来说更为重要，因为焦点的顺序能更这些用户带来更好的体验，另外焦点的样式也能更好的告诉用户现在所处的位置，能有效指导用户在Web上的导航位置。今天和大家一起聊聊Web中有关于焦点方面的知识，如果您感兴趣的话，欢迎继续往下阅读。

我们在 UI 还原的过程中，难免会碰到水平或垂直方向的分隔线。在现代 Web 的开发中，大部分前端开发者首先的方案是使用非 <hr> 标签元素，通过 CSS 或 SVG 来制作分隔线，即使在使用 React 或 Vue 构建 Separator （或 Divier）组件，也是采用非 <hr> 标签。可以说，时至今日，<hr> 标签元素已被大部分开发者给遗忘了。既然如此，为什么我要用一篇文章的篇幅来聊 <hr> 元素呢？这主要是出于 Web 的可读性（无障碍）出发点。希望阅读文这篇文章之后，你会有一个更好的选择。

在开发电子商务网站或应用避免不了价格这个字段。事实上呢？很多电子商务网站的页面或应用的价格字段都没有提供一个较了的用户体验，或者说没有提供无障碍体验。而作为 Web 开发者，我们一些小小的改变就可以大大提升用户体验。接下来和大家一起聊聊，我们应该如何在自己的项目中为价格做出小小的改变来提高用户的体验。