CODEWITHSUNDEEP
javascripthtmlcssaccessibility
InsidersByte
InsidersByte

Reputation: 96

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

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

Image

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;
}

Upvotes: 1

Views: 1381

Answers (3)

aardrian
aardrian

Reputation: 9029

You say you want a button for accessibility and screen readers, but that doesn't say anything about the action. Quick tips, which address accessibility on their own:

  • If the user is going to a new page (or anchor on the page), use a <a href>.
  • If the user is changing a state on the current page, use <button>.
  • If the user is submitting a form, use <input type="submit"> or <button type="submit">

Now, which of these do you want to do?

Without all necessary context, maybe try <label>? It is natively clickable, can be added into the tab order, and works with screen readers. With a little tweaking it can do what you want.

I forked your pen as an example: http://codepen.io/aardrian/pen/QNXobR

I added the following styles (you can class label and/or use any styles you want, I just matched it to the default link styles):

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

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

Adjust your <button> to have brief text that is overridden by the <label> (aria-labelledby), and make sure the label gets into the tab order (tabindex="0"):

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

Visually it does what you want and when you run it through a screen reader the <button> is usable thanks to the <label>.

No matter what, I implore you not to use <span> nor <div>.

Upvotes: 0

Adam
Adam

Reputation: 18855

The problem is that an HTML button is always a rectangle box, so if you have a multiple lines text, it cannot show like an anchor would do.

Now, a simple solution is to use a span element with a tabindex and role attributes:

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

The tabindex enables the keyboard navigation and role=button will inform the assistive technology that this span is in fact a button.

Of course you will have to care about other WCAG considerations for links like:

Upvotes: 0

slugolicious
slugolicious

Reputation: 17563

A button is essentially a rectangular object. You can't really wrap a rectangular object the way text normally wraps in a paragraph. If it's too long to fit on the same line, it has to start on a new line in order to draw a bounding box around it.

You said you wanted to use a button "because of accessibility and screen readers". Can you expand on that?

Both buttons and anchor tags have built in accessibility features. You can tab to both with the keyboard (provided your <a> has an href) and you can select both with the ENTER key (in addition to selecting with the SPACE key for buttons).

You should probably consider what the purpose of your "chunk of text" is. As a screen reader user, if I hear "link" when I navigate to an anchor tag, I'm generally expecting to be taken to a different page if I select it. (The screen reader will tell me if it's an in-page link). That's what links are for - taking you to another page.

If I hear 'button', then I'm expecting some action to be performed. It might be adding to a cart or displaying a dialog so that I can select a file.

So the paradigm of a link vs a button is different. What do you want your "chunk of text" to do? Behave like a link or a button? Ignore how it's displayed. That can be fixed with CSS.

As Paulie_D said, you can use role='button' or role='link' in combination with a <span> to get accessibility. Just make sure you also have tabindex=0 so that the user can TAB to the <span> and handle events for click, space, and enter.

Upvotes: 3

Related Questions