Web服务

级联用户指南

辅助功能检查常见问题解答


什么是“辅助功能”?

无障碍服务 指计算机系统或网站对任何人(包括残障人士)的可访问性。 网络为残疾人提供了许多其他媒介无法获得的机会。 它提供了独立性和访问信息的自由。 但是,如果创建网站时没有考虑到网络的可访问性,则它可能会排除一部分可以从互联网获得最大收益的人群。 因此,网站创建者必须认真采取这些措施,并在遇到此类错误时采取相应措施,这一点很重要。 

替代文字的目的

替代文本(替代文本)提供了非文本内容的替代描述。 替代文本最常见的用途是图像,并且该原理可以应用于您网站上的任何其他非文本内容。

Alt文本的关键目的可以归纳为以下几点:

  • 屏幕阅读器代替图像来读取它,从而使视觉或某些认知障碍者可以访问图像的内容和功能。
  • 如果未加载图像文件或当用户选择不查看图像时,它将在浏览器中代替图像显示。
  • 它为图像提供了语义含义和描述,这些语义和描述可以被搜索引擎读取,或者用于以后仅从页面上下文确定图像的内容。

撰写替代文字时的重要规则

alt属性应 一般:

  • 准确且等效 在呈现相同的 内容function 图片。
  • 要简洁。 这意味着应适当简洁地呈现图像的正确内容(如果有内容)和功能(如果有功能)。 通常只需要几个单词,尽管很少有一两个简短的句子是合适的。
  • 并非多余 或在图像的上下文中提供与文本相同的信息。
  • 请勿使用短语“ ...的图像”或“ ...的图形”来描述图像。 对于用户而言,通常显而易见的是它是图像。 并且,如果图像正在传送内容,则与文本相反,用户通常不必知道该图像是正在传送内容的图像。 如果图像是照片或插图等事实是重要的内容,则将其包含在替代文本中可能会很有用。

例如,当在图像中添加替代文本时,上下文就是一切,而内容图像需要简短而准确的描述,而没有替代文本的情况下装饰性图像通常很好,而功能性图像仅需要更准确/等效的名称。

有关替代文本的更多信息和示例,您可以访问 https://www.webaim.org/techniques/alttext.

替代文字与原始文字错误相符

首次将图像上传到Cascade时,它将自动具有其文件名作为其替代文本,如下所示。 

 自动显示替代文字的源名称示例

但是,这对于可访问性而言并不理想,因为图像名称不一定总是具有描述性。 名为“ image123456.jpg”的图像文件将不会为需要它的人提供任何可访问的信息。 但是,这有一个简单的解决方案。 只需删除该名称并输入更具描述性的名称,就可以避免错误。 您可以在 图片缺少替代文字 以上的手风琴。 

如“缺少替代文本的图像”中所讨论的,某些图像可能被归类为“装饰性”图像,这意味着它们不需要alt文本。 尽管如果图像是单独放在段落标签中的,则装饰性图像会使标签中没有任何文本。 这将在Cascade中显示一个错误,如下所示:

段落没有可用的文字错误

可以通过输入工具栏上页面的“源代码”并删除两侧的标签标签。 

结构标题

标题会在您的网站上创建版块,以帮助组织信息; 它们分为4个标题级别,从层次结构标题1(h1)的顶部开始,一直向下移动到标题4(h4)。 创建内容时,请从h2开始,因为在大多数情况下,h1会自动分配给页面标题。 要记住的两个主要规则是:

  • 在较大的标题下添加较小的标题时, 必须 下一个最小级别:h2,后跟h3(不是h4)
  • 您可以通过在上一个标题较低的标题下添加一个较高级别的标题来开始一个新的部分。 例如将h2置于h4下。

标题1

标题2

标题3

标题4

 

多标签

多个br标签彼此相邻错误

