关于alt标签的非常繁琐的辅助功能问题

时间:2010-09-02 14:46:24

标签: html accessibility

对于符合WCAG 2.0标准的网站,需要为图像添加alt标签。

当谈到像公司徽标这样的东西时。如果alt标签只是公司的名称,或者公司名称后跟“Logo”,我认为前者更有意义但是如果有一个明确的最佳实践我想知道!

激动人心的问题呃?

7 个答案:

答案 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设置样式。这将使您的内容可以使用最广泛的辅助技术。