У меня есть эта протестированная страница http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (который можно отредактировать здесь https://jsfiddle.net/wt3dqm8b/1/).
К сожалению, когда вы заходите на него с iPhone с включенным VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON
), вы слышите «Link One link» для ссылки «Link One» (что хорошо), но НЕ слышите то же «Link One link» при нажатии на стрелке ">". Только «ссылка» произносится при нажатии на стрелку «>». Было перепробовано много способов, но ни у кого не вышло нормально.
Как изменить html-код, чтобы тот же текст «Link One link» произносился при нажатии на стрелку «>»?
Вот код со страницы выше:
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;
}
P.S. Конечно, я не хочу существенно менять html-код, чтобы:
- для программы чтения с экрана JAWS существенных изменений не ожидается,
- такое же поведение сохраняется и для используемой клавиатуры - все элементы навигации фокусируются только один раз при использовании клавиши Tab, пожалуйста, никаких изменений в этом поведении.
ОБНОВЛЕНИЕ: даже в приведенном ниже коде
<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>
Спасибо.
tabindex
наli
, если внутри него есть только фокусируемый элемент (a
с атрибутомhref
)? Почему уli
естьaria-label
, особенно тот, который дублирует текст ссылки? Зачем нужны ссылкиtarget="_self"
? Грубо говоря, все это выглядит лишней чушью. - person Tsundoku   schedule 02.01.2019