您可能会遇到的最常见的标签错误之一是级联错误,是指过多的换行符。 网站创建者可以尝试使用两个换行标签( )以模拟信息之间的额外垂直空间。 相反,可以通过将连续信息包装在标签,它更符合可访问性标准。 

 

空的标签

空p标签错误

在两种情况下,最常发生此错误。 首先是如果您在内部有图像标签,没有替代文本。 在这种情况下, 屏幕阅读器可以读取的标签,并且会出现此错误。 可以通过在图片中添加替代文字来解决此问题,如果是装饰性图片,则可以通过删除源代码编辑器中的标签。 发生这种情况的第二种情况是标签没有任何文本,也可以通过输入源代码编辑器并删除空白来解决标签。

重要的是,您必须使用 项目符号清单 or 编号清单 编辑器中的按钮。 这对于确保您的网站尽可能易于访问非常重要。 通过在编辑器中格式化列表,可以帮助确保可访问性受限的用户可以尽可能高效地浏览您的网站。

项目符号列表:

  • 例子1
  • 例子2

编号列表:

  1. 例子1
  2. 例子2

总而言之,仅键入旁边带有短划线的文本不足以实现峰值可访问性,也不能复制/粘贴来自其他网站,文档或电子邮件的列表。

在不同的目的地链接文本错误

创建页面时保持可访问性的一部分是确保链接是唯一的。 对于需要可访问页面的用户而言,拥有指向不同位置但名称相同的链接会限制了解链接目标所需的上下文。

为避免此问题,请尝试指定链接的标题。 标记多个部门而不是多个“部门之家”,而不是“表格”,指定哪种类型的表格,当然,避免使用“此处”链接名称。  

链接很容易添加到网站,但很容易被错误地使用。 创建指向另一个TAMUK网站的链接时,选择 内置 选择链接类型时。 这样可以确保无论何时更改TAMUK链接的URL,该链接都会自动指向更新的URL。 如果您将TAMUK网站分类为 外置 如果网址已更新或更改,则链接将断开。 

指向非TAMUK网站的链接需要分类为 外置。 虽然,没有选项为 内置 链接,因此输入URL的唯一选择是通过选择 外置.

链接中没有文字:

如果网站创建者没有正确地从文本中删除链接,例如:通过退格文本而不是突出显示该文本并单击“删除链接”,该链接将保留在html代码中,而不会显示类似于以下内容的文本:

这会在Cascade中显示一个可访问性错误,如下所示:

级联警告:此链接内部没有文本。 下方链接

没有文字要在屏幕上显示链接是要避免的重要问题。 可以通过以下方法修复该问题:在编辑器中打开“源代码”工具,标识不带文本的链接(将成为关闭标签旁边的链接标签),然后将其从代码中删除。 如果您需要链接显示在网站上,只需在标签之间键入链接的名称,如下所示:

电子邮件

链接文本为 没有信息:

链接文本是无用的级联警告

当链接的文字太短或内容不足时,就会出现此链接,最常见的是“点击这里' 要么 '点击此处' 文本。 如Cascade所述,t此链接中的文字过于笼统,无法为用户提供帮助。 如果不阅读链接周围的文字,用户将无法识别链接的目的或目的地。 将此链接中的文本更改为唯一且内容丰富的内容,以便用户可以理解在链接的目标位置可以找到哪些内容或动作。

带下划线的文字: 不允许在非链接文本下划线,因为它可能会混淆链接,并且在文本块下划线时,会使文本难以阅读。 这也会在Cascade中引发一个错误,如下所示。

带下划线的CSS文字错误

解决此问题的方法是重新键入不带下划线的文本,或突​​出显示文本并使用 清除格式 选项位于 格式 编辑器工具栏上的标签。

从外部来源复制/粘贴: 从Word文档,pdf或其他网站复制/粘贴文本时,其源代码中可能会有格式设置,如果未解决,则会引起我们页面的可访问性问题。 这是向页面添加内容的最快的短期解决方案,但对网站的可访问性完整性造成了长期问题。