<h2>Basic alternative descriptions using the &lt;img&gt; tag</h2>
<div class="grid">
  <div class="grid-item">
    <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">
    <h3>Pattern 1<br><code>&lt;img&gt;</code> + <code>alt="[words]"</code></h3>
  </div>
  <div class="grid-item">
    <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">
    <h3>Pattern 2<br><code>&lt;img&gt;</code> + <code>role="img"</code> + <code>alt="[words]"</code></h3>
  </div>
  <div class="grid-item">
    <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">
    <h3>Pattern 3<br><code>&lt;img&gt;</code> + <code>role="img"</code> + <code>aria-label="[words]"</code></h3>
  </div>
  <div class="grid-item">
    <p id="caption1" class="visually-hidden">What does the fox say?</p>
    <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">
    <h3>Pattern 4<br><code>&lt;img&gt;</code> + <code>role="img"</code> + <code>aria-labelledby="[ID]"</code></h3>
  </div>
</div>
<hr><br>
<h2>Basic alternative descriptions using the &lt;svg&gt; tag</h2>
<div class="grid">
  <div class="grid-item">
    <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
      <title>What does the fox say?</title>
      <g>
        <g>
          <path class="lightblue" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
          <path class="darkblue" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
        </g>
        <g>
          <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
          <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
          <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
          <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
          <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
        </g>
      </g>
    </svg>
    <h3>Pattern 5<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code></h3>
  </div>
  <div class="grid-item">
    <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
      <text class="visually-hidden" font-size="0">What does the fox say?</text>
      <g>
        <g>
          <path class="lightpink" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
          <path class="darkpink" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
        </g>
        <g>
          <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
          <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
          <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
          <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
          <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
        </g>
      </g>
    </svg>
    <h3>Pattern 6<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;text&gt;</code></h3>
  </div>
  <div class="grid-item">
    <svg role="img" aria-describedby="fox7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
      <title id="fox7">What does the fox say?</title>
      <g>
        <g>
          <path class="lightturq" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
          <path class="darkturq" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
        </g>
        <g>
          <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
          <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
          <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
          <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
          <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
        </g>
      </g>
    </svg>

    <h3>Pattern 7<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code> + <code>aria-describedby="[ID]"</code></h3>
  </div>
  <div class="grid-item">
    <svg role="img" aria-labelledby="fox8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
      <title id="fox8">What does the fox say?</title>
      <g>
        <g>
          <path class="lightgreen" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
          <path class="darkgreen" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
        </g>
        <g>
          <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
          <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
          <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
          <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
          <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
        </g>
      </g>
    </svg>
    <h3>Pattern 8<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code> + <code>aria-labelledby="[ID]"</code></h3>
  </div>
</div>
<div>
  <hr><br>
  <h2>Basic alternative descriptions using the &lt;img&gt; tag</h2>
  <div class="grid">
    <div class="grid-item">
      <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
        <title>What does the fox say?</title>
        <text class="visually-hidden" font-size="0">Will we ever know?</text>
        <g>
          <g>
            <path class="lightpurple" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
            <path class="darkpurple" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
          </g>
          <g>
            <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
            <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
            <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
            <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
            <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
          </g>
        </g>
      </svg>
      <h3>Pattern 9<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code> + <code>&lt;text&gt;</code></h3>
    </div>
    <div class="grid-item">
      <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
        <title>What does the fox say?</title>
        <desc>Will we ever know?</desc>
        <g>
          <g>
            <path class="lightorchid" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
            <path class="darkorchid" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
          </g>
          <g>
            <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
            <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
            <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
            <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
            <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
          </g>
        </g>
      </svg>
      <h3>Pattern 10<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code> + <code>&lt;desc&gt;</code></h3>
    </div>
    <div class="grid-item">
      <svg role="img" aria-labelledby="fox11 description11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
        <title id="fox11">What does the fox say?</title>
        <desc id="description11">Will we ever know?</desc>
        <g>
          <g>
            <path class="lightorange" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
            <path class="darkorange" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
          </g>
          <g>
            <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
            <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
            <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
            <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
            <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
          </g>
        </g>
      </svg>
      <h3>Pattern 11<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code> + <code>&lt;desc&gt;</code> + <code>aria-labelledby="[ID]"</code></h3>
    </div>
    <div class="grid-item">
      <svg role="img" aria-describedby="fox12 description12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
        <title id="fox12">What does the fox say?</title>
        <desc id="description12">Will we ever know?</desc>
        <g>
          <g>
            <path class="lightred" d="M32,7C18.193,7,7,18.193,7,32h50C57,18.193,45.807,7,32,7z" />
            <path class="darkred" d="M32,57c13.807,0,25-11.193,25-25H7C7,45.807,18.193,57,32,57z" />
          </g>
          <g>
            <path d="M6.042,49.75c2.211-1.501,1.958-4.125,4.478-7.303c-0.349,1.246-1.519,4.114-1.519,4.114    c2.547-0.129,5.045-0.908,7.174-2.301c0.503-0.329,0.956,0.375,0.606,0.785c-1.161,1.361-2.29,2.585-3.515,3.814    c1.825-0.005,4.181-0.25,4.181-0.25C12.384,51.405,4.091,51.073,6.042,49.75z M42.187,13.864c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.438,3.562,1.688,4.312,1.5,6c-0.166,1.496-1.462,2.451-1.406,6.565c0.012,0.882,1.065,1.323,1.698,0.708    c0.722-0.701,1.443-1.631,1.993-2.4c0.448-0.626,1.4-0.541,1.724,0.157c0.111,0.239,0.499,1.245,0.762,1.844    c0.411,0.938,1.804,0.727,1.912-0.291c0.171-1.609,0.031-3.957-0.495-5.271c-1.125-2.812,1.562-3.875,1.75-7    c0.141-2.35-0.319-4.347-0.556-5.192c-0.077-0.275-0.038-0.564,0.114-0.806c0.404-0.644,1.179-2.015,1.317-3.252    c0.148-1.328-1.529-2.91-2.297-3.547c-0.21-0.174-0.218-0.442-0.297-0.703C46.607,7.244,42.396,6.208,42.187,13.864z" style="fill: #EFEAE0;" />
            <path d="M47.187,12.812c-0.969-2.094-2.062-2.938-2.062-2.938L45.02,8.72c0.491-0.269,0.339-0.744-0.081-0.947    c-0.748-0.361-1.493,0.79-0.685,0.999l0.027,1.197c0,0-1.125,1.906-1.312,3.281s-0.209,6.172,2.344,5.938    C48.031,18.938,48.156,14.906,47.187,12.812z" style="fill: #4B322A;" />
            <path d="M47.722,15.925c-1.336-0.891-3.392-0.886-4.717,0.273c0.222,1.589,0.836,3.125,2.307,2.99    C46.932,19.039,47.626,17.548,47.722,15.925z" style="fill: #644638;" />
            <path d="M16.175,44.259c-2.129,1.393-4.627,2.172-7.174,2.301c0,0,1.171-2.868,1.519-4.114    c3.06-3.858,4.915-3.346,7.105-5.03c2.167-1.667,3-6.667,6.167-9c2.675-1.971,5.699-0.853,6.575-0.457    c2.396-1.993,5.787-2.326,6.851-2.381c0.265-1.478,0.805-3.608,1.867-5.315c-0.685-0.857-1.307-2.367,0.209-4.345l-0.878-3.839    c-0.144-0.82,0.719-1.447,1.455-1.055l2.432,1.294c-0.057,0.474-0.101,0.979-0.116,1.547c-0.006,0.224-0.074,0.446-0.216,0.62    c-0.48,0.586-1.581,1.938-1.533,3.141c0.063,1.562,0.813,2.062,1,2.375c0.188,0.312-1.312,2.438-0.875,6    c0.309,2.518,1.269,4.42,1.221,4.294c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356    c-1.554-0.816-3.812-0.912-5.294,0.151c-2.206,1.583-3.597,3.722-4.849,6.117c-1.326,2.536-1.99,8.878-5.005,9.972l1.618-1.826    C17.131,44.634,16.678,43.93,16.175,44.259z M52.266,15.719l0.453-4.313c0.079-0.901-0.982-1.435-1.659-0.836l-2.729,2.434    c0.046,0.195,0.089,0.38,0.248,0.511c0.768,0.637,2.444,2.218,2.297,3.547c-0.137,1.237-0.912,2.607-1.317,3.252    c-0.152,0.242-0.191,0.531-0.114,0.806c0.237,0.846,0.697,2.842,0.556,5.192c-0.188,3.125-2.875,4.188-1.75,7    c0.526,1.314,0.665,3.663,0.495,5.271c-0.087,0.824-1.01,1.107-1.579,0.692C47.083,39.88,47,40.795,47,42.041V59h1    c0.552,0,1-0.448,1-1V41c2.186-2.825,1.751-6.369,1.156-8.504c2.442-3.573,2.237-8.993,1.084-11.29    C52.018,20.378,53.481,18.298,52.266,15.719z M41.532,45.377C41.205,45.55,41,45.89,41,46.261V59h1c0.552,0,1-0.448,1-1V44.599    L41.532,45.377z" style="fill: #FF786E;" />
            <path d="M46.072,37.031c-0.324-0.698-1.276-0.783-1.724-0.157c-0.55,0.768-1.271,1.698-1.993,2.4    c-0.632,0.615-1.686,0.173-1.698-0.708c-0.056-4.114,1.24-5.07,1.406-6.565c0.071-0.635-0.062-1.137-0.279-1.706    c-1.564,0.588-3.116,1.347-4.758,1.691c-2.374,0.497-4.615-0.253-6.714-1.356c-1.554-0.816-3.812-0.912-5.294,0.151    c-2.206,1.583-3.597,3.722-4.849,6.117c-1.323,2.53-1.995,8.88-5.005,9.972c-0.618,0.674-1.244,1.332-1.897,1.988    c1.848-0.005,4.172-0.25,4.172-0.25c0.997-0.55,1.876-1.215,2.52-2.024c3.826-4.803,2.011-15.247,8.374-15.727    c-0.154,0.419-0.269,0.876-0.349,1.364c-1.031,0.953-2.321,3.433-2.358,9.904c0,1.823,0.977,5.356,1.203,6.151    c0.03,0.107,0.022,0.211-0.026,0.311c0,0-1.302,2.844-1.302,4.35c0,1.445,1.04,5.664,1.04,5.664    c0.053,0.212,0.243,0.357,0.461,0.357h1.83c0.29,0,0.513-0.258,0.47-0.545l-0.779-5.206c0.014-0.094,0.027-0.182,0.041-0.275    l4.298-9.016c0.21-0.44,0.866-0.318,0.904,0.167l0.208,2.638c0.017,0.218-0.035,0.432-0.153,0.615c0,0-2.32,3.721-2.32,5.288    c0,1.612,2.606,6.124,2.606,6.124c0.088,0.133,0.235,0.209,0.394,0.209h2.527c0.356,0,0.586-0.378,0.423-0.694l-2.622-5.491    c-0.086-0.166-0.066-0.367,0.049-0.513L39,47.041V58c0,0.552,0.448,1,1,1h1V46.261c0-0.37,0.205-0.71,0.532-0.884L45,43.538V58    c0,0.552,0.448,1,1,1h1V42.041c0-1.247,0.083-2.161,0.166-2.766C46.76,38.98,46.3,37.523,46.072,37.031z" style="fill: #BE5652;" />
          </g>
        </g>
      </svg>
      <h3>Pattern 12<br><code>&lt;svg&gt;</code> + <code>role="img"</code> + <code>&lt;title&gt;</code> + <code>&lt;desc&gt;</code> + <code>aria-describedby="[ID]"</code></h3>
    </div>
  </div>
  <p>Image source: <a href="https://commons.wikimedia.org/wiki/File:Toicon-icon-fandom-howl.svg" target="_blank">Wikimedia Commons</a></p>
  <p>Earworm source: <a href="https://youtu.be/jofNR_WkoCE" target="_blank">Ylvis - The Fox (What Does The Fox Say?)</a></p>

body {
  font-family: "Open Sans", sans-serif;
  margin: 2rem;
}

h4 {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  color: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 90%;
  margin: 0 auto;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  text-align: center;
}

code {
  background-color: #444444;
  color: #ffffff;
  border-radius: 0.3rem;
  padding: 4px 5px 5px;
  white-space: nowrap;
  line-height: 2;
}

.fas {
  text-align: center;
  width: 100%;
  font-size: 30px;
}

p {
  clear: both;
}

table {
  border-collapse: collapse;
  margin: 1rem;
}

col {
  border: 1px solid #444444;
}

tr {
  border-bottom: 1px solid #444444;
}

thead th {
  padding: 1rem;
  background-color: #444444;
  border-right: 1px solid #ffffff;
  color: #ffffff;
  min-width: 80px;
}

thead th:last-child {
  border-right: none;
}

td,
tbody th {
  padding: 1rem;
  text-align: left;
  vertical-align: top;
}

.odd-row {
  background: #c1c1c1;
}

.even-row {
  background: #eeeeee;
}

.go {
  background: #008000;
  color: #ffffff;
}

.caution {
  background: #f6d100;
}

.stop {
  background: #d40000;
  color: #ffffff;
}

/* Lightbulb colors */
.fox {
  width: 100%;
}

.lightblue {
  fill: CornflowerBlue;
}

.darkblue {
  fill: RoyalBlue;
}

.lightgreen {
  fill: LightGreen;
}

.darkgreen {
  fill: MediumSeaGreen;
}

.lightpurple {
  fill: MediumSlateBlue;
}

.darkpurple {
  fill: DarkSlateBlue;
}

.lightpink {
  fill: LightPink;
}

.darkpink {
  fill: PaleVioletRed;
}

.lightturq {
  fill: PaleTurquoise;
}

.darkturq {
  fill: MediumTurquoise;
}

.lightorchid {
  fill: Orchid;
}

.darkorchid {
  fill: MediumOrchid;
}

.lightorange {
  fill: LightSalmon;
}

.darkorange {
  fill: Tomato;
}

.lightred {
  fill: Crimson;
}

.darkred {
  fill: DarkRed;
}