Пропустить ссылки, не работающие в Chrome

Прежде всего, я просмотрел предыдущий вопрос. но, к сожалению, он, похоже, не предлагал никаких решений (кроме 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 или кто-нибудь знает решение?

Заранее спасибо народ

Саймон


google-chrome html css accessibility cross-browser
person Simon Hudson    schedule 08.06.2011    source источник

Ответы (4)


arrow_upward
8
arrow_downward

Лучшее, что вы можете сделать, пока кто-нибудь не найдет хитрость/взлом, — это отметить эта проблема, которая сменила эту. Ваши товарищи по SO, вероятно, сделают то же самое, потому что им не все равно.

Судя по всему, проблема наконец-то была исправлена.

person Knu    schedule 09.06.2011
comment
не могу поверить, что это все еще проблема! - person Damon; 31.01.2012
comment
#25 в этой проблеме Chromium предполагает, что это наконец исправлено, но я не знаю, как подтвердить. Я попробовал это в последней версии Chrome Canary, но там все еще не работает. - person Craig Hyatt; 19.07.2013
comment
Это, видимо, все еще проблема. Я нашел обходной путь js, но на самом деле он недоступен, если для работы требуется js, ИМХО. - person Matthew Johnson; 06.11.2013

arrow_upward
5
arrow_downward

Я знаю, что это старый вопрос, но я наконец наткнулся на него сегодня после нескольких часов поиска. Я до сих пор не нашел для этого решения, отличного от 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.

person Matthew Johnson    schedule 05.11.2013

arrow_upward
1
arrow_downward

Я тоже столкнулся с этой проблемой, и единственный способ исправить это — с помощью JavaScript (и jQuery).

Итак, по ссылке я использовал onClick $('#mainContent').attr('tabIndex',-1).focus();

«Добавление значения tabindex -1 к div делает этот div программно фокусируемым, что позволяет ему получать фокус при использовании метода .focus()». -- Через: http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/

См. скрипт: http://jsfiddle.net/PEDaS/1/

person Treb    schedule 04.10.2012
comment
разве tabindex 0 не должен делать его фокусируемым, а -1 делает наоборот? - person blacksunshineCoding; 04.12.2015

arrow_upward
0
arrow_downward

Взял приведенные выше фрагменты и попытался обобщить их для таргетинга на любую потенциальную ссылку для пропуска.

jQuery('[href^="#"][href!="#"]').click(function() {
  jQuery(jQuery(this).attr('href')).attr('tabIndex', -1).focus();
});
person hefox    schedule 19.09.2014