/ accessibility

alt 值换行导致的用户体验问题

HTML 中 alt 属性用于为屏幕阅读器、搜索引擎等提供元素描述信息。在编写 HTML 过程中,出于控制单行代码长度考虑,有时我们会将 alt 属性的值换行。这对普通用户毫无影响,但对于屏幕阅读器用户却会产生一些用户体验问题:

  • alt 文本阅读在一行结束的时候停止;
  • 按「继续阅读」键以后,alt 文本阅读继续,但是每行开头都会加上元素角色名称(如 <img> 会加上 graphic)。

实例

alt 值换行时

<img alt="Having no line breaks in HTML code of alt attributes produces better UX, 
than 
having 
line 
breaks." />

将阅读为:

graphic, Having no line breaks in HTML code of alt attributes produces better UX
graphic, than
graphic, having
graphic, line
graphic, breaks.

alt 值不换行

<img alt="Having no line breaks in HTML code of alt attributes produces better UX, than having line breaks.">

将阅读为:

graphic, Having no line breaks in HTML code of alt attributes produces better UX, than having line breaks.

国内目前还没有 Web 可访性方面的立法,应该也不会有多少公司关注屏幕阅读器这个用户群。但作为从业者,应该从我做起,开发过程中多留意特殊群体的可访性、可用性及用户体验问题。

via Short note on coding alt text