сфокусированная ссылка скрывается за нижним колонтитулом с фиксированной позицией при использовании клавиши TAB для продолжения - PullRequest
Новая
       26

сфокусированная ссылка скрывается за нижним колонтитулом с фиксированной позицией при использовании клавиши TAB для продолжения

0 голосов
/ 08 января 2019

Я столкнулся с деталями, касающимися доступности, не в отношении программ чтения с экрана и слепых людей, а в отношении чисто навигации с помощью клавиатуры.

Редактировать / Дополнить: Я хотел бы подчеркнуть часть моего вопроса, которая вообще не рассматривалась в двух ответах, которые я получил до сих пор: Интересно, можно ли считать ситуацию, приведенную в моем фрагменте, доступной, т.е. соответствовать стандартам доступности?

У меня есть список сообщений в блоге на странице, заголовки которых связаны с реальными (одиночными) сообщениями - стандартное поведение блога. Теперь, когда кто-то использует клавишу 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>

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Так как верхний и нижний колонтитулы исправлены, почему бы не использовать конфигурацию, в которой прокрутка перемещается в область содержимого вместо всего документа: 

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 голосов
/ 08 января 2019

Одно из возможных решений: сделать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...