Сегодня я нашел хороший пример того, как классно сделать весь блок div кликабельным.
Есть ли способ сделать этот эффект совместимым с программой чтения с экрана и пользователем клавиатуры и даже, по крайней мере, доступным, если JS отключен (с помощью наведения css).
По крайней мере, ссылка должна быть где-то показана, если JS отключен.
В этом примере используется js для вставки ссылки привязки при наведении курсора, и он полностью недоступен с клавиатуры или для тех, у кого отключен js. Чтобы сделать его доступным, поместите якорные ссылки в разметку, затем используйте javascript, чтобы добавить класс, который будет перемещать их за пределы экрана (отрицательные text-indent или display: block; position: absolute; margin-left: -9000px; (не используйте display: none;). Таким образом, все пользователи смогут перемещаться по ссылкам. И, пожалуйста, используйте что-то кроме "Подробнее" для связанного текста. Пользователи программ чтения с экрана часто используют экранный буфер для просмотра списка всех ссылок на странице. Нет ничего более бесполезного, чем 12 ссылок, которые все говорят "Подробнее" (используйте, возможно, "Подробнее о <article topic>).
Если вы хотите, чтобы какой-то HTML отображался, когда Javascript отключен, вас может заинтересовать тег <noscript>.
Для получения дополнительной информации: тег HTML <noscript>
