Создание ссылок без доступа к href

Третья сторона script используется на сайте, на котором я работаю, который заменяет несколько экземпляров <a href=""> простым <a>. Ссылки по-прежнему работают благодаря другой части script. Но они больше не рассматриваются как ссылки агентами пользователя.

Я могу восстановить их в режиме навигации с вкладками, добавив tabindex="0", но как я могу сделать вспомогательные технологии объявить их как ссылки или включить их в список всех ссылок на странице?

Добавила бы помощь role="link" вообще?

Я подталкиваю третью сторону, чтобы улучшить их script, чтобы href остался нетронутым. Но в то же время как лучше всего исправить нанесенный ущерб?

Обновление: Я не могу добавить исходный href или что-то вроде href="#" обратно к ссылкам, поскольку сторонний код больше не будет делать то, что он делает. Я надеюсь, что они улучшат свой код, чтобы я мог, но на данный момент мне нужно сделать ссылку доступной без "href".

Ответ 1

Чтобы заставить non-href A вести себя как A (и быть доступным), вам нужно добавить role=link, tabindex=0, стилизовать его, чтобы он выглядел как настоящая ссылка, и добавить код обработчика клавиатуры для лечения Вернитесь как клик. role = "link" недостаточно; экранный редактор может сообщать об этом как ссылку, но без tabindex="0" и соответствующих визуальных стилей, зрячий пользователь не сможет в нее вставить вклад в первую очередь и без обработчика событий клавиатуры, только пользователи мыши смогут щелкните его. (Обычно пользователи экранных прошивок обычно имеют горячие клавиши для имитации щелчка мышью, но у наблюдателей с клавиатурой, как правило, нет этой опции, поэтому не полагайтесь на нее.)

В качестве альтернативы, если (большой, если!) сумасшедший script, который вы используете для этого, вы можете попробовать выполнить shimming "источник щелчка клавиатуры" (моя терминология). А именно внутри оригинала A: так, где у вас есть:

<a>foo</a>

вы замените его на:

<a><a class='shim' href="javascript:void(0)">foo</a></a>

(class='shim' требуется только в том случае, если вам нужно сделать материал, описанный позже...) Вы можете сделать это в jQuery, используя что-то вроде: (заимствование из ответа Джека)

$("a:not([href])").wrapInner("<a class='shim' href='javascript:void(0)'></a>")

Как это работает, так это то, что внутренний добавленный <a ...> имеет href, поэтому он отображается как ссылка и можно использовать tabable. Что еще более важно, если пользователь нажимает на него и нажимает на возврат, поведение по умолчанию A преобразует этот ввод клавиатуры в событие click. Этот конкретный A имеет href, который возвращает undefined/void (0), поэтому фактическая навигация не происходит, но событие click по-прежнему будет пузыриться до оригинала A, который будет действовать на него.

(Это аккуратный шаблон, позволяющий некоторым родительским элементам, часто DIV или подобным, обрабатывать события кликов, добавляя дочерний элемент tabbable A, который может инициировать события щелчка источника с клавиатуры, дает вам интерфейс, который можно использовать как для мыши, так и для клавиатуры.)

Большой оговоркой здесь является то, что предполагается, что ваш оригинальный script не заботится о target события. Если этот script проверяет это, он будет запутан, когда он увидит события щелчка, исходящие из прокладки A, а не оригинала As. Один из способов обойти это - захват и повторное создание события, которое может быть затруднительным, и может работать только в последних браузерах - например, используя что-то вроде:

// 'shim' class used so we can do this:
$("a.shim").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    // the following works if listener using jQuery or is setting onclick directly, otherwise...
    // $(e.target).parent().click();.

    // More general way to raise events; may need alternate for IE<9
    var e2 = document.createEvent("UIEvents");
    e2.initUIEvent("click", true, true, window, 1);
    e.target.parentNode.dispatchEvent(e2)
});

Ответ 2

Пока это не очень красиво, вы можете получить на всех якорях без атрибута href, например, используя jQuery;

$("a:not([href])")

Затем вы можете просто установить атрибут href на этих ссылках на "#", и это должно заставить их работать снова как обычные ссылки.

Здесь работает JSFiddle

Извините, что ответил с помощью jQuery-решения... но выполнение этого в обычном JavaScript было бы намного более подробным.

Другим способом было бы дать якорям роль, а затем выбрать их следующим образом:

$("a[role='link']")