认识达内从这里开始

图片的性能优化对于提高用户体验是有很大的帮助作用的，而本文我们就通过案例分析来简单了解一下，web前端图片的可访问性处理。

可访问性(A11Y)，在我们的网站中，属于非常重要的一环，但是大部分同学都容易忽视它。

在一些重交互、重逻辑的网站中，我们需要考虑用户的使用习惯、使用场景，从高可访问性的角度考虑，譬如假设用户没有鼠标，仅仅使用键盘，能否顺畅的使用我们的网站?

非常重要的一点是，提高可访问性也能让普通用户更容易理解Web内容。

基于Usability&WebAccessibility-image

对于图像信息，我们需要大致遵循如下可访问性原则：

所有有意义的img元素必须有alt属性

提供替代alt属性的其他方式

使用辅助技术隐藏装饰图像

一点非常好理解，所有的有意义的图片元素都必须要提供alt属性。

二点比较有意思，在A11Y中，其实有一套WAI-ARIA标准。WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。

简单来说，它提供了一些属性，增强标签的语义及行为：

可以使用tabindex属性控制元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航

还有大量的aria-*属性，表示元素的属性或状态，帮助我们进一步地识别以及实现元素的语义化，优化无障碍体验

上述二点，提供替代alt属性的其他方式的含义就是使用WAR-ARIA规范提供的诸如aria-label和aria-labelledby属性为图像提供可访问的名称。

当存在这些属性时，辅助技术(屏幕阅读器)将忽略图像的alt属性并读取ARIA标签。

而三点，使用辅助技术隐藏装饰图像，又是什么意思呢?

上面一点所有有意义的img元素必须有alt属性，反过来说，页面上也会存在无意义的装饰性的图片，这些图片内容对辅助技术(屏幕阅读器)而言，其实是可以忽略的。

对于没有任何功能或信息内容的装饰图像，可以通过多种方式对屏幕阅读器隐藏：

使用空的alt属性

使用ARIA属性role="presentation"标明图片元素是装饰可忽略图片

使用CSSbackground的方式呈现这些图片

alt不要与title混淆

OK，下面来讲一些有意思的细节内容。

有一个非常基础的知识，简单过一下，也就是图片元素中，alt与title的差异：

图片中的alt属性是在图片不能正常显示时出现的文本提示。

图片中的title属性是在鼠标在移动到元素上的文本提示。

正确使用alt属性

对于使用屏幕阅读器的用户而言，图片是无法正常展示或者被的浏览的，基于此，我们需要利用好alt属性，或者是上述的aria-label和aria-labelledby属性。

那么，这些属性内的内容应该填充什么呢?我们需要基于图片的功能加以区分：

信息性图像：以图形方式表示概念和信息的图像，通常是图片、照片和插图。alt替代文本应该至少是一个简短的描述，传达图像所呈现的基本信息。

装饰性图像：当图像的目的是为页面添加视觉装饰，而不是传达对理解页面很重要的信息时，如上述所言，使用空的alt，譬如alt=""

功能图像：用作链接或按钮的图像的替代文本应该描述链接或按钮的功能，而不是视觉图像。此类图像的示例是表示打印功能的打印机图标或提交表单的按钮。

文本图像：可读文本有时会出现在图像中。如果图片不是徽标，请避免图片中出现文字。但是，如果使用文本图像，替代文本应包含与图像中相同的词。

图形和图表等复杂图像：为了传达数据或详细信息，提供与图像中提供的数据或信息等效的完整文本作为替代文本。

图像组：如果多张图像传达一条信息，则一张图像的替代文本应传达整组信息。

图像映射：包含多个可点击区域的图像的替代文本应该为链接集提供整体上下文。此外，每个可单独点击的区域都应该有替代文本来描述链接的目的或目的地。

其实alt的学问是非常之多的，如果我们的页面能做到这一点，那真的算是从根上开始思考，开始优化用户体验。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加抖音太原达内IT培训学习了解。