iPhone VoiceOver не произносит текст для стрелки - PullRequest
Новая
       60

iPhone VoiceOver не произносит текст для стрелки

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

У меня есть эта проверенная страница http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (которую можно отредактировать здесь https://jsfiddle.net/wt3dqm8b/1/).

К сожалению, когда вы посещаете ее с iPhone с включенным VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON),вы слышите «Ссылка одна ссылка» для ссылки «Ссылка одна» (что хорошо), но НЕ слышите ту же ссылку «Ссылка одна», когда нажимаете на стрелку «>». Только «ссылка» произносится как при нажатии на ссылкустрелка «>». Было опробовано много способов, но никто не работал нормально.

Как изменить HTML-код таким образом, чтобы при нажатии на кнопку «> ссылка на одну ссылку» произносился тот же текст"стрелка?

Вот код с страницы выше:

HTML: 

<ul  class="master secondary">
  <li  aria-expanded="false" class="main" tabindex="0" aria-label="Link One">
   <a  tabindex="-1" href="https://google.com">
   <span ><span > Link One </span></span>
   <i  class="fa fa-angle-right"></i>
   </a>
  </li>
  <li  aria-expanded="false" class="main" tabindex="0" aria-label="Link Two">
   <a  tabindex="-1" href="https://google.com">
   <span ><span > Link Two </span></span>
   <i  class="fa fa-angle-right"></i>
   </a>
  </li>
</ul>

и CSS:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin-top: 60px;
}


.master {
  margin: 0;
  padding: 0;
  list-style: none;
}

.master .main {
  border-bottom: 1px solid #ccc;
}

.master .main>a {
  position: relative;
  display: block;
  padding: 20px;
  color: green; 
  text-decoration: none;
  background-position: 15px;
}

.master .main > a .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -8px;
}

PS Конечно, я не хочу существенно изменять HTML-код, чтобы:

  • значительных изменений для программы чтения с экрана JAWS не ожидается,
  • такое же поведение сохраняется для используемой клавиатуры - все элементы навигации фокусируются только один раз, когда используется клавиша Tab, никаких изменений в этом поведенииr пожалуйста.

ОБНОВЛЕНИЕ: Даже в коде ниже 

<ul  class="master secondary">
  <li aria-expanded="false" class="main">
   <a  target="_self" href="https://google.com">
   <span ><span > Link One </span></span>
   <i class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></i>
   </a>
  </li>
  <li aria-expanded="false" class="main">
   <a target="_self" href="https://google.com">
   <span ><span > Link Two </span></span>
   <span class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></span>
   </a>
  </li>
</ul>

Спасибо.

1 Ответ

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

Я запустил ваш обновленный код с вашим CSS и классом "sr-only" из Что такое sr-only в Bootstrap 3? , и он отлично работал с VoiceOver. На моем iPhone установлена ​​iOS 12.1.2.

Я слышал "этот текст не произносится ..." при переходе по ссылке.

Все, что содержится в , рассматривалось как одна «остановка табуляции» в VoiceOver, поэтому я не мог провести пальцем по стрелке «>». Такое поведение я бы ожидал. Вы должны , а не сделать стрелку ">" отдельной ссылкой или символом табуляции, если "ссылка одна" имеет тот же пункт назначения (href), что и стрелка ">".

...