4

I ran into a detail concerning accessibility, not in regard to screenreaders and blind users, but in regard to pure keyboard navigation.

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?

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.

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.

Setting a top and bottom padding or margin doesn't help in this case...

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?

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;
}
<header>This is a fixed header</header>
<ul>
  <li><a href="#">link to blogpost 1</a></li>
  <li><a href="#">link to blogpost 2</a></li>
  <li><a href="#">link to blogpost 3</a></li>
  <li><a href="#">link to blogpost 4</a></li>
  <li><a href="#">link to blogpost 5</a></li>
  <li><a href="#">link to blogpost 6</a></li>
  <li><a href="#">link to blogpost 7</a></li>
  <li><a href="#">link to blogpost 8</a></li>
  <li><a href="#">link to blogpost 9</a></li>
  <li><a href="#">link to blogpost 10</a></li>
  <li><a href="#">link to blogpost 11</a></li>
  <li><a href="#">link to blogpost 12</a></li>
  <li><a href="#">link to blogpost 13</a></li>
  <li><a href="#">link to blogpost 14</a></li>
  <li><a href="#">link to blogpost 15</a></li>
  <li><a href="#">link to blogpost 16</a></li>
  <li><a href="#">link to blogpost 17</a></li>
  <li><a href="#">link to blogpost 18</a></li>
  <li><a href="#">link to blogpost 19</a></li>
  <li><a href="#">link to blogpost 20</a></li>
  <li><a href="#">link to blogpost 21</a></li>
  <li><a href="#">link to blogpost 22</a></li>
  <li><a href="#">link to blogpost 23</a></li>
  <li><a href="#">link to blogpost 24</a></li>
</ul>
<footer>
  <p>This is a fixed footer<br>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.</footer>
Johannes
  • 64,305
  • 18
  • 73
  • 130

2 Answers2

1

One possible solution: make html smaller ...

html {
height: calc(100% - 120px);
margin-top: 40px;
overflow: hidden;
position: relative;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
ul {
  adding: 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;
}
<header>This is a fixed header</header>
<ul>
  <li><a href="#">link to blogpost 1</a></li>
  <li><a href="#">link to blogpost 2</a></li>
  <li><a href="#">link to blogpost 3</a></li>
  <li><a href="#">link to blogpost 4</a></li>
  <li><a href="#">link to blogpost 5</a></li>
  <li><a href="#">link to blogpost 6</a></li>
  <li><a href="#">link to blogpost 7</a></li>
  <li><a href="#">link to blogpost 8</a></li>
  <li><a href="#">link to blogpost 9</a></li>
  <li><a href="#">link to blogpost 10</a></li>
  <li><a href="#">link to blogpost 11</a></li>
  <li><a href="#">link to blogpost 12</a></li>
  <li><a href="#">link to blogpost 13</a></li>
  <li><a href="#">link to blogpost 14</a></li>
  <li><a href="#">link to blogpost 15</a></li>
  <li><a href="#">link to blogpost 16</a></li>
  <li><a href="#">link to blogpost 17</a></li>
  <li><a href="#">link to blogpost 18</a></li>
  <li><a href="#">link to blogpost 19</a></li>
  <li><a href="#">link to blogpost 20</a></li>
  <li><a href="#">link to blogpost 21</a></li>
  <li><a href="#">link to blogpost 22</a></li>
  <li><a href="#">link to blogpost 23</a></li>
  <li><a href="#">link to blogpost 24</a></li>
</ul>
<footer>
  <p>This is a fixed footer<br>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.</footer>
vals
  • 61,425
  • 11
  • 89
  • 138
  • that's a good idea! I wonder if all browsers will accept that without causing some other trouble, and if animation scripts etc. could still be used in a similar way as without that special setting (for example animating the height of the header when scrolling down would require animating height and top margin of the 'html' element simultaneously). – Johannes Jan 08 '19 at 20:00
1

Since both header and footer are fixed why not using a configuration where the scroll is moved to the content area instead of the whole document:

html,
body {
  margin: 0;
  height: 100%;
}
body {
 display:flex;
 flex-direction:column;
}
ul {
  padding:0;
  margin:0;
  flex:1;
  overflow:auto;
}
li {
  font-size: 24px;
  padding: 10px;
}

header {
  height: 40px;
  background: rgba(33, 233, 158, 1);
  text-align: center;
}

footer {
  margin-top:auto;
  height: 80px;
  background: rgba(33, 233, 158, 0.8);
  text-align: center;
}

footer p {
  padding: 0 60px;
}

a:focus {
  background: red;
}
<header>This is a fixed header</header>
<ul>
  <li><a href="#">link to blogpost 1</a></li>
  <li><a href="#">link to blogpost 2</a></li>
  <li><a href="#">link to blogpost 3</a></li>
  <li><a href="#">link to blogpost 4</a></li>
  <li><a href="#">link to blogpost 5</a></li>
  <li><a href="#">link to blogpost 6</a></li>
  <li><a href="#">link to blogpost 7</a></li>
  <li><a href="#">link to blogpost 8</a></li>
  <li><a href="#">link to blogpost 9</a></li>
  <li><a href="#">link to blogpost 10</a></li>
  <li><a href="#">link to blogpost 11</a></li>
  <li><a href="#">link to blogpost 12</a></li>
  <li><a href="#">link to blogpost 13</a></li>
  <li><a href="#">link to blogpost 14</a></li>
  <li><a href="#">link to blogpost 15</a></li>
  <li><a href="#">link to blogpost 16</a></li>
  <li><a href="#">link to blogpost 17</a></li>
  <li><a href="#">link to blogpost 18</a></li>
  <li><a href="#">link to blogpost 19</a></li>
  <li><a href="#">link to blogpost 20</a></li>
  <li><a href="#">link to blogpost 21</a></li>
  <li><a href="#">link to blogpost 22</a></li>
  <li><a href="#">link to blogpost 23</a></li>
  <li><a href="#">link to blogpost 24</a></li>
</ul>
<footer>
  <p>This is a fixed footer<br>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.</footer>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I am aware of that possibility, but first of all, the real situation is more complex (the header is fixed, but among other things its height is animated/getting lower when scrolling down), second, I am searching for a more general solution (this is a situation that happens often) and third (first part of my question) I am really wondering if the possibility to aditionally scroll using the arrow keys classifies a situation like this as being "officially" accessible. Probably it is, but I am wondering. – Johannes Jan 09 '19 at 00:58