对于符合WCAG 2.0标准的网站,需要为图像添加alt标签。
当谈到像公司徽标这样的东西时。如果alt标签只是公司的名称,或者公司名称后跟“Logo”,我认为前者更有意义但是如果有一个明确的最佳实践我想知道!
激动人心的问题呃?
答案 0 :(得分:7)
最佳指南是,如果图像不可用 - 您想要看到什么?
alt文本不应该是图像的描述,它是图像的文本替代。
答案 1 :(得分:5)
屏幕阅读器的用户是否有价值标识?如果不是 - 那么考虑通过CSS而不是<img>
标签显示图像 - CSS(表示)图像不需要alt
标签(它们实际上不能拥有它们),它们被理解为页面的可视部分而不是页面的实际内容。
暗示图像是与页面相关的有价值内容 - 因此,如果徽标基本上只是眼睛糖果,仅具有表现价值,那么它可能根本不属于HTML。
请记住:屏幕阅读器允许用户访问内容。 HTML用于内容,CSS用于演示 - 如果您的HTML混淆了非内容,那么提供良好的,可访问的体验变得更加困难。
答案 2 :(得分:2)
我会选择“(公司名称)徽标”,因为ALT文本用作对用户无法看到的图像的描述(例如,对于屏幕阅读器)。
我认为WCAG 2.0指南是supporting this:
当图片包含对理解内容很重要的单词时,替代文字应包含这些单词。这将允许alt文本在页面上播放与图像相同的功能。请注意,它不一定描述图像本身的视觉特征,但必须传达与图像相同的含义。
答案 3 :(得分:2)
我认为这取决于您的个人偏好。你想传达图像的意义,而不是它究竟是什么。例如,我会使用替代“下一页”而不是“右箭头”的替代文字。所以我会选择公司名称,因为这是徽标的重点。
答案 4 :(得分:0)
嗯,无论是什么使得页面文本的流动最容易理解。如果徽标在公司名称旁边作为文本,那么当屏幕阅读器使用时,“Big Company Big Company”和“Big Company Logo Big Company”都不是最好的。
alt标签的要求主要用于图像按钮:
<a href="page2.html"><img src="next.png" alt="next page" /> </a>
或图像传达真实信息的其他地方,如图表和图表。
图像仅仅是装饰性的地方,空白的alt标签可能是最好的。
使用alt标签对“关于公司”网页进行成像,并通过屏幕阅读大声朗读。 (来自exxonmobil.com的Actaul文章:“关于我们 - 安哥拉Kizomba平台上的两名工人 - 我们是世界上最大的公开交易的国际石油和天然气公司”)从图像中拖出不相关的细节会降低可读性,而不是提高可读性。
答案 5 :(得分:0)
我希望我可以指向一个权威来源,但是在以前的生活中处理过可访问性,我认为“logo”是首选,因为它更准确地表示实体。例如alt =“Mount Hood的照片”与alt =“Mount Hood”完全不同,前者更受欢迎。
答案 6 :(得分:0)
虽然我非常喜欢@ Gareth的回答,但还有另外一件事需要考虑:
徽标的父元素是什么?如果它被标记为<a href="/index.html"><img src="/company-logo.png" alt="" /></a>
,那么最好的alt实际上就是&#34; [公司]主页&#34;或&#34;转到[公司]主页&#34;。然后,具有屏幕阅读器的已禁用用户将听到&#34; [公司]主页,链接&#34;或可能&#34; [公司]主页,访问过的链接&#34;。
每当您使用图片作为链接内容时,alt会告诉用户点击该链接时他们去哪里。与按钮相同。如果您使用图像作为按钮内容,则alt应该告诉用户单击按钮时会发生什么。
就像旁白一样:如果点击将用户带到另一个页面或页面的其他部分,但不需要进一步的交互,则单击的元素几乎总是在语义上是一个链接。如果单击执行除导航之外的操作,显示其他选项或内容,或者在单击(打开必须关闭的对话框)后需要用户进一步交互,则单击的元素几乎总是在语义上是按钮。只要有可能,使用适当的语义元素并使用CSS设置样式。这将使您的内容可以使用最广泛的辅助技术。