Return to site

优化辅助功能+搜索引擎优化:图像,视频和非文本元素

我们将介绍在编写媒体元素时的可访问性和SEO重叠。

图像和非文本元素

您可以想象,在线图像对于有视觉障碍的访问者来说可能会有问题,但幸运的是我们在这里使用技术,因此您和我可以通过图像和非文本元素周围的正确编码来帮助解决该问题。

图像和非文本元素的一些示例是:

  1. 图像,包括图形和图表,文字艺术,装饰和背景图像,网络摄像头图像,照片
  2. 信息图表
  3. 图像地图
  4. 动画
  5. 图形按钮
  6. 验证码

以下是您可以围绕图像和非文本元素优化的一些内容,以便更好地访问。

Alt属性

SEO中的图像alt属性用于描述搜索机器人图像是什么或图像是链接时图像指向的内容。如果是链接,alt属性就像关键字锚文本一样,帮助Google了解目标网页的上下文。

屏幕阅读器也会读取图像上的Alt属性。这是一个简单的例子:

Alt属性是可访问性和SEO的双赢优化,但在为屏幕阅读器优化alt属性时,有一些事情要记住,特别是下面的前两项。

Alt属性做和不做:
  1. 不要在装饰图像上使用alt属性:健康保险网站上的云的装饰图像不是获取图像搜索流量的钩子,并且在向屏幕阅读器提供上下文时没有用。对于视力不佳的用户来说,装饰性图像仍然看起来很梦幻,但是不要通过将alt属性保持为alt =“”(null)或者将其作为背景图像来阻止视觉障碍用户浏览页面。
  2. 当还有文本链接时不要使用alt:如果图像是链接并且图像旁边有链接文本,两者都指向同一目的地,则屏幕阅读器将同时读取这两个并且听起来重复且奇怪。对图像alt使用alt =“”(null),并使锚文本指向关于主题的目标页面。想要在图像上放置alt属性以帮助其在图像搜索中排名的SEO可能会对此提出质疑。在这样的情况下我建议使用目标页面上的图像上的alt属性,因为那是你想要在SERPS中出现的页面(可能是在评论中讨论更多的一个很好的主题) 。
  3. 保持简短或使用标题:网上有一些建议,JAWS屏幕阅读器不能很好地使用超过125个字符的alt属性。无论这是否真实,将alt属性保持简短更加用户友好。如果您想了解原因,请在浏览器中添加屏幕阅读器扩展程序(例如适用于Chrome的ChromeVox或适用于Firefox的Fangs),并使用具有长alt属性的图片浏览页面。如果您对图像有很多话要说,请将其放在标题文本中,或者在页面上的文本中而不是在alt中进行描述。
  4. 不要关键词的东西 - 写自然。让我们再次考虑健康保险网站的装饰云图像示例。搜索引擎优化可能会在着陆页上看到五个装饰性云图像,作为将“健康保险,健康保险工具,健康工具”等填入alt属性的五个机会。不要这样做。这不仅是屏幕阅读器的噪音,它可能令人困惑和烦人。实际上,没有人正在进行“健康保险”的图像搜索 - 即使他们是这样,他们点击搜索结果中的云图片的机会很可能会得到他们正在寻找的东西。同样,请确保您的alt属性具有描述性并且有意义 - 为人们编写它们,而不仅仅是机器人的一堆关键字。
图片字幕

Google可以对图片附近的文字进行细分,以将该文字归因于图片,甚至可以创建自己的图片。因此,图像附近的文本可以帮助提供上下文并可能影响排名。图像字幕还为屏幕阅读器提供上下文,通常提供比alt属性更多的上下文,或者如果在上载时不知道alt属性,则代替alt属性。

图片字幕的注意事项和注意事项:
  1. 如果有图像标题,请不要使用alt属性。与锚文本链接类似,通过alt属性和标题描述图像可能是重复的。这也可能是一个值得商榷的做法,因为SEO可能想要同时使用两者。在这种情况下,请考虑读取标题和alt属性的屏幕阅读器如何读取,并尝试做出最适合两者的决策
  2. 请描述您的字幕。例如,使用“图1:”,以便人们使用可能无法识别标签的辅助技术正确理解此字幕标签。
  3. 可选:使用< figcaption >标签:带有<figcaption>标签的<figure>可应用于图像或其他页面元素。Figcaption不一定是优化搜索引擎优化的已知标签,它们不是屏幕阅读器必须做的事情,但听起来谷歌确实试图在标签内对文本进行索引,无论它是否识别标签,尽管无法使用figcaption的屏幕阅读器可变的可读性,文本可以被视为屏幕阅读器的图像的相关元素,并且希望仍然有用。
文字为图像

避免文本作为图像的原因与SEO类似,因为可访问性:如果您希望文本能够被机器读取,则只需避免图像中的文本。作为图像的文本对于需要使用放大镜的人来说也不总是理想的,因为图像中的放大文本可能是像素化的并且难以阅读。

文字图像的做法和注意事项:
  1. 不要将文本用作重要信息的图像。如果必须使用文本作为图像,使用alt属性来描述图像文本,如果它是搜索机器人和屏幕阅读器应该读取的内容。
  2. 请考虑将实际文本设计为替代方案。如果您需要以某种方式查看文本,请使用HTML + CSS设置样式或使用SVG(可缩放矢量图形)。
信息图表

信息图表在历史上一直受到SEO的欢迎,因为它吸引了提升排名的链接。SEO也可能希望向搜索引擎提供信息图及其各部分的页面上下文。

对于可访问性,我们的想法是能够轻松确定信息图表的描述。与搜索引擎不同,屏幕阅读器无法通过使用链接到您的信息图的数百个页面的链接文本和页面内容来确定信息图页面的上下文。对于屏幕阅读器来说,这完全取决于页面上的代码信号,你可以想象描述复杂的信息图对于alt属性来说会很重要。还要考虑使用colorblind用户的颜色或我们遇到的文本作为图像(不是“可读”,缩放像素化)我们在第2部分中介绍的问题。

没有一个简单的<infographic>标签可以让您添加冗长,详尽的信息图表描述,例如long alt属性(尽管您可以考虑下面的longdesc)。相反,我建议你测试下面的这些策略,看看什么最适合你和你的特殊情况:

信息图表做和不做:
  1. 不要在alt属性中描述整个事物。对于屏幕阅读器来说,这是非常用户不友好的(无法浏览文本,复制或粘贴它等)。使用alts就可以使用它们,并选择其他方法进行长描述。
  2. 坚持颜色对比要求。在考虑信息图的颜色时提前计划,并使用满足最低颜色对比度要求的颜色。使用此工具来帮助您。
  3. 请考虑ARIA描述。除了图像上的alt文本之外,还读取此ARIA(可访问的富Internet应用程序)属性,并允许长描述。这是一个视频示例。请注意,因为除了图像alt文本之外还公布了描述,这可能是重复的。
  4. longdesc属性:此图像属性允许您为图像的长描述(在页面内或单独的页面上)提供机器可读的链接,但是不能很好地支持,据我所知,也不是一个工作SEO技术。
  5. 请考虑隐藏文本替换:请参阅上一篇文章中的示例,该图像是在iFrame中作为易于共享的文章提供的,其中可索引文本隐藏在iFrame HTML中的CSS剪辑中。
  6. 使用CSS创建您的信息图:这是一个很好的解决方案。以下是具有相同信息图的两个页面以及每个页面如何在Google中缓存。一个是图像文件,其下方的页面上有文本和链接。另一个是带有可索引文本和通过HTML + CSS创建的链接的信息图。

左图:信息图作为图像(该页面还提供了页面上的信息图文本)。

右图:以HTML格式提供的信息图表(源自此处)。

你会发现它们看起来非常相似。

我们来看看代码吧。这是Google对每个页面的信息图文本内容的缓存。

热门:图像信息图表页面上提供的图表文本的Google缓存(部分)。

底部:谷歌缓存(部分)的信息图表文本 CSS信息图表页面上的信息图表。

两者都提供可索引和屏幕可读解决方案。CSS版本无需在页面上的文本中复制有视力的访问者的信息。

您可能已经注意到CSS版本还添加了有用的隐形显示:无节标题,屏幕阅读器可以看到但在信息图中不可见。在上一篇文章中查看隐藏文本的更多信息。

图像和非文本元素工具和资源
  1. HTML5:提供有用文本替代方法的技术 - 更深入的示例,用于使非文本元素可访问
  2. HTML5辅助功能印章:图形和图形元素
  3. 可访问的信息图表
  4. 如何创建一个可访问的信息图
  5. ARIA-在信息图表上描述
  6. W3:使用aria-describedby属性为用户界面控件提供描述性标签
  7. 彩色对比度分析仪工具(下载)
  8. 颜色对比检查工具(在线)
