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

可访问的CSS

让我们从CSS开始吧！

众所周知，CSS是级联样式，使用CSS可以使任何HTML元素看起来像任何东西，但这并不意味着我们就可以这么做。正如在《A11Y 101：编写HTML时要考虑可访问性》一文中和大家探讨的一样，虽然构建Web页面或应用有近186个元素可选择，任何标签元素都可以帮助我们搭建好页面所需的骨架，但我们却不能这么做。我们应该尽可能的选择最能表达语义的元素标签。如果不这样估，它可能会导致混乱和可用性问题，对每个人，尤其是有访问应用有障碍的人士。使用正确的语义与用户期望有很大的帮助 —— 元素的外观和功能会根据它们的功能进行某些方式的显式，而且用户期望这些常见的约定。

例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。

虽然CSS样式允许我们修改现有HTML元素的特征，表面上看上去很简单，但其中的弯弯绕绕一点不简单。简单地说吧，被运用于某个元素上的样式，就分很多个层级。所有Web浏览器都有一个内置的样式表，用于定义所有元素的默认样式。”HTML在没有使用任何额外的CSS时，也会根据不同语义标签呈现不同效果（比如、字号、字体、间距和颜色等）“，比如：

这就是浏览器客户端内置样式表（User Agent Stylesheet）渲染出来的效果。事实上所有的HTML标签都是在这个样式表中定义的，它们的大小、颜色、位置和其他样式都在其中定义。当页面应用了开发者自己写的样式时就会覆盖这个内置样式，并告诉浏览器以不同的方式来渲染。

而我们所熟悉的CSS又常被称为级联，那是因为样式应用有层次和优先级（即层叠和继承）这样的概念：

对于每个Web页面应用的CSS层次结构如下：

这是从最低优先级到最高优先级排序的，这意味着每个后续步骤中定义的样式将覆盖以前的样式。

重要的是：最终用户始终对其查看的页面样式具有最终控制权。对于可访问性，我们需要定义可访问的样式，但也允许在我们的设计中为最终用户定制提供灵活性。

那么，为什么最张用户要定义自己的样式呢？低视力的用户可以定义更大的文本大小，以便阅读文本内容。对于色盲或视力低下的用户可能会覆盖页面颜色、以便他们能够感知特定颜色或高对比度的页面内容。有认知或学习障碍的用户可能会忽略定位、字体、图像等以确保更基本的表示。简而言之，用户可能会覆盖默认或开发者定义的样式原因有很多。此外，屏幕阅读器几乎忽略了所有的CSS。

内容和样式分离

CSS的主要好处之一是它允许开发者将内容与其样式分离。内容是指构建Web页面或应用的文本、图像或其他元素。样式是指Web内容在客户端上呈现的方式。内容应该在HTML中定义，样式应该在CSS中定义。这样做的好处之一是，如果有人禁用或覆盖CSS，内容仍然可以完全可访问的。

在《A11Y 101：编写HTML时要考虑可访问性》中我们也特意提到这一点：在编写HTML的时候不要被UI视觉迷惑，应该根据内容、功能来选择最合适的HTML标签元素。

HTML和样式分离在社区有很多优秀的案例，其中最经典的应该要属禅意花园（CSS Zen Garden，展示了CSS的强大，社区数百名CSS爱好者在同一份具有逻辑顺序和语义标签上用不同CSS构建出不同的页面风格）。因为页面使用了正确的语义化标签元素，所以页面当样式被禁用时，仍然具备可访问性：

内容和样式分离除了对我们开发Web应用有益处（可维护，可扩展等），在一些有关于可维护性相关的法律法规则中对这方面有明确的规定，比如美国在1973年颁布的Section 508 of the same U.S. Rehabilitiation Act of 1973就规定：

文件的组织应该使其在不需要相关样式表的情况下可读。即，Web应用在没有样式情况下也是可读的

同时Web内容可访问性指南（WCAG）中也有说过：

组织文档，使其可以在没有样式表的情况下可读。例如，当HTML文档在没有关联样式表的情况下渲染时，仍然必须能够读取该文档。

为了实现这一点，你可以将CSS看到一个表示层，你可以删除它，但仍然保留可读和可理解的内容。通过将样式性标记移动到样式表中，HTML文档就有了干净的语义标签。这使人们更容易使用诸如纯文本浏览器、听觉浏览器和屏幕阅读器等设备来使用Web应用。

