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

Question

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

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

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

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

6

css3 accessibility wcag keyboard-navigation

Источник

user5641669 08 янв '19 в 19:39

3 ответа

Другие вопросы по тегам css3 accessibility wcag keyboard-navigation

user8620333 08 янв '19 в 22:58 2019-01-08 22:58 · Answer 1 · 2019-01-08 22:58

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

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>

user1926369 08 янв '19 в 19:50 2019-01-08 19:50 · Answer 2 · 2019-01-08 19:50

Одно из возможных решений: сделать 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>

user3187614 09 ноя '23 в 10:17 2023-11-09 10:17 · Answer 3 · 2023-11-09 10:17

Чтобы решить эту проблему, вы можете использовать простой CSS. Eстьсвойство, которое также применяется, когда браузер автоматически прокручивает элемент до элемента, находящегося в фокусе.

1

Источник

user3187614 09 ноя '23 в 10:17