Современный вариант

[firefoxic]

Современный он по сравнению с этими древними батареями свойств. Но на самом деле он поддерживается начиная с IE9.

.visually-hidden {
	position: absolute;
	transform: scale(0);
}

В отличие от остальных вариантов тут:

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

Ещё более современный вариант (но поддержка уже тоже хорошая — 2 года в хроме, 3 года в сафари, в лисе вообще давно уже):

.visually-hidden {
	position: absolute;
	scale: 0;
}

Преимущество — этот скейл не перебьётся случайным трансформом с другой функцией от соседнего класса.

[nikolai-shabalin]

Спасибо. Буду исследовать.

Кажется это не должно сработать для JAWS. Если длинный текст схлопнуть вот так, то текст начинает вытягиваться в колонку по одному слову. В этом случае JAWS решает прочесть только первое слово, поэтому в "батарейном варианте" есть white-space: nowrap;

[firefoxic]

Я же говорю, это не аффектит размеры элемента, они остаются прежними, а слова не переносятся, то есть новрапать нечего. Просто отрисовка его визуала уменьшена. Если вместо нуля поставить 0.2 — видно, что этот самый визуал в 5 раз уменьшенный даже расположен по центру самого элемента, который никуда не девается, но и не перекрывает контент под ним (только визуальная часть перекрывает), к примеру ссылки нормально прокликиваются.

В демке вывожу размеры скрытого элемента.

Пока что мне никто не принёс ни одной проблемы с этим сниппетом из тех, кому давал на пощупать ассистивными технологиями. Но да, это всё были не масштабные исследования экспертами, а просто пользователи своими обычными способами щупали.