厦门网站建设将尝试阐明此重要属性的正确用法。让我们开始吧!
图片在网站设计中的角色变化
多年来,网页设计师利用图像的方式已经发生了很大变化。在网络的早期,图像以我们现在可能不想考虑的方式使用。我们将它们用作页面标题,导航系统,甚至是充满内容的整个页面。
对于依赖屏幕阅读器或其他辅助技术的用户,这可能导致页面无法使用。在大部分内容显示为图像的情况下,即使是简单的alt属性也无济于事。
值得庆幸的是,已经学到了一些重要的教训。网络印刷术的爆炸式增长消除了过去与设计有关的任何滥用图像的原因。随着无障碍获取的到来,现在许多人意识到图像扮演着特定的角色。
替代文字的重要性
理所当然的理由是,更聪明地使用图像应该可以带来更好的可访问性。尽管这在一定程度上是成立的,但我们仍然有可能将事情搞砸。如果使用正确,则可以在其中输入替代文本并节省时间。
记住自己单独使用alt属性并不一定给用户带来很多好处。例如,假设我们有一个标题标签,上面写着“关于我们”。下面是公司员工的合影。如果我们只是将alt属性设置为alt=“About Us”
,则在通过辅助技术读取时,它将变得多余。因此,它并没有真正告诉用户图像是什么或意味着什么。
那么,我们应该用什么代替呢?在很大程度上取决于页面本身的内容以及其中图像的角色。但是,这带来了另一个潜在的混乱点。
幸运的是,W3C有一个有用的指南,可以将图像分解为不同的概念:
- 内容丰富
- 装饰性
- 功能性
- 文字图片
- 复杂
- 图片组
- 影像图
该指南对每个概念进行了简要说明,并提供了示例,可以帮助您确定提供替代文本的最相关路径。如果您仍然不确定,请查看替代决策树以获取更多指导。
图片一定要加alt吗?
W3C指南中最有趣的指导思想之一是,并非所有图像都需要alt属性。
但是,请稍等。那么所有那些每次都使用alt的调用又如何呢?我们不忽略可访问性吗?
事实证明,对于装饰性图像(不向页面添加任何信息),alt属性变得不必要。在这些情况下,提供替代文本可能会“在屏幕阅读器输出中添加可听的混乱”。因此,就像缺少空白会导致混乱的视觉页面布局一样,多余的文本内容对于依赖这些工具的用户也可以做到。
对于Web设计人员而言,使之困难的是,诸如WAVE的自动辅助工具会标记图像,而这些图像在翻阅页面时没有其他文本。即使是Google,也可能向您发送烦人的电子邮件,抱怨您无法查看特定的图像。这迫使我们填写属性,只是为了通过自动化测试。
因此,我们需要一心一意地得出这些结果,并在必要时向客户说明情况。碰巧空alt属性在特定情况下可能是有益的。
帮助用户
在对如何使用alt属性进行一些研究时,我意识到我经常采用错误的方法。我怀疑很多设计师都做过同样的事情。
在某种程度上,这是可以理解的。这个属性已经存在很长时间了,但并不令人兴奋。它是功利主义者,并不总是摆在我们的脑海中。
但是,对于许多用户而言,它至关重要。考虑到并不是每个人都能轻易看到我们集成到页面中的图像。对于这些人来说,alt属性可以帮助他们将上下文带到他们所消费的内容中。
随着我们构建一个越来越复杂的网站,这是要牢记的。