Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

Question

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements but after some research (Why can't a <button> element contain a <div>?) + (https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element), it appears that nesting divs inside buttons is not the correct approach. Another option could be making each day a clickable <div>, and manually adding appropriate attributes like tabIndex and role for better accessibility compliance.

What would be the best html tag or method to create a clickable area with the ability to house multiple <div> elements within it?

javascript html css reactjs accessibility

Answer 1

Answer №1

It is perfectly acceptable to include <span> elements within a <button> tag in HTML.

<button>
  <span>You can have multiple spans inside the button</span>
  <span>and it will still be valid HTML</span>
  <span>Great for custom styling!</span>
</button>

Using spans allows you to style them however you like without any issues.

However: If you find yourself needing multiple containers to create a clickable area (as might happen with a calendar design), it may suggest that your design needs reevaluation.

You could utilize CSS :before and :after pseudo-selectors to add complexity if necessary, but without seeing the design it's hard to give specific advice.

If unsure, consider adding an aria-label to the <button> element and potentially using aria-hidden="true" on inner items depending on the content.

<button aria-label="Describe function of the button for screen readers and assistive tech">
  <!-- This step may not always be needed, use based on content -->
  <span aria-hidden="true">Three Different Spans</span>
  <span aria-hidden="true">But Perfectly Valid</span>
  <span aria-hidden="true">HTML!</span>
</button>

Answer 2

It is perfectly acceptable to include <span> elements within a <button> tag in HTML.

<button>
  <span>You can have multiple spans inside the button</span>
  <span>and it will still be valid HTML</span>
  <span>Great for custom styling!</span>
</button>

Using spans allows you to style them however you like without any issues.

However: If you find yourself needing multiple containers to create a clickable area (as might happen with a calendar design), it may suggest that your design needs reevaluation.

You could utilize CSS :before and :after pseudo-selectors to add complexity if necessary, but without seeing the design it's hard to give specific advice.

If unsure, consider adding an aria-label to the <button> element and potentially using aria-hidden="true" on inner items depending on the content.

<button aria-label="Describe function of the button for screen readers and assistive tech">
  <!-- This step may not always be needed, use based on content -->
  <span aria-hidden="true">Three Different Spans</span>
  <span aria-hidden="true">But Perfectly Valid</span>
  <span aria-hidden="true">HTML!</span>
</button>

Answer 3

Answer №2

To create a clickable div, you can enclose it within an anchor tag:

<a href="#"><div>Click here to explore</div></a>

Answer 4

To create a clickable div, you can enclose it within an anchor tag:

<a href="#"><div>Click here to explore</div></a>

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

Answer №1

Answer №2

Similar questions

Using Angular to display exclusively the selected items from a list of checkboxes

What is the best way to capture source code and store it in a text file?

What is the best way to allow a number to be editable when clicked on in a React application

Set up the configuration for express to access an external API through proxy.conf.json while in production mode

Avoiding Unnecessary Side Effects in React Testing Library to Prevent Act Warning

What steps should I take to resolve the issue with the error message: "BREAKING CHANGE: webpack < 5 previously included polyfills for node.js core modules by default"?

Having difficulty using the forEach() method to loop through the array generated by my API

The model in the Schema has not been registered, unlike other models from the same source that have been successfully registered

Guide to centering a list on a webpage using Bootstrap 3

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

"Encountered a Parsing Error: function keyword was an unexpected token in an Async Function using a more recent version of Node

Using Responsive Design with Bootstrap and Media Queries

Customize the Underline Color in MaterialUI Select Component

Keeping datetimepicker current when a date is chosen - a guide

After the click event, the variable in the Angular .ts file does not get refreshed

The ng-controller (dropdown menu) is functioning properly when tested locally and on JSFiddle, however, it is not working on

Guide to utilizing font awesome 5 after installation through NPM

Auth0 encountering issues retrieving ID token and user metadata

Invoke a Node.js script from a Spring Boot application to pass a Java object to the script. The script will modify the object and then return it back to the originating class

Mastering the art of extracting elements from an HTML Dygraph