title: accessibility when focused link is hidden behind a fixed-position footer when using TAB to proceed
body: <p>I ran into a detail concerning accessibility, not in regard to screenreaders and blind users, but in regard to pure keyboard navigation.</p>
  <hr />
  <p>Edit / Addition: I would like to emphasize a part of my question which hasn't been addressed at all in the two answers I got until now: I wonder if the situation given in my snippet can be considered accessible, i.e. would conform to accessibility standards?</p>
  <hr />
  <p>I have a list of blog posts on a page whose titles are linked to the actual (single) posts - standard blog behaviour. Now, when someone uses the TAB key to navigate and to proceed from one link/blog header to the next, the page will always scroll automatically to show the focused link inside the visible part of the page.</p>
  <p>But if I have a fixed footer (same goes for header), at some point the focused link will be hidden by the footer. I am NOT talking about the last few lines on the page! Try the snippet below: Click on one of the visible links to focus it, then use the TAB key to jump to the next, then the next and so on: At some point, the focused link will be behind the footer. Same when I go back (using shift + tab) after the page has already scrolled down: At some point the focused link is behind the fixed header.</p>
  <p>Setting a top and bottom padding or margin doesn't help in this case...</p>
  <p>I know it is possible to manually scroll down using the arrow keys, but first of all I wonder if this can still be considered fully accessible, and apart from that I simply wonder if there is anything to make the browser scroll the focused element into the visible part of the element it's in?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    height: 100%;
  }
  ul {
    padding: 40px 0 80px;
  }
  li {
    font-size: 24px;
    padding: 10px;
  }
  
  header {
    position: fixed;
    top: 0;
    height: 40px;
    width: 100%;
    background: rgba(33, 233, 158, 1);
    text-align: center;
  }
  
  footer {
    position: fixed;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: rgba(33, 233, 158, 0.8);
    text-align: center;
  }
  
  footer p {
    padding: 0 60px;
  }
  
  a:focus {
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;This is a fixed header&lt;/header&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 7&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 8&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 9&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 10&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 11&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 13&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 14&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 15&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 16&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 17&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 18&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 19&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 20&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 21&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 22&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 23&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link to blogpost 24&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;footer&gt;
    &lt;p&gt;This is a fixed footer&lt;br&gt;The slight transparency of the background color is only used to show what is behind it - on a real website the background would be a non-transparent color.&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>