视频转录,字幕和字幕 视频转录

视频转录是与视频一起提供的视频文本。视频转录有助于听不到视频的听力受损的访客,或者用于观看用其他语言或强烈口音观看的人的单词。这对于观看视频的人来说也很有帮助,这些视频听起来很难听,在大声的房间里观看视频,或者你需要在没有声音的情况下观看。

类似地,对于搜索引擎,视频脚本通过文本描述视频的内容。

视频字幕和字幕

字幕和字幕提供时间同步的文本以及播放时的视频。字幕提供对话,而字幕提供对话,还描述其他声音,如音乐,声音效果和说话人识别。

为您的视频内容提供文字伴奏的选项包括:

  1. 在页面上将文字添加为文本。您可以简单地将转录作为文本添加到与视频相同的页面上,例如页面上视频下方的珊瑚礁视频文本示例。您可以自己打印成绩单或使用工具或服务为您执行此操作(请参阅参考资料部分)。
  2. HTML5 <video>和<track>。<video>或<audio>元素上的HTML5 <track>标记允许您向页面添加视频,并使用您的转录文本指定.vtt文本文件。据我所知,谷歌可以索引.vtt文件,但我没有看到任何明确的例子,谷歌将.vtt文本文件与为其提供视频的页面相关联。
  3. 添加交互式记录。使用创建交互式记录的服务,其中记录是时间同步的,并且可以用作视频的导航,如这些定时记录TED会话。
  4. YouTube可以自动化YouTube成绩单,字幕和隐藏式字幕,达到不同程度的准确度,但如果您将视频放在YouTube上,则会非常方便。但是必须检查自动转录 - 特别糟糕的是重音,背景噪音或YouTube视频Chromevox屏幕阅读器的自动转录本的一个很棒的例子,在视频中,它是“图像”。间隔图像。图片。标题图标关闭图像。内部链接。隐私权削减安全。链接。赞助商形象。搜索索引页面描述“
视频无障碍做与不做:
  1. 提供视频(和/或音频)成绩单。提供文本替代品所花费的时间和精力可以帮助搜索引擎和需要文本伴奏的各种观看者理解内容。
  2. 上传或更正YouTube成绩单和字幕: YouTube的自动成绩单很方便,但通常很奇怪和错误,因此需要进行编辑以确保正确性。拥有正确的文本对于依赖于成绩单的查看者很有帮助,并且当搜索引擎对成绩单文本进行索引时,该文本内容可以帮助在搜索结果中显示视频页面。
  3. 提供背景。当它有意义时(特别是在隐藏式字幕中),指示说话者姓名和其他声音上下文,如音乐,相关声音,笑声,欢呼声,喊叫声,哭声等。
  4. 不要垃圾邮件。不要将成绩单用于关键字填充。这是一种糟糕的用户体验,根据您的平台,搜索引擎可能无法将成绩单编入索引,因此请保持真实。
视频辅助工具和资源
  1. 创建成绩单文件的提示(YouTube)
  2. 为网页上的视频添加字幕
  3. 网络上的成绩单:让人们收看您的播客和视频
  4. 媒体辅助功能清单
  5. 耳聋和用户体验
  6. 转录工具和服务(有很多):
    • Amara志愿者或付费转录服务
    • Wistia字幕
    • 3播放交互式字幕
    • ProTranscript基本或交互式转录
    • CaptionBox交互式成绩单(有WordPress插件)
    • SubPLY可嵌入,可定制的交互式成绩单
    • Dotsub字幕和翻译
    • YouTube:上传您的视频,下载自动转录,然后编辑转录,以便在您打算使用它的任何地方使用它。
    • 语音识别软件。那里有各种解决方案。请记住,语音到文本输出是正确的很重要。
回顾并感谢你

如果你错过了之前的帖子,这就是我们所涵盖的内容:

  1. 帖子1: Web可访问性概述,屏幕阅读器下载和SEO / A11y与优化可访问性+ SEO中的标题,标题,架构标记,导航和站点地图重叠:站点和页面结构重叠
  2. 帖子2:关于隐藏文本,关键词填充,文本大小和颜色对比以及优化辅助功能+搜索引擎优化中的链接和锚文本的SEO和A11y重叠:格式化和链接重叠
  •  
All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly