乐趣区

关于javascript:当你写图片的-alt-时你是否犯了这五个错误

jiezi

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

次要探讨了编写代替文本（alt text）时的五个常见谬误。代替文本用于为视觉受限的用户提供图像的文字描述。以下是五个须要防止的谬误：

  1. 简短的形容：形容应该简洁明了，防止应用过长的句子。个别状况下，125 个字符就足够了。
  2. 疏忽功能性图片：如果图片具备功能性，如按钮或链接，形容应明确图片的性能，而非仅形容图片外观。
  3. 形容图片中的文字：如果图片中蕴含文字，代替文本应蕴含这些文字内容，以便视觉受限的用户可能获取相干信息。
  4. 以图片结尾：防止在形容中应用 ”image of”，”picture of” 或 “graphic of” 等词语，因为屏幕阅读器会主动告诉用户有图片。
    5. 齐全疏忽代替文本：为每张图片提供代替文本至关重要，哪怕形容很简略。这有助于进步网站的可拜访性。

总之，为了使网站更具可拜访性，咱们应该防止上述五个谬误，为视觉受限的用户提供更好的在线体验。正确应用代替文本有助于改善网站的无障碍性能，让更多人可能顺利地拜访和应用网站内容。

注释开始~

然而大多数人不晓得如何编写良好的代替文本、我也是其中之一。

我在高中建网站时第一次理解到代替文本。然而我的正式课程是在我加入 Udacity 数字营销纳米学位课程时开始的，这也是我第一次接触营销。

在这个模块中，我学习了如何构建易于导航的网站构造、题目标签、面包屑和元形容——所有好的货色。咱们还学习了如何编写代替文本及其重要性。

有时候，简略就是杀手

当你询问他们时，大多数专家的倡议也归结为：形容你所看到的。尽管这是无效的倡议，看起来很简略，但实际上并非如此。

以 Udacity 的例子为例：这是适当的代替文本吗？

如果你闭上眼睛，有人向你朗诵“吃苹果心脏病”这句话，这是否有助于你了解图像中的内容？

这个例子怎么样？

答案是相对不行。

我过来只是形容我看到的

两周前，我看到了汤米·沃克(Tommy Walker)，一位前 Shopify 高级内容营销师和编辑，对一篇文章的 alt 文本应用进行了批评。

请留神，alt 文本没有传播审核后果。具备讥刺象征的是，这篇文章在为可拜访性辩护。但它使观点更清晰。第一次，我意识到我始终以来都在谬误地编写 alt 文本。

这让我很好奇，所以我开始进行钻研：

  • 我浏览了许多 UX 和 SEO 博客
  • 我与那些畛域的从业者交谈过，而且我与一些低视力社区的成员聊天了

这是我学到的并且当初利用于我写的文章的内容：

1. 一些图片应该应用空的 alt 属性

首先，廓清一下：

  1. alt 属性是 HTML 语法
  2. alt 文本是指在 alt 属性引号中蕴含的形容
  3. 所有图像都须要一个 alt 属性，但并非所有图像都须要 alt 文本。这是两个不同的事件，所以不要混同它们。

那么，如何晓得图像是否须要一个空的 alt 属性？装饰性 / 信息性 / 活动性办法。

装饰性图片(DECORATIVE IMAGES)

装饰性图片的惟一价值在于美学。如果 alt 被移除，网页依然可能完满地表白意思。

一些例子是没有文本的网站横幅和其余设计元素。对于这种类型的图像，咱们应该省略形容，但始终包含一个空的 alt 属性。

<!-- Sample decorative image -->
<img
  alt=""src="decorative-banner.png" />

信息图像(INFORMATIVE IMAGES)

信息图像为文章中出现的信息减少了额定的背景。一些例子包含图表、图示、投票后果和产品截图。在形容它们时要留神。随着浏览的进行，咱们将学会如何形容它们。

<!-- Sample informative image -->
<img
  alt="A small, black, compact digital camera."
  src="product-photo.png" />

流动图片(ACTIVE IMAGES)

流动图片用于执行诸如注册、下载、收听、上传等操作。

它们次要是链接和按钮。在为这些类型的图像编写 alt 时，防止应用“Click here”等术语。

相同，应用相似“注册 Twitter 帐户”、“转到帐户页面”、“上传身份证”等形容。

<!-- Sample active image -->
<img
  alt="Upload resume."
  src="upload-prompt.png" />

2. 上下文很重要

alt文本应简洁精确地形容图像的内容。如果你有一个总体观点要表白，请让四周的文本内容来传播它。

例如，这张图片能够用于：

  • 帮忙辨认商家名录
  • 一篇对于不道德的二手车交易公司的揭发报道
  • 一份商业房地产清单，或称为商业房地产上市
  • 承诺商业振兴的政治竞选活动

由读者决定对某事的感触，而代替文本有助于为他们提供残缺的故事背景。

这不仅对无障碍性有用，而且在像 SEO 这样的竞争强烈的畛域中也很有用，你将与 HubSpot、Databox、The New York Times 和 Zapier 等巨头竞争。

3. 屏幕阅读器和搜索引擎曾经晓得这是一张图片

不须要增加 “image of”，”picture of” 或 “graphic of” 的字样。这只会导致反复，对听众来说可能很烦人，特地是如果文章蕴含大量图像。

相同，应用额定的字符更好地传播信息。

我喜爱上面这个的简略性：

4. 将 alt text 文本编写为简略的句子

搜索引擎优化师中的一种光明做法是将指标关键词塞入图像的 alt 文本中。这是一种可怕的用户体验。

谷歌的约翰·穆勒（John Muller）屡次示意，alt 属性不会影响一般的谷歌搜寻。

此外，如果你认为须要在 alt 属性中填充关键字，那么您就开始走上了谬误的路线，Google 也会像看待 Overstock、BMW 甚至 Google 日本一样看待您。

屏幕阅读器（如 JAWS 和 NVDA）会朗诵 alt 文本，就像咱们朗诵句子一样。因而，你应该将你的形容格式化为带有适当标点和拼写的惯例句子。

没有一个固定的公式来规定代替文本应该有多长。你应该简明扼要地精确形容图像中存在的所有重要和相干细节。

在须要形容钻研报告中的简单图表或图形等状况下，思考遵循 W3C 解决简单图像的教程。请留神，longdesc 办法不再无效（请参考链接的正文局部）。

5. 不要在 alt 文本中反复题目

将字幕逐字复制到代替文本中是电子商务中的一种风行做法，因为营销人员认为这样能够进步搜索引擎排名，但实际上这会导致蹩脚的用户体验。

这是因为屏幕阅读器最终会反复雷同的单词。设想一下这种状况产生在两个、三个甚至五个图像上，你很快就能看到残障人士的体验如何降落。

字幕和 alt 文本有不同的用处。字幕通常用于增加详细信息，例如照片起源和版权信息。alt 文本应该形容图像在文章上下文中的含意。

你能够省略题目，但不能省略 alt 属性。

编写 alt 文本可能会让人感到手足无措或碌碌无为

对于一些人来说，可能会感觉你在为你的用户和读者中的一小部分额定破费工夫和金钱。因而，你可能会有疏忽 alt 文本的激动。

暂且不管排挤和歧视，疏忽 alt 文本不是你想在公司网站上冒的危险，因为这是劫难的配方。

指标心愿他们早些晓得，因为这给他们造成了 600 万美元的损失。当 Netflix 没有从指标身上吸取教训时，他们因法律费用和抵偿而损失了 755,000 美元。这样的例子还有很多。

更重要的是，越来越多的有视力的人应用文本转语音软件，以便他们能够同时解决多个工作或者劳动一下，不必终日盯着 LED 屏幕。如果你的内容无法访问，将会导致蹩脚的用户体验。

这也是一个被列入互联网名人堂的机会

在一些网站上，三分之一的流量来自于 Google 图片搜寻。正确设置 alt 文本是 Hubspot 将额定的 160,000 个流量会话带到他们的博客的办法。

尽管让你的网站变得无障碍可能须要学习很多内容，但我的倡议是不要让本人感到手足无措。相同，逐渐进行，并理解 alt 文本的根本目标，包含：

  1. 使屏幕阅读器更容易精确地向依赖它们的人形容图像
  2. 如果图像无奈加载，则显示代替图像
  3. 帮忙搜索引擎了解您网站上的图形

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版