Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают:

.sr-only {
позиция: абсолютная;
left: -10000px;
ширина: 1px;
высота: 1шт;
top: auto;
переполнение: скрыто;
}

• display: none; или visibility: hidden; скрывает контент для всех, включая пользователей с экрана
• Нулевые значения для размеров пикселей, такие как width: 0px; height: 0px; удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его

Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс sr-only , но правила CSS еще не заполнены. Дайте position абсолютное значение, left значение a -10000px, а также width и height как значения 1px.