使用图像作为发送按钮,或使用跨度标签来设置每个字母的样式,是否会使残疾访问者感到困惑?

Does using an image for a send button, or span tags to style each letter, confuse visitors with disabilities?

我正在设计我的联系表和博客订阅注册上的发送按钮。 SEND 这个词的每个字母都是不同的颜色。我可以为此使用图像,或者感谢我在此处的另一个线程中收到的帮助,我可以使用按钮而不是输入,并使用 span 和 nth-of-type 标签设置每个字母的样式。

但我不清楚这会如何影响可访问性。我想说清楚,这是一个发送按钮,用于提交他们的联系表单内容或电子邮件地址以进行订阅。

有谁知道这是如何根据可访问性问题呈现的?

按钮总是很好,因为它们看起来可以点击。用户能想出办法是好事。

不要使用不必要的颜色。颜色是用来吸引注意力的,如果你滥用它们,那么什么都不会真正引起注意。

最好的组合是按钮是带有文字的图标。首先引起注意的是图标,必须遵循 "standards"(信封表示邮件,房子表示家庭 link...),颜色也一样。红色错了,绿色ok...

关于可访问性更多的是您在 html 中放置的属性,以便读者可以使用它,或者语音翻译器......例如图像应该有一个 "alt" 标签,描述......

如果 html 是干净的并且符合标准,那么您已经在构建可访问的网络。

http://www.w3.org/WAI/intro/accessibility.php

我推荐(很多人推荐)Steve Krug 的书 "Don't make me thing"(我知道这不在问题范围内)。

button 是这种情况下的正确元素(最好还有 role="submit" )。对每个字母进行不同的着色看起来确实像是一个不确定的用户体验调用;这是一个实用按钮,因此绝对需要清晰易读。

谈到可访问性,请注意:

  • 一些屏幕阅读器(辅助技术)会暂停所有 HTML 标签,包括内联跨度。
  • 如果你这样写你的按钮:

    <button>SEND</button>
    

    屏幕阅读器会将其发音为 "S-E-N-D" - 一次一个字母,就像首字母缩写词一样。您可以通过 CSS.

    来避免这种情况

    HTML:

    <button>Send</button>
    

    CSS:

    button { text-transform: uppercase; }
    

对于可访问性没有特别的影响,除了不同颜色的字母可能会带来不必要的认知挑战:用户可能会问自己这些颜色的含义。但很可能这不是问题。这更像是一个风格问题;它可能看起来很幼稚。

当字母包含在 span 元素中时,某些浏览器可能难以将序列识别为单个单词。但这种可能性微乎其微,这样的浏览器技术低劣,很多页面都会出现问题。

与图片相比,如果图片是具有足够 alt 属性的图片提交按钮,则可访问性没有太大差异。如果您只使用一个 img 元素,并使用 JavaScript 与之关联,那就是另一回事了;那么您将需要关心可访问性属性,如果没有 JavaScript(可能没有充分的理由),该页面将无法工作。