Button

Question

I have a chunk of text and I want to render a button the same way a anchor is displayed. The reason I want to use a button is because of accessibility and screen readers. The problem is that the button wraps to a new line and the anchor does not. I want the button to behave like the anchor.

this will be used inside a React app

http://codepen.io/anon/pen/BKedyL

HTML

Button

<span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet fermentum ante, 
  <button id="button" class="buttonLink">a gravida quam. Duis nisi mi, tincidunt facilisis venenatis vitae, pulvinar sed arcu. Ut eu felis dignissim metus dapibus mollis. Curabitur ac sapien scelerisque, vehicula nulla nec, posuere enim. Duis mollis ex nec pulvinar volutpat. Vivamus </button>
  ornare lorem in leo tincidunt cursus. Quisque ornare elit vel ante porta, ac dignissim massa sagittis. Aenean rutrum nulla nunc, a rhoncus enim sodales sit amet. Integer accumsan justo dolor, sed dapibus erat faucibus et.
</span>

<h1>Anchor</h1>

<span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet fermentum ante, <a href="#" id="anchor" class="linkButton">a gravida quam. Duis nisi mi, tincidunt facilisis venenatis vitae, pulvinar sed arcu. Ut eu felis dignissim metus dapibus mollis. Curabitur ac sapien scelerisque, vehicula nulla nec, posuere enim. Duis mollis ex nec pulvinar volutpat. Vivamus</a ornare lorem in leo tincidunt cursus. Quisque ornare elit vel ante porta, ac dignissim massa sagittis. Aenean rutrum nulla nunc, a rhoncus enim sodales sit amet. Integer accumsan justo dolor, sed dapibus erat faucibus et.
</span>

CSS

.buttonLink {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font: 1em "Lato";
  text-decoration: underline;
  color: blue;
  display: inline;
}

.buttonLink:focus {
  outline: none;
}

.linkButton {
  color: blue;
}

Answer 1

按钮本质上是一个矩形对象。你不能像文本通常在段落中包装那样包装矩形对象。如果它太长而无法放在同一条线上，它必须从一条新线开始，以便在它周围绘制一个边界框。

你说你想使用按钮＆＃34;因为可访问性和屏幕阅读器＆＃34;。你能扩展一下吗？

按钮和锚标签都内置了辅助功能。您可以使用键盘选择两者（如果<a>有href），您可以使用ENTER键选择两者（除了使用按钮的SPACE键选择）。

你应该考虑一下你的文本块的目的是什么＆＃34;是。作为屏幕阅读器用户，如果我听到＆＃34;链接＆＃34;当我导航到锚标签时，如果我选择它，我通常希望被带到不同的页面。（屏幕阅读器会告诉我它是否是一个页内链接）。那是什么链接 - 带您到另一页。

如果我听到＆＃39;按钮＆＃39;，那么我希望能够执行某些操作。它可能是添加到购物车或显示对话框，以便我可以选择一个文件。

因此，链接与按钮的范例是不同的。你想要什么＆＃34;大块的文字＆＃34;去做？表现得像一个链接或按钮？忽略它的显示方式。这可以用CSS修复。

正如Paulie_D所说，您可以将role='button'或role='link'与<span>结合使用以获得辅助功能。只需确保您还有tabindex=0，以便用户可以选择<span>并处理点击，空格和输入事件。

Answer 2

问题是HTML button总是一个矩形框，所以如果你有多行文字，它就不会像锚一样显示。

现在，一个简单的解决方案是使用span和tabindex属性的role元素：

<span role="button" tabindex="0">My button</span>

tabindex启用键盘导航，role=button将通知辅助技术此跨度实际上是一个按钮。

当然，您必须关注其他WCAG注意事项，例如：

G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
提供描述控件目的的链接文本
C15: Using CSS to change the presentation of a user interface component when it receives focus（因为您没有使用默认组件）

Answer 3

你说你想要一个可访问性和屏幕阅读器的按钮，但这并没有说明这个动作。快速提示，可自行解决可访问性问题：

如果用户要访问新页面（或页面上的锚点），请使用<a href>。
如果用户正在更改当前页面上的状态，请使用<button>。
如果用户正在提交表单，请使用<input type="submit">或<button type="submit">

现在，您想要做哪些？

如果没有所有必要的背景，也许可以试试<label>？它本机可点击，可以添加到Tab键顺序，并与屏幕阅读器一起使用。通过一些调整，它可以做你想要的。

我把你的笔分开作为例子：http://codepen.io/aardrian/pen/QNXobR

我添加了以下样式（您可以分类label和/或使用您想要的任何样式，我只是将其与默认链接样式匹配）：

.buttonLink {
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  line-height: 0;
}

label {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

调整<button>以获得被<label>（aria-labelledby）覆盖的简短文字，并确保标签符合标签顺序（tabindex="0"）：

<button id="button" class="buttonLink" aria-labelledby="buttonLabel">button text</button>
<label for="button" tabindex="0" id="buttonLabel">very long text</label>

视觉上它可以满足您的需求，当您通过屏幕阅读器运行时，<button>可以使用<label>。

无论如何，我恳请您不要使用<span>或<div>。

Treat a button the same as a link when inside a span

Button

3 个答案: