якорь с href не фокусируется в Safari даже при всех доступных настройках доступа / клавиатуры - PullRequest
Новая
       13

якорь с href не фокусируется в Safari даже при всех доступных настройках доступа / клавиатуры

0 голосов
/ 12 октября 2018

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

  1. Safari -> Настройки -> Дополнительно -> установлен флажок «Нажмите вкладку, чтобы выделить каждый элемент наВеб-страница »
  2. Системные настройки Mac -> Клавиатура -> Ярлыки ->, а затем нажали« Все элементы управления »внизу

Я также попытался добавить: hoverпсевдокласс в дополнение к: focus, как предлагается здесь: Доступность Пропустить Nav - Перейти к содержимому (проблема в Safari)

При вставке по содержимому ссылка в пропуска не отображается даже в Safariс этими изменениями.Он работает последовательно в Chrome.Вот также кодовая ручка с вопросом: https://codepen.io/a-gheorghe-the-vuer/pen/vVJmZw

.card {
  background-color: yellow;
  left: -1000px;
  top: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
}

.anchor-skip:focus .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.anchor-skip:hover .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.anchor-skip:active .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.button {
  z-index: 1
}

.check {
  height: 30px;
  width: 100px;
  border: 1px solid black;
 }
  
        <a
        class="anchor-skip"
        tabindex="0"
        href="#main"
      >
        <div class="card" tabindex="-1">
          <div class="button">
            <span> Skip to main content</span>   
          </div>
        </div>                
      </a>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>    
      <div id="main" class="check"> hello </div>
 <div>

Любая помощь будет оценена.Спасибо.

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

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

Другая проблема - ваша разметка.Safari не любит пустые ссылки.Даже если у вас есть тег div внутри тега привязки, Safari не распознает его как допустимую ссылку и поэтому игнорирует его.Чтобы исправить эту проблему, вам нужно упростить разметку до чего-то вроде этого: 

<a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

Кроме того, при использовании семантически правильной разметки ваша ссылка не будет нуждаться в tabindex.При использовании клавиши «tab» для навигации, когда ссылка находится в фокусе, установите параметр отображения «block», чтобы сделать его видимым.

Удачи.

0 голосов
/ 16 октября 2018

Для перехода к основному содержанию ссылка:

  • Предоставление визуально скрытой ссылки на якорь
  • Когда якорь получает фокус, отображать ту же ссылку
  • , когда пользовательнажмите на ту же ссылку, затем переместите фокус на целевой элемент с помощью функции javascript focus ().
...