如何让图片更加语义化

By Noxxxx from https://www.noxxxx.com/?post_type=post&p=1063
欢迎分享与聚合，尊重版权，可以联系授权

众所周知，图片标签为了突出其图片的含义，我们通常使用 alt 属性来实现，然而 alt 标签里一定就要写内容么？什么时候要写，怎么写？估计很多人并没有一个清晰的认知。

为什么 img 标签需要书写 alt 属性？

People using screen readers: 使用屏幕阅读器的场景下，alt 属性的内容将被朗读出来
People using speech input software: 语音输入的场景下，只要念出 alt 属性的内容就可以自动聚焦到那些使用图片作为链接的元素
People browsing speech-enabled websites: 当浏览那些启用语音功能的网站， alt 属性的内容将被朗读出来
Mobile web users: 对于移动端设备访问等场景下，特别是处于数据漫游时，图片会被关闭，这时 alt 属性就可以解释此处图片的意义
Search engine optimization: 对于搜索引擎而言，你的图片将会被索引

图片的类型

1. Informative image：传达一个简单的概念或信息，可用短语或句子表达

举个例子：

<img src="cap.png" alt="Push the cap down and turn it counter-clockwise (from right to left)">

以上面这张图为例，我们需要使用 alt 属性来简要的描述这张图做了什么，就好比看到这张图的用户能理解ta的含义，那么对于那些看不到这张图的用户，我们就需要 alt 属性来代替图片传达这个意思。

2. Decorative Images：装饰性的图片

此类图片就是特例，alt 属性可以为空不写，但是最佳实践告诉我们，通常能用 css 实现的就用 css 实现，或者我们使用背景图的方式来替代。

还可以使用 role="presentation" 来代表该图片是装饰性的图片，但兼容性存在问题。

哪些图片可以被归类到 Decorative Images ？

被用作设计展示的
用在文字链接中的，图文混排当成一个整体链接的情况
图片紧挨文字的，文字环绕的情况下，并且周围的文字已经描述了这张图片所包含的内容，然而言之，去除这张图片也无伤大雅，根本就不影响阅读结果的
装饰性的头图，比如说 Medium 上面有些文章在开头会放一张图片，通常和文章内容有那么一丝相关

概括的来说，此类图片去掉无伤大雅，加上则锦上添花。

3. Functional Images：功能性图片

此类图片通常会和 button 按钮，link 链接一起组合使用，此时它所代表的是一种行为和动作。alt 属性里需要表达这种动作带来的后果，但是实际结合上一种装饰性图片的场景，alt 属性又可以不用写。

举个例子：

单纯的一张 logo 图片，被 a 链接包裹的情况：

<a href="https://www.noxxxx.com/">
  <img src="noxxxx.png" alt="Noxxxx home">
</a>

当图片在链接中，a 链接里没有文字时，图片就不单单只是一张图片，ta 被赋予了链接的功能，点击图片就会跳转到某个站点的首页，那么 alt 里就要填上「某某某 Home」。

而这种场景下，alt 标签又是不需要填写的。

<a href="https://www.noxxxx.com/">
  <img src="noxxxx.png" alt=""> Noxxxx Home
</a>

因为链接里有文字描述了，为了防止图片里的文字被阅读器朗读出来，造成重复干扰用户的行为，alt 就可以留空。

4. Images of Text：文字图片

这个较好理解，就是文字在图片里，此时 alt 属性里就应该填写图片里的文字。

需要注意的是，如果文字图片是作为 logo 来展示的，但是实际又没有链接可以点，那么 alt 中也不需要说明个这个图片是 logo，直接填写图片中的文字即可。

5. Complex Images：复杂图片

图片包含的信息量非常大，比如一张图表图，简单的描述解释不了图标所蕴含的真实信息量，因而需要其他的手段来进行辅助。

<p>
	<img
		src="chart.png"
		alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
	<br>
	<a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
</p>

上面的这种方式最简单，通过一个链接引导到一个单独的页面来阐述这张图片的信息，缺点是，这个链接有些突兀，不具有语义化。因此更好一点的做法是，使用 HTML5 的 figure 标签来将链接和图片放在一起。

<figure role="group">
    <img
        src="chart.png"
        alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
    <figcaption>
        <a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
    </figcaption>
</figure>

figure 标签加上 role 属性是为了向下兼容那些不支持该标签的浏览器，这样即便不能展现 figure 的语义，还有 role 属性可以表示。

另一种方式就是在 alt 属性中指出对于图片的详细描述会在哪个 html 结构中，比如说提示用户会在 h3 标签的下方。

<p>
	<img
		src="chart.png"
		alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3. Described under the heading Site visitors full text.">
</p>
[…]
<h4>Site visitors full text</h4>
[…]

相比于使用 alt 来指出「具体描述内容」在 HTML 中的位置，使用 aria-describedby 属性可以更明确的指出「具体描述内容」在当前页面的位置，aria-describedby 的 value 是其他元素的 id，这样二者就可以被关联起来。

<img src="peacock.jpg"
     alt="Male peacock head"
     aria-describedby="description">
[…]
<p id="description">
  The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings.
</p>

6. Groups of Images：分组的图片

简单的场景就是，星星打分的组件，我们可以用图片来实现，而这些图片就是被归类到同一个组当中的。

<img src="star-full.jpg"  alt="3.5 out of 5 stars">
<img src="star-full.jpg"  alt="">
<img src="star-full.jpg"  alt="">
<img src="star-half.jpg"  alt="">
<img src="star-empty.jpg" alt="">

复杂一点的情况就是一组照片的情况，因为你需要对照片进行文字说明，不是简单的一种设计展示了。

我们还是需要借助于 HTML5 当中的 figure 标签来展示。

<figure role="group" aria-labelledby="fig1">
	<figcaption id="fig1">The castle through the ages: 1423, 1756, and 1936 respectively.</figcaption>


	<figure role="group" aria-labelledby="fig11">
		<img src="../../img/castle-etching-6ac1e0cb.jpg" alt="The castle has one tower, and a tall wall around it.">

		<figcaption id="fig11">Charcoal on  wood. Anonymous, circa 1423.</figcaption>
	</figure>

	<figure role="group" aria-labelledby="fig12">
		<img src="../../img/castle-painting-8631e2ea.jpg" alt="The castle now has two towers and two walls.">
		<figcaption id="fig12">Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
	</figure>

	<figure role="group" aria-labelledby="fig13">
		<img src="../../img/castle-fluro-2a089e21.jpg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
		<figcaption id="fig13">Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
	</figure>

</figure>

7. Image Maps：图片映射

这种场景我还没有遇到过，通过使用 map 和 area 标签来将图片上的某些区域做成跳转链接。

<img src="orgchart.png"
     alt="Board of directors and related staff: "
     usemap="#Map">
<map id="Map" name="Map">
	<area shape="rect"
	      coords="176,14,323,58"
	      href="[…]"
	      alt="Davy Jones: Chairman">
	[…]
	<area shape="rect"
	      coords="6,138,155,182"
	      href="[…]"
	      alt="Harry H Brown: Marketing Director (reports to chairman)">
	[…]
</map>