Почему нельзя использовать CSS display:none

Спрятанные элементы игнорируются программами для чтения текста с экрана.

Слепые пользователи используют программы, которые диктуют содержимое текста на экране. Проблема в том, что программы для чтения текста игнорируют содержимое, которому задано CSS значение display:none;. Контент всё еще находиться в HTML документе, но он рассматривается как будто он не существует.

Как решить данную проблему?

Достаточно разместить элемент вне экрана видимости:

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

Единственный случай где имеет смысл использовать display: none; это когда Вы хотите что б содержимое было скрыто для всех. Если нужно, что б содержимое было скрыто и потом опять появилось, используйте метод описанный выше.

А как же быть с jQuery?

В данной библиотеке hide() делает то же самое: добавляет элементу атрибут style и указывает для свойства display значение none. Тут мы видим, что лучше перенести стили в CSS и ссылаться на них с помощью класса:

CSS

.hide {
position: absolute !important;
top: -9999px !important; 
left: -9999px !important;
}

jQuery

$('.content-area').addClass('hide');