<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Accessible image example</title>
    <style>
      img {
        display: block;
        margin: 3em;
      }
    </style>
  </head>
  <body>

    <h1>Images</h1>

    <img src="dinosaur.png">

    <img src="dinosaur.png"
         alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">

    <img src="dinosaur.png"
         alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
         title="The Mozilla red dinosaur">

    <img src="dinosaur.png" aria-labelledby="dino-label">

    <p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

  </body>
</html>
