WebAIM  - 无障碍记

万博体育官网网址残疾人专用CSS

介绍

层叠样式表或CSS,让你修改HTML元素的显示方式和风格特征。所有Web浏览器有一个内置的样式表,它定义了网页内容的默认样式。例如,

元素有保证金的默认样式,字体,字体大小等。<表>,和所有其他HTML标签在该样式表定义;它们的大小,颜色,位置,以及其它特性在其内的所有定义。当一个网页作者定义自己的风格,他们可以覆盖这个内置的样式表,并告诉浏览器显示元素以不同的方式。

CSS被称为“级联”,因为有一个层次或优先级如何样式应用于-浏览器默认的样式由样式的,由内部样式(通常在发现覆盖外部样式表(通常是一个.css文件)覆盖一个页面),它们由元件样式(直接施加到页面元件)中重写的部分。

重要

为了提高可达性,最终用户可以改变浏览器的默认样式和可界定覆盖任何其他样式的“级联”自定义样式。页面必须是适应性和灵活性,以最终用户的风格定制。

为什么会最终用户定义自己的风格?与用户低视力可以定义一个更大的文本大小。与用户色觉障碍或低视力可能会覆盖页面颜色来执行某些颜色或高对比度。与用户认知或学习障碍可能会覆盖定位或禁用图像,以确保一个更基本的介绍。诵读困难的用户可以改变字体和文本间距更好的可读性。

由于CSS主要是关于视觉呈现,最CSS不会影响什么屏幕阅读器将读取。然而,一些风格,如显示:无visibility:hidden的会造成内容通过屏幕阅读器可以忽略。伪含量规定::之前::后将屏幕阅读器读取。

从演示中分离内容

CSS的一个主要好处是,作者可以分开的演示内容。内容意味着文本,标题,列表,区域,图像,以及其他在HTML标记中定义的元素,具有其固有的语义或含义一起。介绍是指其中由CSS所定义被显示内容的方式。通过确保内容是在HTML和CSS中的介绍,如果有人禁用或覆盖CSS,内容和语义应该还是完全访问。万博体育官网网址

注意

Web内容无障碍指南(WCAG)要求视觉信息,也就是说,和关系也在标记或文本编程定义。

控制可视化布局

CSS浮动显示(特别是与显示:格)等提供在元件的一个页面内的定位大控制,而不管在HTML代码中的那些元素的顺序的。底层源代码顺序决定了屏幕阅读器读取顺序和键盘导航顺序。这些通常应匹配的可视化布局和呈现顺序。这两个应该是合乎逻辑的,直观的,一般应保持一致。

注意

WCAG要求读出序列与元件的导航顺序与视觉意义和序列对齐。有人探索通过屏幕阅读器或键盘的页面内容应该通常会遇到的内容以相同的顺序有人视觉阅读的内容(通常为从左到右,从上到下)。

隐藏内容使用CSS

在几乎所有情况下,如果其含量在网页视觉呈现,它应该是屏幕阅读器的用户访问。万博体育官网网址同样,与CSS视觉隐藏内容通常不应是屏幕阅读器的用户访问。万博体育官网网址有,但是,例外,主要为东西可能是有意义的视觉,但其中一个简洁的解释或说明可能是屏幕阅读器的用户非常有用。

注意

隐藏使用CSS内容的技术可以发现CSS在行动:隐形内容只为屏幕阅读器用户

显示内容与CSS意义

而不是隐藏与CSS内容,有时内容或含义与CSS完全呈现。这可能包括使用CSS来做到以下几点:

  • 限定背景的图像,本内容
  • 控制布局或演示文稿中影响意义的方式
  • 单独使用颜色来传达意思
  • 生成CSS内容

这些技术一般应避免。然而,在CSS被用来显示信息,内容或含义不另外可访问的情况下,必须提供一个可访问的替代方法。万博体育官网网址

例如,CSS背景图像不能直接给出备选文本(虽然CSSALT属性是目前正在开发中)。如果图像内容传达,应该最佳地通过使用放置到内容IMG用合适的元件ALT属性值。如果这是不可能的,隐藏或关闭屏幕文本(也许咏叹调)可用于图像的内容传达给不能看到它的用户。

始终使用本地的HTML标记来提供必要的语义内容和意义,然后用CSS来增强和更改默认样式。

标题示例

下面的句子的样式看起来像一个标题,但不提供标题的语义或功能。

这不是一个标题。它只是看起来像一个。

这产生本例中的不正确的标记如下:

这不是一个标题。它只是看起来像一个。

正确的标记,假设这是一个二级标题,将是:

这是一个标题,它看起来像一太

如果默认风格的H2不期望的,CSS可以用来改变视觉外观,同时保持底层的标题语义和功能。

重点示例

“非常”在以下判处不标记强调这个词。它只是风格显得大胆,所以不会被屏幕阅读器加以强调。

它是非常重要的是要正确使用CSS!

这产生本例中的不正确的代码如下所示:

有的!极其以使用CSS重要正确

正确的标记是:

极其重要的是要正确使用CSS!