Link and Button examples

buttons.md

<!-- yes! -->
<button type="button">Show messages</button>
<button type="button">Show messages <img src="/icons/messages.png" alt="" /></button>
<button type="button"><img src="/icons/messages.png" alt="Show messages" /></button>
<button type="button" disabled aria-describedby="id-of-a-paragraph-explaining-why">Show messages</button>

<!-- please no -->
<button type="button"><img src="/icons/messages.png" /></button> <!-- no accessible name -->
<button type="button"><div>Show messages</div></button> <!-- divs aren't valid inside buttons -->

links.md

<!-- yes! -->
<a href="/profile">View your profile</a>
<a href="/profile">Profile <img src="/icons/profile.png" alt="" /></a>
<a href="/profile" aria-label="View your Profile"><img src="/icons/profile" alt="" /></a>

<!-- please no -->
<a href="#">Click here</a> <!-- link goes nowhere. should be a button? -->
<a href="#" title="Click here">Click here</a> <!-- title is redundant -->
<a href="/profile" role="link">Click here</a> <!-- role="link" is redundant -->
<a href="/profile" tabindex="0">Click here</a> <!-- tabindex="0" is redundant -->
<span role="link" tabindex="0" href="/profile">click here</a> <!-- faking a link instead of using a link -->