.sr-onlyце назва класу, спеціально використовується для читачів екранів. Ви можете використовувати будь-яке ім’я класу, але .sr-onlyдосить часто використовується. Якщо ви не переймаєтесь розвитком з урахуванням відповідності, його можна буде видалити. Це не вплине на користувальницький інтерфейс, якщо його видалити, оскільки CSS для цього класу не видно для браузерів настільних та мобільних пристроїв.
Здається, тут бракує деякої інформації про використання .sr-onlyдля пояснення її мети та використання для читачів екрану. Перш за все, дуже важливо завжди пам’ятати користувачів з обмеженими можливостями. Порушення - мета 508 відповідності: https://www.section508.gov/ , і чудово, що завантажувальна програма враховує це. Однак використання .sr-onlyне лише того, що потрібно враховувати для дотримання 508. У вас є використання кольору, розміру шрифтів, доступність через навігацію, дескриптори, використання арії та багато іншого.
А щодо .sr-only- що насправді робить CSS? Існує кілька дещо різних варіантів CSS, які використовуються для .sr-only. Одне з небагатьох я використовую нижче:
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
Наведений вище CSS приховує вміст у настільних та мобільних браузерах, обгорнутих цим класом, але його бачить читач екранів, як JAWS: http://www.freedomscientist.com/Products/Blindness/JAWS . Приклад розмітки:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Крім того, якщо елемент DOM має ширину і висоту 0, елемент DOM не бачить. Ось чому вищезгаданий CSS використовує width: 1px; height: 1px;. Використовуючи display: noneта встановивши свій CSS на height: 0та width: 0, елемент DOM не сприймається, і тому є проблематичним. Наведений вище CSS width: 1px; height: 1px;- це не все, що ви робите, щоб зробити вміст непомітним для настільних та мобільних браузерів (без цього overflow: hiddenваш вміст все одно відображатиметься на екрані) та видимий читачам екрану. Приховування вмісту з настільних і мобільних браузерів здійснюється за допомогою додавання зміщення width: 1pxта height: 1pxпопереднього згадування за допомогою:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Нарешті, щоб мати дуже гарне уявлення про те, що читач екрана бачить і передає його обмеженому користувачеві, вимкніть стилізацію сторінки для вашого браузера. Для Firefox ви можете це зробити, перейшовши до:
View > Page Style > No Style
Я сподіваюся, що надана тут інформація корисна для когось, крім інших відповідей.