By using semantic HTML, you can take advantage of accessibility features that are already built into browsers. Just because you can make a div be a button doesn't mean you should.
- Button vs. checkbox toggle?
- Use a checkbox when the user needs to take another action to submit the result (i.e. in a form).
- Use a button when clicking the element immediately triggers the action.
- Source: https://stevenklambert.com/writing/button-vs-checkbox-toggle/
- Details / summary vs. custom accordion?
- Details / summary doesn't work well with all browsers, so a custom accordion might be better.
- Source: https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/
- Text callout boxes
- Use the
<aside>element for callout boxes in HTML. - Source: https://www.stylemanual.gov.au/format-writing-and-structure/structure/text-boxes-and-callouts
- Use the