使用 TAB 继续操作时，焦点链接隐藏在固定位置页脚后面时的可访问性

问题描述 投票：0回答：3

我遇到了有关可访问性的细节，不是关于屏幕阅读器和盲人用户，而是关于纯键盘导航。

编辑/添加：我想强调我的问题的一部分，到目前为止我得到的两个答案中根本没有解决：我想知道我的代码片段中给出的情况是否可以被认为是可访问的，即符合可访问性标准？

我在页面上有一个博客文章列表，其标题链接到实际（单个）帖子 - 标准博客行为。现在，当有人使用 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>

css accessibility wcag keyboard-navigation
3个回答
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>

1
投票

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

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>

0
投票

您可以简单地使用 CSS 来解决这个问题。当浏览器自动滚动到焦点元素时，也会应用一个 

scroll-margin
属性。

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 {
  scroll-margin: 40px 0 80px; /* header's and footer's height */
  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.
      </p>
    </footer>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.