跳到内容
必威体育论坛必威精装下载APPRedfin Solutions徽标必威体育论坛必威精装下载APPRedfin Solutions徽标 接触
砖墙上的无障碍入口标志

在内容管理系统中编写可访问内容

可访问性不仅仅是web开发人员所关心的问题。由于内容是动态创建的,所以内容编辑器需要记住一些要点,以确保每个人都可以访问它们的内容。遵循可访问性标准可以帮助非可视化用户,但也可以帮助所有用户找到并理解他们正在寻找的信息。

创建重点

最常见的可访问性问题之一是当内容编辑器试图强调文本的部分时。重要的是要记住,屏幕阅读器不能识别细节,如不同的颜色或粗体文本,但会语调感叹号。如果强调某句话对理解内容很重要,可以考虑使用感叹号。如果它不是至关重要的,但可以帮助视觉用户更好地理解信息,那么最好的选择是使用粗体。

从可用性角度来看,谨慎使用颜色来强调。颜色可以具有意外的影响,例如使用户认为文本是警告,甚至是链接。文本还必须通过其背景传递某种颜色对比度,以保持可访问性,因此除非设计师或开发人员具有可访问性的知识,除非为您提供了新的颜色,否则最好不要介绍更多。

强调内容的另一个常见错误是全部使用大写字母。屏幕阅读器会像读首字母缩略词那样读出来,这对于完整的句子来说可能特别痛苦。除了屏幕阅读器,当一行中有超过一个或两个全大写的单词时,对所有用户来说可读性也会降低。有时候,你会看到按钮或标签上使用了全部大写,但关键的区别是,它们是(或应该)通过代码变成全部大写的。屏幕阅读器通常会忽略css,只看到最初编写的文本。

对于你的内容来说,大胆的变化还不够吗?与你的设计师或开发人员讨论如何想出额外的文本样式供你使用。你可能会想,“我已经有了一个包含五种不同文本样式的下拉菜单!”你所指的可能是标题选择器。

Drupal工具栏中的下拉标题选择器菜单。
Drupal中所见即所得字段中的标题选择器。

标题不应该被用作强调或风格选择。它们是一种向页面添加结构的工具。

标题结构

标题是用来给页面提供结构的HTML片段。它们使非可视化用户不需要看到可视化指示符就可以导航和理解页面。有一个特定的方式,标题需要安排在一个页面上。

标题是嵌套的,就像你在一篇论文的大纲中看到的那样,子部分缩进,有不同的重点或字符。标题1是最顶层,作为页面的标题。一个页面上应该只有一个H1,如果您使用Drupal或任何其他内容管理系统,那么H1可能已经为您生成了页面标题。例如,如果您在正文领域工作,您很可能从H2开始为内容的一部分命名。在这一节的其他任何东西都是H2。如果你需要在这个区域内标记部分,你可以开始使用H3。如果你需要更深入,你可以开始使用H4, H5和H6,但如果你要深入到结构中,它可能会变得很难为你的普通用户理解。下面是一个标题结构的例子:

最神奇的巧克力蛋糕

(2)我祖母的历史

(H2)成分

(H3)可以使用的面粉类型

(H3)替代原料

(H4)素食替代品

(H4)无麸质替代品

(H2)指令

(H3)蛋糕

(h3)结霜

要注意的一件重要的事情是标题级别不能跳过。你不想从H2直接变成H4。这使得非可视化用户更难理解页面的结构,并造成所有用户的不一致。如果你发现自己总是出于视觉原因而这么做,那就想想为什么标题样式不适合你,然后和你的设计师一起找出最好的解决方法。

正如前面提到的,不要简单地使用标题来强调文本。如果你把整个句子作为一个标题,它可能不是正确的用法。标题也不是为长段文字而设计的。更大、更醒目并不总是意味着更容易阅读。有时,拉引或自定义文本样式是一种选择,它将完成你想要的,而不会产生可访问性和可用性问题,以及不同内容编辑器之间的设计不一致。

外语

有时候在你的网站上,你需要添加不同语言的文本。视觉用户可以识别出他们不能阅读的东西,但屏幕阅读器需要提示,这个句子是用不同的语言写的。有一种简单的方法可以将这个提示添加到文本中:语言按钮。当你向文本框添加内容时,通常你会在顶部有一个工具栏,允许你将内容加粗,添加链接等。如果你在使用Drupal,你可能会看到这样一个按钮:

Drupal工具栏中的语言按钮选择器。
Drupal中所见即所得字段上的语言按钮。

如果你看到这个按钮,你可以高亮你的文本并从下拉菜单中选择。如果您没有看到这个按钮,或者任何按钮,请您的开发人员将其用于该字段。

关于外语,另一件需要注意的事情是,用户可以使用外部工具将内容翻译成他们理解的语言。因此,最好不要使用那些只在你自己的语言中有意义的词,而不是其他语言中有意义的词(如“hangry”)。

