Making images focusable

devtools-console-dom-interactions/index.html

@@ -105,7 +105,7 @@ <h2 id="section-1">Section 1</h2>
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
       </ul>
-      <img src="img/alpaca.jpg" alt="An alpaca">
+      <img src="img/alpaca.jpg" alt="An alpaca" tabindex="0">
     </section>
 
     <section>
@@ -120,7 +120,7 @@ <h2 id="section-2">Section 2</h2>
             href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction">Link
             9</a></li>
       </ul>
-      <img src="img/cat.jpg" alt="A cat">
+      <img src="img/cat.jpg" alt="A cat" tabindex="0">
     </section>
 
     <section>
@@ -136,7 +136,7 @@ <h2 id="section-3">Section 3</h2>
         <li><a href="#">Link 14</a></li>
         <li><a href="#">Link 15</a></li>
       </ul>
-      <img src="img/deer.jpg" alt="A deer">
+      <img src="img/deer.jpg" alt="A deer" tabindex="0">
     </section>
 
     <section>
@@ -150,7 +150,7 @@ <h2 id="section-4">Section 4</h2>
             16</a></li>
         <li><a href="#">Link 17</a></li>
       </ul>
-      <img src="img/horse.jpg" alt="A horse">
+      <img src="img/horse.jpg" alt="A horse" tabindex="0">
     </section>
 
     <section>
@@ -167,7 +167,7 @@ <h2 id="section-5">Section 5</h2>
         <li><a href="#">Link 23</a></li>
         <li><a href="#">Link 24</a></li>
       </ul>
-      <img src="img/sheep.jpg" alt="A sheep">
+      <img src="img/sheep.jpg" alt="A sheep" tabindex="0">
     </section>
 
     <section>
@@ -183,7 +183,7 @@ <h2 id="section-6">Section 6</h2>
         <li><a href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/">Link 27</a></li>
         <li><a href="https://microsoft.com">Link 28</a></li>
       </ul>
-      <img src="img/socke.jpg" alt="A socke">
+      <img src="img/socke.jpg" alt="A socke" tabindex="0">
     </section>
   </main>