只有与具有语义化HTML一起使用时，CSS才能带来好处。在我们构建一个Web应用时，首先构建一个不带任何样式的页面，注意页面的顺序和结构。在编写HTML的时候不要被UI视觉迷惑，应该根据内容、功能来选择最合适的HTML标签元素。有关于这方面的更多细节，可以阅读《A11Y 101：编写HTML时要考虑可访问性》一文。

如何编写可访问性的CSS

前面简单的和大家探讨了可访问性CSS的作用和存在的意义，那么接下来我们实际出发，来看看在编写CSS时，我们应该如何使用CSS技术，才能用来提高Web应用的可访问性。

构建易读到可读的文本

文本是Web网站或应用的主要内容之一，文本的可读性也直接会影响到一个应用的可访问性。在Web中设置文本的样式主要是依赖于CSS Fonts Module Level 3提供的属性。也就是说，花大量的时间设计样式、测试和微调字体属性是很重要的，因为无论在什么设备上，文本都必须是可读的。

font-size的设置

font-size是用来设置文本字号大小的，在文本的可读性方面有着直接决定性的作用。我们在给Web中的文本设置font-size是有一定的设计依据的，如果处理不好，会影响文本的可读性，也就直接影响了Web的可访问性。对于font-size的设置，我们可以从以下几个方面来做。

增加font-size的大小

一直以来，浏览器默认的文本字号大多数情况下都是16px（只要用户没有修改浏览器的字体大小的情况之下），不过设计师喜欢将文本字号设置为12px，但随着更高分辨率的设备兴起，font-size的大小在一段时间中稳定在15px到18px（注意，这个区间的值并不是浏览器默认的font-size，主要是设计师将字号提高到这个区间）。近年来，设计师将Web中文本的font-size再次上升到20px以上。这其实是一件好事。文本必须足够大，以便在智能手机上阅读，并随着屏幕尺寸的增大而增大，以便在更大的屏幕（比如电视的屏幕）上仍然可以远距阅读。

由于给文本设置的字体（font-family）不同，可能在设备上渲染会有着不同的效果，所以定义一个标准的最小尺寸是没有任何意义的，但是对于较小屏幕尺寸来说，将文本的font-size设置在18px至20px之间可能是一个很好的起点。

用相对单位来设置基本字体大小

在CSS中的单位有很多类型：

有关于CSS中的单位更多的内容可以阅读CSS Values and Units Module Level 4规范。

那么我们回到这个话题中来，什么是基本字体大小？

基本字体大小就是所有其他字体大小的派生字体大小。我们通常在html中设置基本字体大小：

html {
    font-size: 100%; // 浏览器默认的值是`16px`，所以100% = 16px
}

那么我们就可以在其他元素上使用相对单位（比如em或rem）来设置文本的font-size。这一点非常重要，因为这意味着更改基本字体大小也将更改所有其他元素的font-size。比如，html中设置的font-size值为100%，如果将h1和h2的font-size的值分别设置为2rem和1rem：

html {
    font-size: 100%; // 相当于16px
}

h1 {
    font-size: 2rem; // 2rem = 2 × 16px = 32px
}

h2 {
    font-size: 1rem; // 1rem = 1 × 16px = 16px
}

如果我们想通过调整基本字体大小让文本适应更大的屏幕，我们可在借助CSS媒体特性在不同的断点中重新给基本字体大小设置值。比如：

html {
    font-size: 100%; // 100% = 16px

    @media (min-width: 768px) {
        font-size: 112.5%; // 112.5% × 16px = 18px
    }
}

这个时候对应的h1和h2的值也会随着改变。默认情况下，h1的font-size值为32px（100% ➜ 16px ➜ 2 x 16px = 32px），h2的font-size值为16px（100% ➜ 16px ➜ 1 x 16px = 16px）；当浏览器屏幕尺寸达到@media中设置的值（min-width: 768px）时，html的font-size的值为112.5%（即18px），这个时候h1的font-size的值为36px（112.5% ➜ 16 x 112.5% = 18px ➜ 2 x 18px = 36px），h2的font-size的值为18px（112.5% ➜ 16px x 112.5% = 18px ➜ 1 x 18px = 18px）。

但社区中也有另外一种声音，那就是在body的font-size使用固定单位的值，即px，然后在其他元素的font-size上使用相对单位em。使用em会相对于父容器的font-size的值计算。

em的计算简单但繁锁：

但是调整元素大小却是非常灵活的：

这两种观点差异性还是很大的。就我个人而言，我更坚持不要以像