特殊字符

另外一个要避免的书写趋势是用字符替换字母,例如“$ave美分ash”或“see u l8r”。这对翻译和屏幕阅读器造成了可预见的问题,但它也可能不正确地显示给任何人。如果你有一篇标题为“$ave .美分”的文章,它会在url中显示如下:yoursite.com/news/ave-ash,这可能会在分享链接时造成一些混乱。“see u l8r”中的“u”很可能被非视觉用户理解,但却无法翻译。

写访问可访问的链接

写一个好的链接标题是很重要的,一旦你理解了非视觉用户如何浏览页面,就更容易完成了。这些链接可以是内联链接,比如句子中的一个单词,也可以是独立的链接,比如按钮。无论如何,你想要的是链接标题能够独立。这是因为辅助技术为用户提供的导航工具是出现在页面上的链接列表。想象一个链接列表,上面写着“点击这里”、“了解更多信息”和“下载”。这些链接并没有给用户任何上下文或链接将到哪里的信息。相反,创建带有文本的链接,让用户了解这个链接到底要做什么。没有用户希望浪费时间点击一个链接给他们意想不到的结果。

org给出了这些成功链接的例子(URI指的是链接的目的地):

链接包含对该URI上的信息进行描述的文本

页面包含“中世纪历史期间有很多流血。”在“中世纪历史时期”是一个链接。

链接的前面是对该URI上信息的文本描述

网页上有这样的句子“了解更多关于爱尔兰电子投票委员会的政府”,“去投票”是一个链接。

有意义的链接文本还可以帮助用户从一个链接到另一个链接。用户可以更轻松地导航并确定下一步要去哪里,而无需在中间页面上花费更多时间。

学习关于链接可访问性的更多信息w3.org.

写好替代品(ALT)文本

添加到页面的图像需要良好的替换文本。当使用内容管理系统时,当您添加图像时,您将看到一个字段显示,要求alt文本。Alt文本允许非视觉用户获得与图像提供给视觉用户相同的基本信息。它是当图像无法加载时显示的内容,无论是由于损坏的图像链接(?)还是用户的网络访问受限。它还为搜索引擎提供信息。

一开始,写一个好的替换文本可能有点棘手。你想要的是你的alt文本交流内容函数的形象。想想alt文本,如果你不能使用它,你想要出现在图像的地方。你需要简洁地描述图片,避免周围文字的冗余。屏幕读者会知道这是一个图像,所以不要添加像“image of…”这样的文本,想想什么信息是有用的,什么信息是没用的,以及你为什么要添加图像。它只是占据了文本旁边的空间,还是通过图像传达了一些重要的信息?四边形上的学生形象传达了关于大学学生生活的信息,而背包的卡通形象可能不会添加任何信息。

所需的替代文本将有一个红色星号旁边。
Drupal8中alt文本字段的例子。

有时图像的alt属性应该是空的。alt属性是您首次添加图像时持有alt文本的HTML。您可以在图像下方的标签上有一个标签,所有标签都可以看到所有和作为alt文本。您不希望屏幕阅读器读出两次最终是相同的文本的读取器,因此您将在图像上想要一个空的alt属性。根本没有alt文本的唯一实例是当图像只有装饰性时,例如文本部分或仅添加的通用图像之间的旋转线路仅供分类(如前一个背包示例)。添加图像时,替代文本可能是必填字段,在这种情况下,通过在字段中键入单个空格来添加空的alt文本可能为您工作。如果这不起作用,您可能希望与开发人员交谈,以便在可选的Alt文本。考虑您的网站有多少内容编辑器,如果它们都有可访问性培训。如果可能需要在没有它的情况下需要替代文本的大量图像,则可能最好保留它需要并最大限度地减少不将意义添加到页面的图像。如果图像已在标题中具有alt文本,并且需要将某些内容添加到alt文本字段中以便能够保存它,请尝试添加从标题中尚未清除的上下文。 In most cases you will want alt text anyway, but ask yourself if the alt text you’re adding will be a help or an unnecessary hindrance to a non-visual user.

维基百科上的一篇文章,标题是“骑马的人进入红杉国家公园”。
维基百科显示图片下面的alt文本,alt属性保持为空。

当一个图像被链接,并且是链接中唯一的东西,alt文本需要描述链接的功能。这是因为链接中没有任何其他文本,所以任何关于链接将去哪里的线索都是从alt文本中获取的。在这种情况下,您可以像编写链接文本一样编写alt文本。

对于一些这是如何写Alt文本的好例子,看一看由webaim.org

结论

了解不同的用户如何遇到内容,请用思想的可访问性写入,以更轻松。写作内容并不总是最令人兴奋和创造性的一部分,但它可能是一个有益的经历,不断提醒自己考虑经常被忽视的用户。把自己放在别人的鞋子里可以帮助建立同情并制作网络,特别是你的那个,一个更积极的空间。

Baidu