Question

我详细讨论了可访问性，不是关于屏幕阅读器和盲人，而是关于纯键盘导航。

编辑/添加：我想强调我的问题的一部分，直到现在我得到的两个答案中都没有解决：我想知道代码段中给出的情况是否可以被认为是可以访问的，即可以符合无障碍标准？

我在页面上有一个博客文章列表，其标题链接到实际（单个）文章-标准博客行为。现在，当有人使用TAB键导航并从一个链接/博客标题转到下一个标题时，页面将始终自动滚动以在页面的可见部分内显示焦点链接。

但是，如果我有固定的页脚（页眉也是如此），则在某些时候，焦点链接将被页脚隐藏。我不是在谈论页面的最后几行！请尝试以下代码段：单击一个可见链接以将其聚焦，然后使用TAB键跳至下一个，然后跳转至下一个，依此类推：有时，聚焦的链接将位于页脚后面。页面向下滚动后返回（使用Shift + Tab）时相同：在某些时候，焦点链接位于固定标题的后面。

在这种情况下，设置顶部和底部填充或边距无济于事...

我知道可以使用箭头键手动向下滚动，但是首先我想知道是否仍然可以完全向下滚动，除此之外，我只是想知道是否有什么可以使浏览器将焦点对准目标元素进入元素所在的可见部分？

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>

Answer 1

一种可能的解决方案：缩小 html ...

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>

Answer 2

由于页眉和页脚都固定，为什么不使用将滚动条移动到内容区域而不是整个文档的配置：

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>

使用TAB进行操作时，隐藏在固定位置页脚后面的焦点链接

2 个答案: