6 个 Alt 标签神话
误区 1:它们被称为“alt 标签”。准确的说,它的名字是“图像标签的替代属性”。alt 属性是一个修饰符,它在 HTML 代码页面中的单个标签中提供有关图像的描述信息。此信息对于帮助视障消费者和搜索引擎爬虫浏览网站非常有用。
例如,请考虑下面来自 Walmart.com 礼品登陆页面的“假日玩具列表”图像和 alt 属性。
—
属性包含以下元素。
- img 标签。在页面上显示图像。
- 咏叹调隐藏。对屏幕阅读器和其他辅助技术隐藏图像。
- 替代属性。“礼物按价格。购买小惊喜,收获大惊喜。”
- 项目属性。将其标识为图像的结构化数据元素。
- data-src 属性。指定要显示的图像文件。
- 风格。指定图像的最小宽度。
alt 属性只是图像标签的一个元素。是的,“alt tag”是常用的名称,但它实际上并不是一个标签。这就像指着一辆踏板车并称其为汽车。人们会理解您认识到踏板车是一种交通工具,但他们也可能认为您最近学过英语。
误区二:Alt 属性可以替代页面文本。页面上可见且对访问者有用的独特文本内容是无可替代的。如果一个页面只包含图像而没有描述性文字,那么它将很难在搜索引擎上排名。即使完美优化的替代属性通常也不会具有足够的重要性来产生影响。他们的 SEO 信号不够强。
误区三:Alt属性主要是为了SEO。alt 属性最初是为了帮助视障访问者而开发的,但对于许多人来说,alt 属性已完全成为 SEO 元素。这是错误且危险的,因为替代属性可能会以阻碍其提高可访问性的真正目的的方式针对 SEO 进行“优化” 。
事实上,通过将替代属性的真正目的放在最前面,可以最好地满足 SEO 需求。简短的描述性替代属性可帮助消费者了解图像和页面的内容以及如何完成他们想要的操作。这些属性还针对搜索引擎进行了优化,而不必担心使用太多内容或太多关键字。
任何能够帮助盲人访问者理解和采取行动而不用过多的文字压倒他们的信息都是您在 alt 属性中所写的内容。例如,如果图像是产品,则该产品的名称就是适当的 alt 属性。但请确保添加产品的所有相关属性。它只是一件连衣裙还是一件 Calvin Klein 黑色丝绸连衣裙?
(顺便说一句,一个有用的测试是安装辅助技术,例如JAWS,它提供 40 分钟的免费试用,可以读取页面中可见和未见的文本元素。如果您仅在 JAWS 上浏览网站时遇到困难,访问者可能会遇到更多困难。)
误区 4:每张图片都需要 alt 属性。有些图像在 alt 属性元素中留有空白会更好。纯粹用于导航或设计的图像(间隔符、线条、项目符号)不应使用 alt 属性。想象一下,必须听屏幕阅读器说出这样的话才能了解菜单中有四个导航链接:
“图形线条分隔符 图形间隔 gif 子弹图形橙色箭头链接 玩具和游戏图形间隔 gif 子弹图形橙色箭头链接 服装和配饰图形间隔 gif 子弹图形橙色箭头链接 家居和花园图形间隔 gif 子弹图形橙色箭头链接 运动和户外图形线分隔器。”
三个图像的存在——分隔线图像、间隔图像和用于描绘选项列表的橙色项目符号——需要 10 倍的屏幕阅读器来传达文字。将这三个图像的 alt 属性留空将节省视障消费者的时间并提高她成功使用该网站的能力。她只需要听这样的话:
“Bullet Link 玩具和游戏、Bullet Link 服装和配饰、Bullet Link 家居和花园、Bullet Link 运动和户外活动。”
正如上面沃尔玛图像所指出的,您还可以使用aria-hidden元素来指示辅助技术应大声朗读哪些图像属性。这保留了描述性 alt 属性的值,而不会给屏幕阅读器用户带来负担。
误区 5:立即修复替代属性。在担心优化现有图像的 alt 属性之前,先解决其他现场 SEO 元素。Alt 属性的 SEO 价值如此之小,以至于将其作为独立策略进行优化并没有足够的好处。
相反,优化 (a) 标题标签和元描述,(b) 模板以突出最佳文本字段,(b) 以及导航和交叉链接元素。然后清理重复的内容。之后,优化alt属性。
可以肯定的是,有时 alt 属性很重要。
- 如果图像搜索是优先考虑的。
- 对于新图像 - 在上传过程中包含 alt 属性。
- 提高可达性。
误区六:Alt 属性编写起来很耗时。 除非您得到开发人员的支持,否则这基本上是正确的。借助适当的脚本、工具和快捷方式,编写替代属性的过程可以缩短到原本所需时间的一小部分。
要求您的开发人员为每个产品图像编写一个脚本,以自动包含产品名称以及可能的一些高度相关的描述。请您的摄影师或图形设计师对图像进行描述性标记。不要使用“image02345s.png”,而是以开发人员可以编写脚本来构建 alt 属性的方式命名图像。
认真考虑其他自动化方法来生成良好的替代属性。向您的开发人员和其他数字营销人员寻求帮助。
否则,手动查看和写入每个图像的 alt 属性可能会花费大量时间。如果你必须解决这个问题,请明智地确定优先顺序。从赚取最多收入或带来最高利润的产品开始。
文章翻译自:Practical Ecommerce ;原文链接:https://pec-ly.com/?HiN