Как скрыть ссылку из программы чтения с экрана?

У меня есть ссылка, которую я хочу показать посетителям с зрением, но спрятать от посетителей с помощью AT-устройств чтения с экрана. (Это, конечно, не идеально).

Это противоположность обычной проблемы (с известным решением) сокрытия контента от визуальных посетителей (например, переход по ссылке на контент).

Пример:

поле с текстом и ссылкой для получения дополнительной информации

При нажатии на ссылку «Читать дальше» текст внутри строки расширяется.

то же поле, на этот раз со всем текстом

и наоборот, нажатие на ссылку меньше чтения сворачивает ее снова.

Эта функция свернутого / расширяющегося текста полезна только для посетителей с зрением, поле зрения которых будет принимать дополнительный текст до того, как они доберутся до него (и в этом примере заменяет следующий FAQ, выталкивая его за пределы экрана).

Посетителю со средством чтения с экрана следует вместо этого предоставить полный текст, поскольку он может выбрать переход к следующему блоку, и он не должен столкнуться с ложной ссылкой для чтения, которая (а) не ведет на страницу, и (б) просто дает им то, что они в любом случае собирались услышать от программы чтения с экрана.

Как это сделать в HTML5?


html accessibility screen-readers
person Erics    schedule 23.11.2014    source источник
comment
Screen-reader === blind user - упрощенное предположение. Слабовидящие пользователи (и другие) также могут использовать программу чтения с экрана, все еще видя то, что на экране. Здесь это заставит их слышать текст, не видя его на экране (и осознавая это).   -  person FelipeAls    schedule 24.11.2014
comment
Исключения есть (почти) всегда ;-)   -  person Erics    schedule 26.11.2014
comment
@FelipeAls, они используют его для чтения экрана в целом или только выбранных частей? Используют ли они функцию навигации с помощью программы чтения с экрана (например, переход к следующему параграфу / ссылке / заголовку / разделу)?   -  person Erics    schedule 26.11.2014

Ответы (2)


arrow_upward
2
arrow_downward

Используйте aria-hidden для содержания:

<p aria-hidden="true">Screen readers will not read this!</p>
person Praveen Kumar Purushothaman    schedule 23.11.2014
comment
Aria-hidden отлично работает с обычным текстом (как указано выше), но может иметь некоторые проблемы при использовании со ссылками (или блоками, содержащими ссылки); программы чтения с экрана, такие как JAWS, NVDA и VoiceOver (настольный ПК), по-прежнему позволяют пользователю программы чтения с экрана переходить по ссылкам, но при этом либо остаются безмолвными при переходе на вкладки пользователя, либо, в случае JAWS, повторяют предыдущую нескрытую ссылку; либо могло сбивать с толку. Удаление ссылок из порядка табуляции с использованием tabindex = -1 также не является хорошим решением для этого, поскольку тогда ссылки не могут использоваться зрячими пользователями клавиатуры. Я не уверен, что здесь есть хорошее решение. - person BrendanMcK; 24.11.2014
comment
Возможно, лучшим решением для наиболее последовательного и наименее запутанного подхода для всех пользователей было бы фактическое скрытие скрытого контента от программ чтения с экрана с помощью aria-hidden = true, чтобы всем пользователям приходилось нажимать кнопку «Подробнее», чтобы продолжить чтение. Это позволит сохранить лаконичность контента для пользователей программ чтения с экрана, как и для визуальных пользователей, а также обеспечит единообразие восприятия для пользователей программ чтения с экрана с ограниченным зрением. Однако вы не сможете использовать overflow: hidden, чтобы скрыть контент, и вместо этого вам нужно будет скрыть на основе элементов, которые не всегда дают тот же эффект. - person Scruffy Paws; 27.01.2021
comment
@ScruffyPaws Ага, это правда. - person Praveen Kumar Purushothaman; 27.01.2021

arrow_upward
0
arrow_downward

Вы можете попробовать поместить ссылку в псевдоэлемент. Это вызывает еще одну проблему: вы не можете щелкнуть псевдоэлемент, потому что он не является частью DOM, но можете подделать его с помощью pointer-events.

$("p").click(function () {
		$("span").toggleClass('on');
	}); 
span {display:none; color:red}
p {pointer-events:none}
p:after {content:"Read more"; color:blue; text-decoration:underline; display: block;pointer-events:all}
span.on {display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at erat orci. Praesent non pulvinar nisl, at ultrices lorem. Sed semper ultricies eros, eu aliquet ipsum vehicula nec. Nullam orci justo, dapibus eget elit ac, tincidunt mollis urna. Ut sed felis lobortis, blandit urna non, fermentum arcu. Suspendisse fermentum elit ante. Nulla tincidunt elit vel elementum eleifend. Fusce sed nisi vulputate, aliquam urna congue, egestas arcu.<span> Praesent dignissim, risus in elementum eleifend, velit elit accumsan diam, sit amet vestibulum purus urna quis dui. Proin ut venenatis orci, sit amet ullamcorper tellus. Morbi lorem purus, ornare non convallis nec, venenatis cursus urna. Maecenas cursus, leo vel tincidunt viverra, leo nibh placerat sem, ut molestie tellus ex et nulla. Vivamus eget magna libero.</span></p>

Я использую display:none в качестве примера, конечно, я предполагаю, что у вас есть собственный метод скрытия текста, но не для JAWS или других программ чтения с экрана.

person Arkana    schedule 28.11.2014