首先要说的是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更改（或内容的重新渲染）。如果你从未接触过或者想学习这方面的知识的话，欢迎继续往下阅读。

组件是React中重要特性之一。我们可以将一个复杂的UI分解成多个基本组件。在开发了基本组件之后，我们可以将所需的组件组合在一起创建一个复杂的UI（也称为复杂的组件）。React中使用props和state控制组件中的数据流。但刚接触React的同学对这些所谓的props和state都会感到困惑，那么要掌握React就有必要掌握props和state。在接下来的内容中我们主要围绕着React的props和state和大家一起讨论。

CSS的flex-basis是Flexbox属性flex的简写属性之一。大部分同学在很多时候都认为flex（当然也包括flex-basis）属性非常的简单，但事实上并非如此，如果你阅读过《聊聊Flexbox布局中的flex的演算法》和《深入理解 flex 布局以及计算》会发现这flex并不容易。在W3C规范中flex-basis是一个基准值，它接受width和height相同的值。如果你熟悉的话，width和height是隶属于CSS Intrinsic & Extrinsic Sizing Module Level 3规范，而且该规范除了width、height属性之外还有min-width（或min-height）、max-width（或max-height）、min-content、max-content和fit-content等。那么问题就来了，在Flexbox布局中，flex-basis和CSS Intrinsic & Extrinsic Sizing Module Level 3提到的各属性有何差异呢？这就是今天将要和大家一起探讨的。如果你感兴趣，欢迎继续往下阅读。

随着Web技术不断的革新，以往很多依赖于图片展示的布局能较轻易地通过代码来实现，而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D，甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说，我们通过CSS可以实现，而且这样的一个效果是一个典型的效果，所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性，我们可以实现伪3D的效果（看上去像上一个3D的布局）。这样的布局主要目的是为了增强一个立体的空间感。

熟悉CSS的同学都知道，使用CSS可以绘制一些图形，在业内有很多这方面的案例，比如使用CSS绘制不同的纹理、CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用，比如我们今天要聊的圆（比如圆形容器，圆形缩略图，圆形按钮）。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话，那么接着阅读下面的内容，你一定会有所收获。