易访问的网页设计:如何为所有互联网用户更新你的网站

Jessica是WebFX的谷歌Analytics认证数字视频分析师。在过去的两年里,她为WebFX的YouTube频道(youtube.com/webfx)制作了超过100个视频。杰西卡擅长视频营销,也喜欢内容营销、SEO、社交媒体营销和其他许多方面的数字营销。当她不制作视频时,杰西卡喜欢听音乐、阅读、写作和看电影。

在这段视频中,来自WebFX Interactive团队的Jaci将向你解释如何开始简单易用的网页设计。

记录:

如果你很兴奋地浏览一个网站,但当你进入这个网站时,你不能访问它的任何内容,你会有什么感觉?我个人会感到沮丧,我想你也会。

如果你不使用易访问的网页设计,这就是你所创造的场景四分之一的成年人大约有6100万人没有残疾平等机会到你的网站。

如果你以前从未做过网页设计,遵循易访问性指导方针并不容易,但我将概述一些你可以做些什么来开始

如果你想跳到视频的不同部分,请使用视频描述中的时间戳。现在,我将深入了解一下网站的可访问性。

什么是网站易访问性?

网站的易访问性意味着你的网站是为了让残疾人可以使用而设计的。可访问性设计的目标是消除技术障碍,以便任何人都可以与您的内容进行交互。

如何确定网站的可访问性?

根据万维网联盟,也被称为W3C,无障碍网站适用于有听觉、认知、神经、身体、语言和视觉障碍的人。

如果你不确定从哪里开始,也不要担心。W3C有文档告诉你你的网站应该包括什么来满足他们的标准。

该文档包括:

ATAG专注于人们用来创建互联网内容的工具,而UAAG着眼于渲染web内容的工具的可访问性。

我会着重讲WCAG在这个视频中,这些是使网站内容对每个人都可访问的指导方针。

什么是WCAG可访问性?

使用WCAG,您有三个不同的遵从级别:A、AA和AAA。当您从A到AA再到AAA时,您遵循的更多WCAG制定的标准让更多的人可以访问你的网站。

那么,你如何知道你是否有一个可访问的网站?做一个审计!

如何审核网站的易读性

你不必自己去做审计。如果你想外包审计工作,那就联系我还有一个顾问团队他们可以分析你的网站,并为你做任何必要的调整。

现在,如果你更喜欢在公司内部处理事情,你有很多选择。你可以手动梳理你的网站页面寻找问题,但这可能会占用你很多时间。

你可能需要使用一些工具来帮助你。将您的URL插入可访问性检查器,如WAVE查看需要在一个页面上更新的内容。你也可以用a批量可访问性检查程序一次分析多个页面。

WAVE可访问性检查器

W3C网站有一个很大的列表可访问性工具,所以你不必自己做所有的事情。

我们也有一个关于可访问性的五个重要元素的列表和一些可访问性设计的例子——我接下来要讲的——请继续听我讲。

5网页设计易访问性指南

请记住,这些只是WCAG指南的简短摘要。我鼓励您使用W3C快速参考指南学习更深入的易访问设计技术。

1.确保文本具有可读性

任何交流重要信息的常规大小的文本都需要易于阅读。

对比在这方面起着重要作用。现在的情况是,大型文本(如主标题)需要3:1的文本与背景对比度。常规(或较小的)文本,如构成内容主体的文本,需要4.5:1的对比度。

对比过低的一个例子看起来就像浅绿色的文本在稍深的绿色背景上。把文字改成黑色或白色,你的网站会有更多的对比。

用户也应该能够放大文本以一种不影响你的网站功能或导致他们错过内容的方式。

2.优化图像,以看到和读取

添加Alt文本到图像并不只是一种常见的SEO实践。它能帮助看不到图像的人理解图像中的内容。

Alt文本是一种能够清楚解释图像内容的文本。替换文本正好适合您的图像的嵌入代码。正如您在Mashable的这个例子中看到的那样,该页面有图像,当您切换到代码端时,您会看到替换文本。

Mashable网站代码中的alt文本截图

3.为你的观众提供更多理解视频的方法

如果你从来没有给你的视频添加字幕,现在是时候开始了。不要只依赖YouTube或其他托管提供商自动生成的视频。

如果你有时间和耐心,看看你的自动生成的标题,并进行编辑。来自人工智能的游戏并不完美。

你也可以使用Rev之类的工具来订购字幕,然后将它们添加到你的视频中。

在你的视频中包含文本可以使它们更容易获得。如果你已经写了一个脚本,你已经准备好了一份副本!

音频描述添加另一层可访问性。这些独立的音轨描述了你的视频在对话间隙之间发生了什么。

所以如果你有两个人在谈论他们最近的购物之旅,然后视频切到一个人试穿衣服的片段,音频描述可以解释视频中发生了什么。可能是这样的:一个女人站在镜子前,肩上披着两条围巾。

像Wistia这样的托管平台允许您这样做上传音频描述(当你上传视频时,甚至有一个视频可访问性清单)。

4.设计你的网站,鼠标和键盘友好

不是每个人都用鼠标浏览互联网。你的网站应该反映这一点。

这不仅意味着你必须确保有人可以通过键盘与你的网站进行交互,而且还要求你有明显的方法来突出显示你网站的重点部分。

看看另一个易于访问的设计示例,当我点击Keds网站上的搜索栏时,会出现经典的闪烁线,让我知道我可以打字。点击时,搜索栏也会变得更加突出。

Keds网站上搜索栏的截图

为了满足WCAG准则,该功能应该在使用键盘时实现。

5.让你的网站导航易于理解

这个技巧不仅仅是可访问性。让你的网站导航简单明了通常是件好事。

页面标题和标题要有明确的目的。使用链接锚文本,使您更容易理解所链接的内容。

再次强调,使用焦点指示器,让人们知道他们在页面的什么位置。提供多种访问网页的方式,例如通过网站地图、主导航或目录。

我怎么能跳过这个呢?有一致的导航。这意味着如果你有一个主导航头,当用户从一个页面跳到另一个页面时,它真的不应该改变。

在这个以At Home网站为特色的例子中,尽管我从一个页面点击到下一个页面,但页面顶部的导航并没有改变。

家居装饰公司At home网站主导航的截图

正如我之前所说,这绝对不是一个全面的列表,你需要做什么来遵循网页设计易访问性指南。这些指导方针也可能会改变,所以当你准备好了就做你的研究评估你的可访问性

要继续学习不同的网页设计和数字营销主题,请订阅我们的YouTube频道还有我们的电子邮件通讯,每周收入.你不会失望的。

感谢您的收看!

我们每周一发布视频。

是的。每一个星期一。

加入5000年营销人员他们从WebFX的视频中获得营销知识。

现在就订阅

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!