作为一个营销人员,你希望你的网站达到你的目标受众。你可能已经调整了你的品牌、信息和价值主张。但如果所有这些都是正确的,但你却无意中把一些访客拒之门外呢?换句话说,你是否考虑过残疾观众的需求?
有某种残疾的人会化妆15%根据世界卫生组织的数据在美国,疾病控制和预防中心估计26%的美国人有一个残疾。也就是6100万人。
要为您的残疾访客服务,您需要成为其中的一部分网络可访问性计划.网页可及性是关于消除阻碍残疾人有效使用网站的障碍。
残疾网络用户是一个多样化的群体。他们的损害可分为以下五类中的一种或多种:
视觉障碍:失明、低视力和色盲。
听觉障碍:耳聋和听力损失。
运动能力损伤:例如,瘫痪、感觉受限或缺乏精细运动控制。
认知障碍:包括癫痫、诵读困难、学习障碍、自闭症、多动症等。
语言障碍
为了满足这些不同的需要,我们有一套无障碍网页的指引。这就是网页内容易读性指引进来。
网页内容可及性指引
网站内容可访问性指南(WCAG)是由网站可访问性倡议(WAI)发布的一套国际指南。WCAG提供了一个详细的路线图,用于理解残疾用户在浏览网页时的需求。WCAG创建允许残疾人轻松访问的内容,并对特定的web可访问性问题进行测试。
第一个Web Accessibility指南由Technologist Gregg Vanderheiden于1995年发布。其他作者添加了更多的Web可访问性指南,以创建统一的网站可访问指南。本文档成为1.0 Web内容可访问性指南的基础,该指南于1999年发布。
WCAG 1.0包含14个指南。这些指导方针包括指定音频和视频内容的替代方案,避免使用表格进行布局,并让用户控制移动或闪烁文本。
在WCAG 1.0之后的几年里,人们创建和使用网站的方式发生了一些变化。然后,Web 2.0进化了——一个更加以用户为中心的、社会化的、交互式的网络。人们开始在网络上创建和分享自己的内容,社交媒体网站开始流行起来。具备互联网功能的手机发布了。网站再也不能只在台式机和笔记本电脑上运行了,它们必须适应移动设备。表格布局过时了,响应式网页设计诞生了。
由于所有这些变化,网页可访问性指南变得过时,需要更新。在2008年12月,一个完整的修订版发布了,称为WCAG 2.0。WCAG 2.0围绕4个无障碍原则组织了12个指导方针:可感知、可操作、可理解和健壮。WCAG 2.0在2012年成为官方标准。
2018年推出,WCAG 2.1是最新版本。它通过添加新的指南和新标准来构建版本2.0,以帮助具有低视野,具有认知问题的用户和移动设备用户的用户。
如何组织网页内容可及性指南
Web内容可访问性指南围绕四个原则构建:
- 可爱:用户可以通过感官(视线或听力,有时触摸)消耗内容。
- 可操作的:用户可以使用他们平时使用的控件来操作网站。
- 可以理解的:网站和用户界面对用户来说是可以理解的。
- 健壮的:网站应该跨浏览器和跨平台工作。
我们将深入了解以下每个原则。
总共有13个网页可访问性准则,每个准则被进一步分解成成功标准的列表。成功标准被设计成可测试的可访问性度量。每个成功标准都有a、AA或AAA级。a级标准是最容易通过的标准,而AAA级是最难通过的标准。
您可能会看到一个网站描述为WCAG 2.0 AA兼容。这意味着什么?这意味着该网站通过了WCAG 2.0 A级成功标准和AA级成功标准。把它想象成电子游戏中的关卡。除非你完成了第一关,否则你无法完成第二关。
许多国家的政府网站都采用了WCAG 2.0或WCAG 2.1AA级作为首选标准。在美国,根据《美国残疾人法》(ADA)有这样的判决ADA适用于网站.到目前为止,对于网站应遵循什么网页易读性准则以符合《美国残疾人法》,还没有达成共识。
由于WCAG很有可能在未来被推荐为符合ADA,现在值得花时间来理解和应用这些web可访问性准则。
如何遵循网页内容易读性指引
- 为非文本内容提供替代方案。
- 提供不同的选项观看媒体内容。
- 创建可以在不同平台上查看的内容。
- 使内容易于听和看。
- 使所有功能键盘可访问。
- 允许用户调整时间。
- 避免闪烁或频繁闪烁的内容。
- 提供工具来帮助浏览你的网站。
- 适应各种输入选项。
- 确保文本内容语法正确。
- 设计可预测的网站功能。
- 当用户出错时提供帮助。
- 编写有效的代码。
1.为非文本内容提供替代方案。
WCAG 1.1指南:"为任何非文本内容提供文本替代,以便将其更改为人们需要的其他形式,如大字、盲文、语音、符号或更简单的语言。"
所有非文本内容都需要文本描述来向看不到的用户传达其含义。这主要是指图像,但也包括其他内容,如验证码、ASCII艺术和表情符号。
描述图像的最常见方法是通过替代文本,俗称图像Alt文本。这是添加到图像的HTML代码中的简短描述,用于指示图像所代表的内容。
大多数内容管理系统都有在上传图像时添加alt文本的机制。
写alt文字时,想象一下你会如何向电话里的人描述这张照片.你不需要加上“image of”或者“graphic of”。盲人用来上网的屏幕阅读器软件雷竞技苹果下载官方版,当图像出现时就会通知用户。如果与搜索引擎优化相关,可以在alt文本中添加关键字。然而,在页面上的每个图像中填充相同的关键字是不必要的。
如果图像是装饰的,则它应该具有Null Alt属性,即,alt =“”.例如,如果你让alt文本为空,WordPress会将图像标记为装饰性(alt="")。
链接的图片有一点不同。他们需要alt文本来详细说明他们的URL目的地,而不是图像的描述。
例如,如果房屋的图像与主页相关联,则需要ALT =“HOME”,而不是描述ALT =“带有黄色屋顶的橙色房屋和棕色纠察围栏的橙色房子”。
如果你不确定要写什么alt文本,你可以参考这个Alt决策树,或HUBSPOT的图像指南alt文本.
2.提供不同的选项观看媒体内容。
WCAG 1.2指南:“为基于时间的媒体提供替代选择。”
基于时间的媒体是指音频和视频内容。如果你的网站有音频或视频,它们很可能是预先录制的,所以你应该在上传时提供替代格式。这些格式将允许您的听力或视力有障碍的访问者访问内容。
音频媒体指南
对于音频内容,提供文本是提供替代格式的最常见方法。转录本应该有一个完整的演讲记录,描述录音中其他相关的声音,如声音效果或音乐。
这里有一个很好的例子未被发现的创始人播客:
视频媒体指南
为了满足字幕要求,视频应该有与音频同步的字幕。标题可能开放(嵌入到视频中)或关闭(可以开关)。
下面是HubSpot的一个封闭字幕视频示例:
一种常见的封闭标题格式是.SRT文件,这是一个文本文件,它是一个包含对话框和视频计时的文本文件。当你在视频旁边上传一个。srt文件时,如果浏览者需要的话,他们可以打开关闭的字幕。尽量不要依赖自动字幕,因为它可能会歪曲一些对话。
对于无声视频或没有音频的视频部分,你可以添加音频描述,描述视频中发生了什么,例如,对于展示如何组装一件家具的视频。
提供视频文本也是一个很好的做法。标题和文本的一个大优势是,它们可以被谷歌索引,并帮助你的搜索引擎优化。
3.创建可以在不同平台上查看的内容。
WCAG 1.3指南:“创建可以以不同方式呈现的内容(例如更简单的布局),而不会丢失信息或结构。”
本指南与元素之间的页面结构和关系有关。使用正确的HTML代码可以解决一些问题。使用WYSIWYG编辑器可以轻松将此添加到网页。以下是使用代码以获得更好的可访问性的三个示例。
标题
使用标题使页面更容易浏览。依赖屏幕阅读器的视力下降的人也能从标题中受益,因为标题有助于导航。当一个部分有标题时,屏幕阅读器用户可以直接跳到该部分,跳过页面的其他部分。
从标题1开始页标题。您的第一个子标题将是标题2.标题2下方的另一个子标题将是标题3,依此类推。使用适当的标题是重要的,因为粗体或放大的文本不会被屏幕阅读器识别为标题。
这是a的部分标题结构HubSpot关于制定销售计划的帖子.只有一个标题1,即页面标题。每个主要部分有标题2,子部分有标题3。此外,为清晰起见,许多标题3都按顺序编号。
列表
对项目组使用项目符号或编号列表。屏幕阅读器软件可以告诉用户有雷竞技苹果下载官方版多少个列表项,以及正在读出的是哪一个。否则,屏幕阅读器用户就会错过这些信息。使用项目符号或数字列表也可以帮助您的内容以谷歌的形式显示精选片段.
强调
强调文本与大胆的或斜体文本使它脱颖而出。大胆的最好。
4.使内容易于听和看。
WCAG 1.4指南:“让用户更容易看到和听到内容,包括把前景和背景分开。”
这个指导方针是关于让人们更容易看到或听到内容。
使用颜色
不要只依赖颜色来传达信息,因为色盲者可能无法区分。
例如,英国政府数字服务故意创建了一个无法访问网站.从网站上采取的这个例子显示,粗心使用颜色可能对COLDBLIND人员产生严重后果。
在内容的链接下划线也可以帮助色盲者。如果你不这样做,你的链接颜色和周围的文字看起来太像色盲,他们将无法区分它们。因此,他们不会点击你的链接。给链接加下划线会让它们更清晰。
音频控制
你的网站上有自动播放的背景音频吗?如果是这样,确保你的访问者可以控制停止它或调整音量。无法控制的自动播放的语音或音乐会干扰屏幕阅读软件阅读网页。雷竞技苹果下载官方版
最小的对比
曾经在阳光下盯着你的屏幕,并努力制造出来的话?机会是对比问题。较差的颜色对比可以影响任何人,但特别是视觉条件低的人。
如果您可以控制设计,请注意背景和前景文本的颜色组合。良好的颜色对比度可以增加用户的可读性。
为了符合WCAG AA标准,WCAG建议对比度为4.5:1常规文本,3:1为大文本.对于AAA来说,这更严格。
5.使所有功能键盘可访问。
WCAG 2.1指南:“让所有功能都可以通过键盘实现。”
网站上的所有功能都应该通过键盘实现,不是每个人都可以使用鼠标。不能使用鼠标的人包括那些具有精细电机控制问题的人,由帕金森病等条件引起;那些有肌肉痉挛的人,如多发性硬化症;他们的手或臂疼痛的人,这可能是由重复菌株损伤引起的。
试着只用一天的键盘来浏览网页。收起鼠标,或者盖住触摸板,使用tab键进行导航。当您到达一个链接时,请检查是否可以使用回车键前往目的地。在按钮上,检查按下回车键或空格键是否执行一个操作,例如提交表单。
如果在做这个练习时,你似乎跳过了一些控件,这可能意味着它们没有键盘支持——这是你可以向开发人员提出的。如果你在使用tab键时不能知道你在页面上的位置,这是另一个可访问性问题。参见WCAG指南2.4:可导航。
6.允许用户调整时间。
WCAG 2.2指南:“为用户提供足够的时间来阅读和使用内容。”
用户应该能够调整网站上的时间,如果他们需要更多的时间来完成操作。这对浏览速度较慢的老年用户、运动障碍用户和焦虑的用户来说很重要。
时间很重要的一个例子是预订。如果有时间限制,用户应该被允许延长它。另一个例子是警报消息。除紧急信息外,如果警报会打断用户的浏览,应允许用户关闭警报。
7.避免频繁闪烁的内容。
WCAG 2.3指南:“不要以众所周知的方式设计内容,以引起癫痫发作或物理反应。”
癫痫患者对眨眼或闪烁的内容很敏感。建议是避免使用任何每秒闪烁或闪烁超过3次的内容,因为它可能会引发癫痫。要知道,有些人是这样的对视差滚动中的运动效果敏感,因此您可能希望限制其使用情况。
8.提供工具来帮助浏览你的网站。
WCAG 2.4指南:“提供帮助用户导航、查找内容和确定位置的方法。”
通过在你的网站上实施以下五个指导方针,让访问者更容易找到他们的网页。
定义页面标题
网页应具有描述性标题,表示其内容标题标记.一个写得好的标题标签可以让用户和搜索引擎清楚地知道这个页面是关于什么的,可以帮助这个页面在搜索中排名更高,当有多个标签打开时,帮助访问者找到它。
您可以通过将鼠标悬停在浏览器选项卡上来检查页面的标题标签。通常,页面标题与页面上的第一个标题相同。
描述性的链接
有经验的屏幕阅读器用户可以非常快速地阅读页面。他们不听整个页面,而是通过标题列表或链接列表来浏览页面。因此,对他们来说,听到“点击这里”或“更多”的链接并不是很有帮助,因为他们不知道自己去了哪里。
Wayfinding
对于比几个页面大的网站,如果用户有不同的方法到达他们的目的地,这是有帮助的。有些人,比如那些有视觉障碍或认知障碍的人,发现使用搜索工具来找路比使用复杂的导航菜单更容易。
网站地图也是一个有用的工具。网站地图将网站的所有页面按区域分组放在一个地方。使用它可以方便用户快速找到他们需要的东西。
另一个援助是面包屑导航.面包屑导航就像一个“你在这里”的标志,通过链接让访问者知道他们去过哪里,以及如何回家。
键盘焦点
焦点指示器,也称为焦点环或可见焦点,是链接、按钮和表单字段上的可见指示。当用户使用tab键浏览网页时,会看到一个焦点指示器。焦点指示器在网页设计中经常被忽视,但对于有视力的键盘用户来说,它是找到方向的关键。如果没有焦点指示器,用户就不知道自己在页面上的位置,还可能浪费时间点击指向未知目的地的链接。
焦点指示器通常以大纲或高亮显示在链接、按钮和表单字段上。在下面的例子中,虚线轮廓和黄色高亮部分组成了链接上的焦点指示器。这是让用户看到他们在页面上的位置的一种明显的方式。
节标题
章节标题与WCAG指南1.3:适应性相关。章节标题将页面分割开来,增加可读性。一个带有文本墙的网页是不友好的,但确实是难以阅读。
9.适应各种输入选项。
WCAG 2.5指南:“让用户通过键盘以外的各种输入更容易操作功能。”
指南2.5在WCAG 2.1中是新的。它考虑了超出了传统键盘和鼠标的用户输入。这包括在触摸设备上的攻丝和手势和语音输入。该指南的成功标准更适用于开发商。
10.确保文本内容语法正确。
WCAG 3.1指南:“让文本内容可读性强、易于理解。”
你的目标应该是所有的文本内容容易阅读和理解你的观众。以下是一些建议。
检查网页使用您的母语。如果使用WordPress,则可以在设置中定义此操作。语言将应用于您的所有网站的页面。
写进平实的语言在那里你可以。这海明威的应用能帮上忙。当你的句子太复杂,或者你可以使用简单的单词时,它会通过突出文本的颜色来警告你。
如果你需要使用缩写或不常见的单词,可能不是所有人都能理解,所以为了读者的利益,一定要定义它们。您可以将定义作为文本的一部分包括进来,或者在词汇表中链接到定义。
11.设计可预测的网站功能。
WCAG 3.2指南:“让网页以可预测的方式出现和运行。”
用户希望网站以可预测的方式运行。如果一个网站的导航在每个页面上都调换了顺序或位置,我们大多数人都会感到很困惑。对于视力低下、失明或认知障碍的人来说,这种影响会更大。
一个不可预测行为的例子是,如果一个链接被设置为在一个新的窗口或选项卡中打开,而用户在点击或点击之前没有收到警告。这可能会让一些用户感到困惑或烦恼,特别是那些有认知问题的用户,因为他们不能使用浏览器上的后退按钮返回他们原来的位置。
12.当用户出错时提供帮助。
WCAG 3.3指南:“帮助用户避免和纠正错误。”
我们都必须有时并经常填写网站的形式,往往会犯错误。完成表格和描述性的提示错误消息帮助预防或纠正错误。避免做以下事情,你会使你的表单更容易访问。
依赖占位符而不是表单标签.占位符文本消失时,有人开始键入。任何有记忆问题的人可能会忘记他们应该填写的信息,结果可能会输入错误的数据或完全放弃表单。
在提交表格之前保留关键信息.一个示例是创建密码时要使用的字符。如果填写信息很复杂,人们需要先知道格式。否则,他们可能会感到沮丧,因为必须通过自己的故障重复他们的输入。
未将必需的表单字段标记为必需的.对于填写完表单后发现提交失败的人来说,这是非常令人沮丧的,因为表单中的哪些字段是必需的,哪些字段是可选的,并不明显。清晰地标记所需字段,让用户满意。
给出无用的错误消息不告诉用户如何改正错误。“电子邮件地址无效”告诉某人错误是什么,而不是如何纠正它。“您的电子邮件地址缺少@符号”更好,因为它提供了如何修复错误的具体反馈。
13.编写工作的代码。
WCAG 4.1指南:“最大化与当前和未来用户代理商的兼容性,包括辅助技术。”
“网页内容可访问性指南”的最后一个指南涉及网页的技术方面。它包括以下几点:
代码是否正确有效?浏览器很智能,通常可以弥补错误,但如果没有正确的代码,屏幕阅读器可能无法识别控件。
定制控件是否以正确使用的方式构建?例如,如果编码不好,屏幕阅读器用户可能无法使用手风琴。
用户是否得到状态消息,让他们知道由于他们的操作而发生的更改?如果用户将商品添加到购物车中,他们也应该被告知。
让你的网站容易访问
在Web内容可访问性指南之后可能会觉得挑战,但可访问的网站的奖励值得努力。
你会接触到更广泛的受众,因为你已经考虑并满足了不同人群的需求。你的网站会更有用,因为人们会发现它更容易理解和交互。你的搜索引擎优化可能会提高,因为使用正确的代码和文本替代多媒体将使搜索引擎和访问者高兴。您将保护自己免受由于无法访问网站而可能发生的法律风险和责任。
最后,您将根据您做正确的事情促进良好的公共关系。
最初发布于2021年3月9日上午7:00:00,更新于2021年3月09日
主题:
网页可及性