如何让图片更加语义化

众所周知,图片标签为了突出其图片的含义,我们通常使用 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:图片映射

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

<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>

参考链接:
W3C 可访问性中 image 的使用