Markup from hell

A collection of bad practices in HTML, copied from real websites.

1. #2 div with button role

   submitted on Oct 17, 2019 by Schepp
   skip code sample

   <div tabindex="-1">
     <div role="button">
       <svg width="28" height="24"> … </svg>
     </div>
   </div>

   → Details and tips on how to fix the diabolic code of #2.

2. #1 button disguised as a link

   submitted on Oct 17, 2019 by Manuel
   skip code sample

   <button role="link" title="Name of website" tabindex="0">
     <img alt="Name of website" src="logo.jpg" title="Name of website">
   </button>

   → Details and tips on how to fix the diabolic code of #1.