Прежде всего, я просмотрел предыдущий вопрос. но, к сожалению, он, похоже, не предлагал никаких решений (кроме JS, который, я боюсь, не является стартовым)
У меня есть несколько ссылок для пропуска в верхней части моей страницы...
<ul>
<li class="skip-link"><a href="#mainContent" accesskey="S"><span>Skip to main content</span></a></li>
<li class="skip-link"><a href="#main-navigation" accesskey="N"><span>Skip to main navigation</span></a></li>
</ul>
а еще ниже есть...
<div id="mainContent"></div>
который представляет собой пустой div, предназначенный исключительно для использования в качестве точки привязки.
Кажется, все работает нормально, когда ссылка активирована; визуально страница прыгает вниз, и фокус смещается на первую ссылку после #mainContent.
Однако в Chrome (v 12.0.742.91), в то время как страница визуально смещается вниз, фокус не смещается, а это означает, что после активации клавиши доступа повторное нажатие табуляции просто возвращает вас к началу страницы и обратно к ссылкам доступа.
У меня была идентичная проблема с IE, которая была отнесена к известной причуде и была исправлена установка определенной ширины для целевого элемента. Однако, похоже, это не работает для Chrome. Я также попытался добавить элемент с возможностью табуляции в div #mainContent, поместив любой контент в div #mainContent, а также всевозможные варианты float/width/height, и, похоже, ничего не исправить.
У кого-нибудь были подобные проблемы с Chrome или кто-нибудь знает решение?
Заранее спасибо народ
Саймон
Ответ 1 · рейтинг 8 · Knu
Лучшее, что вы можете сделать, пока кто-нибудь не найдет хитрость/взлом, - это отметить эта проблема, которая сменила эту. Ваши товарищи по SO, вероятно, сделают то же самое, потому что им не все равно.
Судя по всему, проблема наконец-то была исправлена.
Ответ 2 · рейтинг 5 · Matthew Johnson
Я знаю, что это старый вопрос, но я наконец наткнулся на него сегодня после нескольких часов поиска. Я до сих пор не нашел для этого решения, отличного от js, и, хотя проблема помечена как исправленная в Chrome, она по-прежнему ведет себя так же. За неимением другого я использовал jQuery. Вместо встроенного скрипта я использовал ненавязчивый прослушиватель событий.
HTML:
<div id="skiptocontent">
<a href="#mainContent" id="skipper">Skip to Main Content</a>
</div>
<div id="mainContent"></div>
JQuery:
$(document).ready(function () {
$("#skipper").click(function () {
$('#mainContent').attr('tabIndex', -1).focus();
});
});
Я также скрываю ссылку, если она не получает фокус с клавиатуры. Таким образом, только пользователи клавиатуры и программы чтения с экрана узнают, что ссылка существует. Используя CSS3, вы можете гарантировать, что он станет ненадолго видимым, если пользователь быстро пропустит его.
CSS:
#skiptocontent a {
position: absolute;
top:-40px;
left:0px;
background:transparent;
-webkit-transition: top 1s ease-out, background 1s linear;
transition: top 1s ease-out, background 1s linear;
z-index: 100
}
#skiptocontent a:focus {
position:absolute;
left:0px;
top:0px;
background:#F1B82D;
-webkit-transition: top .1s ease-in, background .5s linear;
transition: top .1s ease-in, background .5s linear
}
Для демонстрации вы можете просмотреть скрипту. Если у кого-то есть способ использовать javascript, я хотел бы его услышать. Я не думаю, что решение действительно доступно, если оно требует js.
