随着互联网技术不断的革新，Web页面或应用不再局限于静态地向用户呈现文本或图片等内容。现在的Web页面或应用是一个 富应用，是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。这也就是说，用户和Web应用的交互变得更丰富和更复杂。实现这些带有富交互的Web应用仅依靠HTML和CSS是无法实现了，换句话说，我们很多时候会使用一些非语义的HTML和动态的JavaScript脚本来构建，更新复杂的UI控制。Web应用变得更丰富的同时，可访问性的难度也就相应的更复杂了。

时间如梭，又一年双11圆满收官了。作为技术宅男除了买买买之外还能和大家聊的就是前端技术了。"淘宝盖楼"上热搜了，我想你应该也参加了双十一淘宝盖楼吧，是不是觉得特别的酸爽。今年有幸参与盖楼的互动活动的开发中备感荣幸，因为我们的努力让全民都爽了。在开始之前要先感谢一下曾经努力的自己！楼盖完了，我们回过头来聊聊这次多人互动PK在开发的时候用了哪些有意思的前端技术。感兴趣的同学，请继续往下阅读。

构建可访问性Web应用时，很多人都可能会认为这应该是HTML的事情，或者说是WAI-ARIA的事情。或许也会问，可访问性和CSS又有啥关系呢？虽然CSS有很多特性（特别是发展到今天）可以让我们美化Web页面或应用程序变得更简单和更灵活，但这些强大的特性也可能让我们的用户体验变得特别的糟糕。实际上，仅用一行代码*{outline:none 0}就可以使一个网站或Web应用的可访问性变得非常的糟糕。也就是说，编写CSS可以直接影响Web的可访问性。在这篇文章中，我收集了一些技术、注意事项和方法来帮助你在编写CSS时不会影响Web可访问性，反而提高Web的可访问性。

在上一节中和大家一起探讨了为什么要构建可访问性和如何构建可访问性应用。文章中我们聊到了HTML中可访问性中的作用，事实上很多开发者都认为HTML对于构建可访问性是非常的重要，特别是用正确的HTML标签来表达正确的意图，可以提升Web应用的可访问性。这篇文章将会详细介绍如何从HTML方面来最大化地提升Web应用的可访问性。最近一直在阅读和学习构建可访问性方面的知。我花了一些时间去了解一些这方面的知识，但随着了解的越多，让我越来越觉得不应该只把可访问性当作一个检查清单，而应该当作一个起点。将这些技术合并到自己的工作流程中，即从构建Web应用的最开始，就应该把可访问性融入到应用中。

首先要说的是A11Y 101是一个系列性的科普教程，主要是围绕着Web网站或Web应用程序有关于可访问性展开的。该系列会围绕着2W1H、HTML、CSS、JavaScript、WAI-ARIA、AOM、工具和设计等几个主题展开，希望通过这几个主题展开之后，大家能很快的构建一个可访问性的Web网站或Web应用。让大家真正的体会到构建可访问性应用并没有你想象的那么难。今天先从构建可访问性应用的2W+1H开始。这里所说的2W即是Why（为什么要构建可访问性应用）、What（什么是可访问性应用），而1H是指How(如何构建可访问性应用)。

最近@Robin Rendle和@stefanjudis先后写了篇文章，从同一个角度抛出两个话题：“为什么创建无障碍网站这么难”？和“应该通过增强浏览器开发者工具实时提供开发者开发无障碍网站存在的问题”！那么我想问的是，开发无障碍网站为什么会令大家感觉难以及工具上的实时提示就能让开发变得更容易了吗？如果不是，怎么样来开发一个网站才能符合无障碍规范相关的要求，即具有高可访问性。更直接一点，怎么才能让开发者创建无障碍网站是件轻易而不再觉得是件困难的事情。在接下来的内容，将作为前端开发者的角度来和大家一起探讨这方面的话题。如果你感兴趣的话，请继续往下阅读。

首先要告诉大家的是tabindex并不是一个新属性（或者说新特性），但了解tabindex的真正作用或者说正确使用的人还是不多。最近在项目中就碰到一个问题，在部分安卓机上显式给div元素设置了tabindex='-8'这样的值，结果开启“旁白”的设备无法获得所需要的焦点。这到底是什么呢？我也一脸蒙逼，因为在我的理解范围中，tabindex的使用只有不显式设置值、显式设置其值为0、显式设置其值为负正整数或者显式设置其值为正整数。那么问题来了，如果要增强Web的可访问性，我们在实际的操作中应该怎么来设置（或者说正确使用）HTML的tabindex属性。今天和大家一起聊聊tabindex，如果感兴趣的话，请继续往下阅读。

伪元素已经不是什么新东东了，平时大家在实际生产中肯定有使用过伪元素。但伪元素能帮助我们做些什么呢？针对该问题，有很多同学能很好的回答，但也有很多场景并不是所有开发人员都完全了解的。今天再次花时间来整理一下伪元素能帮助我们做些什么？我想接下来的内容和实例肯定会有不少同学感兴趣的。如果你是其中的一位，那么请继续往下阅读。

给网站添加暗黑模式是随着macOS中的暗黑模式（Dark Mode）出现之后的一个热门话题，今年上半年在《如何使用CSS实现暗黑模式和高亮模式的切换》一文中就和大家一起聊了聊怎么通过CSS来实现暗黑模式和高亮模式切换。事实上，社区上有关于这方面的讨论也很多，都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题，不同的是，这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学，请继续往下阅读。

在上一节中我们学习了如何使用React的props来改变组件（UI）以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state，而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习，我们了解到props是纯静态的改变UI，而今天要聊的state是动态的，让你的组件真的能动起来，可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state，从而导致对应的UI更改（或内容的重新渲染）。如果你从未接触过或者想学习这方面的知识的话，欢迎继续往下阅读。