<main>
<!-- Just a button with text content -->
<button>
  Publish post
</button>

<!-- Nested tags inside -->
<button>
  Publish 
  <span><em>p<strong>o</strong></em>st</span>
</button>

<!-- Some content hidden - but only for accessibility -->
<button>
  Publish 
  <span aria-hidden="true">new</span> 
  post
</button>

<!-- Label provided on parent element, ignoring content -->
<button aria-label="Publish post">
  Tell the world!
</button>

<!-- Label provided by child node -->
<button aria-labelledby="child-label">
  <span id="child-label">Publish post</span>
   now
</button>

<!-- A button with both a direct label and another element as label
where the latter takes precedence
Note that this even works with a hidden (or aria-hidden) label element -->
<span id="span-label" hidden>
  Publish post
</span>
<button aria-label="Make public" aria-labelledby="span-label">
  Click me
</button>

<!-- Image with alt text -->
<button>
  Publish
  <img src="https://dummyimage.com/32x16/fff/000&text=post" alt="post">
</button>

<!-- Emojis can be made accessible too - but remember the role="img" -->
<button>
  Publish 
  <span aria-label="post" class="emoji" role="img">✉️</span>
</button>

<!-- Image with empty alt is ignored -->
<button>
  <img src="https://dummyimage.com/16x16/fff/000&text=⇨" alt="">
  Publish post
</button>

<!-- A combination of two child elements labelled in different ways -->
<span id="some-post" hidden>
  post
</span>
<button>
  <span aria-label="Publish">
    Submit
  </span> 
  <span aria-labelledby="some-post">
    item
  </span>
</button>

<!-- SVG text is ignored -->
<button>
  Publish post 
  <svg viewbox="0 0 20 10">
    <text x="2" y="8" fill="currentColor" >(now)</text>
  </svg>
</button>

<!-- SVG title is respected though -->
<button>
  Publish 
  <svg viewbox="0 0 10 10">
    <title>post</title>
    <rect x="2" y="2" width="6" height="6" rx="1" fill="currentColor" />
  </svg>
</button>

<!-- But aria-label takes precedence over SVG title -->
<button>
  Publish
  <svg aria-label="post" viewbox="0 0 10 10">
    <title>item</title>
    <rect x="2" y="2" width="6" height="6" rx="1" fill="chocolate" />
  </svg>
</button>

<!-- Inputs can be referenced from a label -->
<label for="input" class="visually-hidden">
  post
</label>
<button>
  Publish
  <input id="input" type="text" disabled value="item" />
</button>

<!-- But a hidden label is ignored (unlike an element referenced via aria-labelledby) -->
<label for="extra-input" hidden>
  (extra)
</label>
<button>
  Publish post
  <input id="extra-input" type="text" disabled value="(extra)" />
</button>
</main>