У меня есть ссылка, которую я хочу показать посетителям с зрением, но спрятать от посетителей с помощью AT-устройств чтения с экрана. (Это, конечно, не идеально).
Это противоположность обычной проблемы (с известным решением) сокрытия контента от визуальных посетителей (например, переход по ссылке на контент).
Пример:
При нажатии на ссылку "Читать дальше" текст внутри строки расширяется.
и наоборот, нажатие на ссылку меньше чтения сворачивает ее снова.
Эта функция свернутого / расширяющегося текста полезна только для посетителей с зрением, поле зрения которых будет принимать дополнительный текст до того, как они доберутся до него (и в этом примере заменяет следующий FAQ, выталкивая его за пределы экрана).
Посетителю со средством чтения с экрана следует вместо этого предоставить полный текст, поскольку он может выбрать переход к следующему блоку, и он не должен столкнуться с ложной ссылкой для чтения, которая (а) не ведет на страницу, и (б) просто дает им то, что они в любом случае собирались услышать от программы чтения с экрана.
Как это сделать в HTML5?
Ответ 2 · Arkana
Вы можете попробовать поместить ссылку в псевдоэлемент. Это вызывает еще одну проблему: вы не можете щелкнуть псевдоэлемент, потому что он не является частью 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 или других программ чтения с экрана.
