A11Y 101:编写CSS时要考虑可访问性

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

构建可访问性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的大小在一段时间中稳定在15px18px(注意,这个区间的值并不是浏览器默认的font-size,主要是设计师将字号提高到这个区间)。近年来,设计师将Web中文本的font-size再次上升到20px以上。这其实是一件好事。文本必须足够大,以便在智能手机上阅读,并随着屏幕尺寸的增大而增大,以便在更大的屏幕(比如电视的屏幕)上仍然可以远距阅读

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

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

CSS中的单位有很多类型:

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

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

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

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

那么我们就可以在其他元素上使用相对单位(比如emrem)来设置文本的font-size。这一点非常重要,因为这意味着更改基本字体大小也将更改所有其他元素的font-size。比如,html中设置的font-size值为100%,如果将h1h2font-size的值分别设置为2rem1rem

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
    }
}

这个时候对应的h1h2的值也会随着改变。默认情况下,h1font-size值为32px100%16px2 x 16px = 32px),h2font-size值为16px100%16px1 x 16px = 16px);当浏览器屏幕尺寸达到@media中设置的值(min-width: 768px)时,htmlfont-size的值为112.5%(即18px),这个时候h1font-size的值为36px112.5%16 x 112.5% = 18px2 x 18px = 36px),h2font-size的值为18px112.5%16px x 112.5% = 18px1 x 18px = 18px)。

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

em的计算简单但繁锁:

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

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/a11y/writing-css-with-accessibility-in-mind.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部