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

组件是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提到的各属性有何差异呢？这就是今天将要和大家一起探讨的。如果你感兴趣，欢迎继续往下阅读。