0

How do you know if something is WCAG appropriate? Like this is an example on Mozilla developer page, and I can not think that it is OK to group Buttons within a P-tag?

<p>
  <button data-message="This is from the first button">Click me!</button>
  <button data-message="This is from the second button">Click me too!</button>
  <button data-message="This is from the third button">And me!</button>
</p>
RMT
  • 942
  • 2
  • 12
  • 32
  • It's probably perfectly fine to do that, as buttons are just tabable bits of page anyway, so their order could be part of the content. It's like having links in a paragraph - the fact it's a button just says something about how to interact with it, otherwise it is just text content. I don't see any more reasonable solutions here, but it depends on your situation here. – somethinghere Mar 29 '23 at 08:28
  • Buttons in a paragraph are perfectly fine. Nothing in WCAG prevents it. – slugolicious Apr 01 '23 at 04:09

1 Answers1

0

It's okay to use a <p> tag as a group if the meaning of your group is the same as the meaning of the <p> tag:

The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

If the meaning is not the same, this could be a violation of 1.3.1 Info and Relationships. Using a <p> tag is better than using non-semantic elements, but you should use the appropriate role when it exists. There's not one good solution for every button group. A few days ago I implemented a tab pattern, and it used a <div role="tablist"> as a parent for my <button role="tab">.

Accessibility is a spectrum and the more you work on adding a meaning (semantics) to your document structure, the easier it will be for assistive technologies to retrieve and display what you meant. There's no better way to validate if something is accessible than conducting tests with disabled users.

Regarding WCAG, it's okay to group buttons within a P-tag, in most cases.

Charpentier Lucas
  • 61
  • 4