<!-- 

  DEMONSTRATING FOCUS

  A quick demonstration of how keyboard focus in HTML.

-->

​

​

<h1>Demonstrating focus</h1>

<p>Most interactive HTML elements will accept keyboard focus by default.</p>

​

<h2>Focusing on elements</h2>

<p>Some of the more common elements that you will use that can have focus:</p>

<ul>

  <li><a href="#">&lt;a&gt; elements</a></li>

  <li><button>&lt;button&gt; elements</button></li>

  <li><input type="text" value="&lt;input&gt; fields"></li>

</ul>

​

<h2>'Making' other elements interactive</h2>

<p>We can make other non-interactive elements - such as images - appear interactive by wrapping them with interactive elements. See the HTML and CSS code for how this &lt;img&gt; element 'appears' interactive</p>

​

<!--

  By wrapping the <img> element in an <a> element we can enable the user to keyboard focus on the <a> which then enables us to style the <img> inside to respond to it. See the CSS for comments on the styling.

-->

<a href="#">

  <img src="https://andrewh.ca/teaches/information_design/lectures/04/Sheep.jpg" height="1325" width="2000" alt="A sheep grazing in a field">

</a>

<p class="further-reading">If you would still like to read more on linking files I recommend looking at <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard">Keyboard Accessibility at MDN</a> and the <a href="https://allyjs.io/data-tables/focusable.html">Focusable elements browser compatibility</a>.</p>