千赢国际娱乐 电脑版SEO专业的千赢国际app下载安装千赢国际娱乐官网app公司

可访问性+ 千赢国际娱乐 电脑版SEO千赢国际娱乐官网app:图片、视频和非文本元素

浏览:/ 2017-04-24
可访问性+ 千赢国际娱乐 电脑版SE0千赢国际娱乐官网app:图片、视频和非文本元素
在本系列的前两个职位我们站点和页面结构重叠覆盖,和格式和链接重叠。在最后这篇文章里,我们将讨论可访问性和千赢国际娱乐 电脑版SE0重叠编码媒体元素。
图像和非文本元素
可以想象,在线的图像可以为视障游客解读问题,但幸运的是我们使用的技术在这里所以你和我可以帮助解决这个问题合适的编码,在图像和非文本元素。
QQ截图20170330160804.jpg
一些图片和非文本元素的例子:
图像,包括图形和图表、文字艺术、装饰和背景图片,摄像头图像、照片
信息图
图像映射
动画
图形按钮
验证码
这里有一些事情你可以千赢国际娱乐官网app图像和非文本元素更好的可访问性。
Alt属性
图像alt属性在千赢国际娱乐 电脑版SE0是用来描述搜索机器人的图像是什么或如果图像的像点是一个链接。如果一个链接,alt属性就像关键词锚文本,帮助百度了解目标页面的上下文。
Alt属性也由屏幕阅读器读取图像。这里有一个简单的例子:
Alt属性是一个双赢的可访问性和千赢国际娱乐 电脑版SE0千赢国际娱乐官网app,但也有一些事情要记住,尤其下面的这些前两项,千赢国际娱乐官网app屏幕阅读器的Alt属性。
Alt属性守则:
不要使用alt属性装饰图片:装饰云在你的医疗保险千赢国际app下载安装上的图片不是一个钩获取图片搜索流量和在屏幕阅读器提供上下文并不有用。装饰形象仍然可以看梦幻的但不妨碍用户浏览页面为视力受损的用户通过保持alt属性alt = "(null),或通过背景图像。
不要使用alt时还有一个文本链接:如果图像是一个链接,链接文本图像,都指向相同的目的地,屏幕阅读器将读和听起来重复和奇怪。使用alt = " "(null)图像alt和保持锚文本指向目标页面的主题。这可能是有争议的千赢国际娱乐 电脑版SE0想把图片的alt属性来帮助它在图片搜索排名。我建议在这样一个是使用图像的alt属性在目标页面,因为这是页面你想出现在serp中(可能是一个伟大的主题辩论更多的注释)。
保持简短或使用说明:有一些建议在网络上的痕迹,JAWS屏幕阅读器不做与alt属性超过125个字符。是否这是真的,更用户友好的alt属性短。如果你想知道为什么,屏幕阅读器扩展添加到你的浏览器(如ChromeVox Chrome或尖牙Firefox)和浏览页面和图像alt属性。如果你有很多关于一个图像,把它放在标题文本或描述它在页面上的文本而不是在alt。
不字的东西——写自然。让我们考虑医疗保险千赢国际app下载安装与装饰云图像例子。千赢国际娱乐 电脑版SE0的着陆页面上可以看到五个装饰云映像五机会的东西“健康保险,健康保险工具,卫生工具”等alt属性。不要这样做。它不仅噪音屏幕阅读器,可以迷惑和烦人。另外,实际上,没有人是做图像搜索“健康保险”——即使他们,他们的机会在搜索结果中点击云的照片希望得到他们正在寻找非常苗条。同样的,确保你的alt属性是描述性和意义——写的人,不只是一群机器人的关键字。
图像字幕
百度可以段文本附近一个图像属性,文本图像,甚至创建自己的标题;因此,文本附近一个图像可以帮助提供上下文和可能影响排名。图像字幕还提供了上下文屏幕阅读器,往往比一个alt属性可能提供更多的上下文,或在一个alt属性如果一个上传的时候不知道。
图像字幕守则:
不要使用alt属性是否有图像标题。类似于锚文本链接,通过alt属性和标题描述一幅图像可以重复。这也可能是一个有争议的实践,千赢国际娱乐 电脑版SE0s可能要同时使用。在这种情况下,考虑如何读的屏幕阅读器读取一个标题和一个alt属性,并试图做出最好的决定,将为这两个工作
描述你的字幕。例如,使用图1:“这字幕标签是正确理解人们使用辅助技术,可能无法识别标签。
可选:使用< figcaption >标记:<人物>与< figcaption >标记可以应用于图像或其他页面元素。Figcaption不一定是一个已知的标记为千赢国际娱乐 电脑版SE0千赢国际娱乐官网app,他们不是屏幕阅读器的必做的,但是听起来像百度一样试图索引标签中的文本是否识别标签,尽管Figcaption变量可读性的屏幕阅读器,文本可能会被视为一个相关的元素到一个图像屏幕阅读器,希望有帮助。
Text-as-images
原因为千赢国际娱乐 电脑版SE0避免文本,图片是相似的可访问性:简单地避免文本在一个图像如果你希望能够machine-read文本。文本作为一个图像也并不总是理想的人需要用放大镜,放大文本在一个图像像素化以来,难以阅读。
Text-as-images守则:
不要使用文本图像的重要信息。如果你必须使用文本作为一个图像,使用alt属性来描述图像文本如果它应该由搜索机器人和屏幕阅读器读取。
考虑实际样式文本作为替代。如果你需要你的文本一种特定的方式,使用HTML + CSS样式它或使用SVG(可伸缩向量图形)。
信息图
图表中一直流行千赢国际娱乐 电脑版SE0吸引链接,提高排名。千赢国际娱乐 电脑版SE0可能还想提供页面的上下文信息的百度和它的部分。
可访问性的想法是能够很容易地确定信息图表描述了什么。屏幕阅读器,与百度不同,不能确定信息页面的上下文使用数百页的链接文本和页面内容链接到你的信息。屏幕阅读器是所有页面的代码信号,你可以想象,描述一个复杂的信息图表的alt属性。还要考虑使用颜色色盲用户或我们遇到的问题文本图像(不是“可读”,鳞片像素),我们在第2部分覆盖。
没有一个简单的<信息图表>标记,允许您添加一个冗长的,信息的完整描述像一个长alt属性(尽管你可以考虑longdesc下文)。相反,我建议你测试了下面的这些策略,看看哪种最适合您和您的特殊情况:
信息图表守则:
不描述整件事的alt属性。这可怕的体会到屏幕阅读器(不能浏览文本,复制或粘贴,等等)。使用alt作为他们应该被使用,长时间,选择另一种方法描述。
做坚持色彩对比的要求。提前计划时考虑颜色为您的信息,并使用颜色,满足最低色彩对比的要求。使用这个工具来帮助你。
做考虑ARIA-describedby。这个咏叹调(访问富互联网应用程序)读取属性除了alt文本在一个图像,并允许在很长一段描述。这里有一个视频的例子。注意,由于describedby宣布除了图像alt文本,这可以重复。
longdesc属性:这张图片属性允许您提供一个机器可读的长描述图片链接(在页面内或在一个单独的页面),但不支持工作,据我所知也不是一个千赢国际娱乐 电脑版SE0千赢国际娱乐官网app技术。
做考虑隐藏文本交替:看到一个形象的例子在前面的帖子信息提供一个轻松地共享在一个iFrame的可转位文本隐藏在一个CSS剪辑iFrame HTML。
使用CSS创建你的信息:这是一个很好的解决方案。下面是两个页面相同的信息以及他们每个人穿百度缓存。一个是一个图像文件,下面的页面上的文本和链接。另一个是信息与可转位通过HTML + CSS文本和链接创建。
左:信息作为图像(该页面还提供了信息文本在页面上)。
右:信息提供用CSS样式化的HTML(源)。
左:图像信息。右:HTML信息图表。
你会注意到它们看起来非常相似。
让我们来看看代码。这是百度缓存信息文本内容的每一页。
上图:百度缓存(部分)图像信息页面上提供的信息文本。
底部:百度缓存(部分)的信息文本CSS信息页面上的信息。
百度缓存(部分)图像信息页面上提供的信息文本
百度缓存(部分)的信息文本CSS信息页面上的信息。
提供了可转位和屏幕可读的解决方案。CSS版本它也无需重复的信息文本在页面上的游客。
您可能已经注意到CSS版本还增加了有用的无形的显示:没有节标题,看到的屏幕阅读器,但不可见的图中。在前面的帖子上看到更多的隐藏文本。
图像和非文本元素的工具和资源
HTML5:提供有用的技术文本的替代品——更深入的例子可以让非文本元素
HTML5的可访问性排:图和figcaption元素
访问信息图
如何创建一个可访问的信息吗
ARIA-describedby在信息图
W3:使用aria-describedby属性为用户界面控件提供了一个描述性的标签
颜色对比分析器工具(下载)
颜色对比检查器工具(在线)
视频转录、字幕和字幕
视频转录
视频转录文本提供的视频和视频。视频转录有助于听力受损的游客听不到视频,或解释单词的人看在另一种语言或强烈的口音。也有助于任何人观看视频很难听到的声音,房间里一声看视频时,或当你需要看没有声音。
类似的百度、视频记录描述视频通过文本的内容。
视频字幕和字幕
字幕和字幕提供time-synced文本和视频时。字幕提供对话,而字幕提供了对话,还描述了其他听起来像音乐、音效和识别。
选项提供文本的选择为您的视频内容包括:
添加文本在页面上的记录。你可以简单的添加转录文本在同一页面的视频,就像这个例子的珊瑚礁视频页面上的文本下面的视频。你可以输入文字记录自己或使用工具或服务为你这样做(参见参考资料部分)。
HTML5视频< >和<道>。HTML5 <道>标记<视频>或<音频>元素允许您添加视频到你的页面,并指定一个。vtt文本文件与你的转录文本。据我所知,百度可以索引。超薄技术文件,但是我没有看到任何明显百度关联的例子。vtt文本文件的页面来源的视频。
添加一个互动记录。使用一个服务,创建一个交互式成绩单,成绩单在哪里time-synced通过视频和可以用来导航,这样的时间记录TED演讲。
YouTube成绩单、字幕和关闭字幕由YouTube自动化不同程度的准确性,但是他们非常方便,如果你把你的视频在YouTube上。自动转录必须检查,尽管——这尤其糟糕的口音,背景噪音,或这可怕的例子,YouTube的自动记录ChromeVox屏幕阅读器的一段视频,视频中,读取”的形象。垫片的形象。的形象。标题图标图像。内部链接。隐私削减安全。链接。赞助商的形象。搜索索引页面描述”,但被转录为“在西班牙在卡纳克o电信在中国se dirigen al comico金·凯瑞算法”。
YouTube抄录视频的截图显示ChromeVox导航作为西班牙语言文本
视频可访问性守则:
提供视频(和/或音频)记录。所花费的时间和精力提供文本选择可以帮助百度以及各种观众需要一个文本伴奏理解内容。
做正确上传或YouTube成绩单和标题:YouTube的自动记录方便,但通常奇怪的和错误的,因此需要编辑的正确性。拥有正确的文本是有助于你的transcript-dependent观众,当百度索引记录的文本,文本内容可以帮助表面视频页面在搜索结果中。
确实提供了上下文。当它是有意义的(特别是在字幕),显示演讲者的名字,喜欢音乐,声音和其他上下文相关的声音,笑声,欢呼,大喊大叫,哭泣,等等。
不要垃圾邮件。不使用关键字千赢国际娱乐官网app的成绩单。这是一个糟糕的用户体验,根据您的平台,记录可能不被百度索引,所以保持真实。
视频可访问性工具和资源
提示创建记录文件(YouTube)
向Web页面上的视频添加字幕
网上成绩单:让人们你的播客和视频
媒体可访问性检查表
耳聋和用户体验
转录的工具和服务(有很多):
Amara志愿者或转录支付服务
Wistia字幕
3游戏互动字幕
ProTranscript基本转录或交互
CaptionBox互动记录(WordPress插件)
SubPLY可嵌入、可定制的、互动记录
Dotsub字幕翻译&
YouTube:上传你的视频,请下载自动转录,转录,然后编辑使用它无论你打算使用它。
语音识别软件。有各种各样的解决方案。记住,这将是重要的语音输出是正确的。
回顾&谢谢
如果你错过了之前的帖子,这里就是我们覆盖:
职位1:Web可访问性概述,屏幕阅读器下载和千赢国际娱乐 电脑版SE0千赢国际娱乐官网app/ A11y与标题、标题、模式标记、导航和站点地图可访问性+ 千赢国际娱乐 电脑版SE0千赢国际娱乐官网app:千赢国际app下载安装页面结构重叠
职位2:千赢国际娱乐 电脑版SE0和A11y重叠关于隐藏文本、关键字千赢国际娱乐官网app、文本大小和颜色的对比,和链接和锚文本千赢国际娱乐官网app可访问性+ 千赢国际娱乐 电脑版SE0:重叠格式和链接
我想延长一个巨大的感谢以下人花时间核实,提供参考资料,对一些伟大的本系列讨论在创建,致力于使web可访问。谢谢你!
特德德雷克(twitter千赢国际app下载安装|)
瑞安·伯吉斯(twitter千赢国际app下载安装|)
文森特·弗朗索瓦(twitter千赢国际app下载安装|)
詹妮弗·萨顿(twitter千赢国际app下载安装|)
劳拉。Lippay——营销和科技迷,ex-circus表演者,沉迷于笑,打破一切规则和奇怪。
来自帝国网络http://www.wangzhanyouhua.net 帝国论坛 5uu.us

 
阅读"可访问性+ 千赢国际娱乐 电脑版SEO千赢国际娱乐官网app:图片、视频和非文本元素"的人还阅读 上一篇:千赢国际娱乐 电脑版SEO是一个必要的和可衡量的投资?下一篇:本地存储定位千赢国际娱乐 电脑版SEO千赢国际娱乐官网app