У меня есть простой текст, который обновляется в действии, и я хочу, чтобы он был объявлен программой чтения с экрана. Но я не хочу, чтобы этот текст был виден на веб-странице. Я пробовал display: none и visibility: hidden, но кажется, что они не доступны программам чтения с экрана. Я нашел способ сделать эту работу - абсолютное позиционирование элемента с отрицательным значением 999999, которое сделает его вне экрана и скрытым от веб-страницы. Я на самом деле не фанат этого решения. Есть ли более элегантный способ добиться этого?

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}
2
Donut 30 Май 2020 в 21:37

3 ответа

Лучший ответ

Я сталкивался с этой проблемой в прошлом. Bootstrap имеет этот замечательный класс sr-only, который на самом деле скрывает контент на веб-странице, но доступен для программ чтения с экрана. Вы можете проверить эту ссылку.

Более того, если вы не используете загрузчик, вы можете просто реализовать класс самостоятельно в своем коде.

.aria-invisible {
      border: 0; 
      clip: rect(0 0 0 0); 
      height: 1px;  
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
<span class="aria-invisible">5 selections have been made. </span>

Надеюсь, это поможет.

0
ShellZero 30 Май 2020 в 18:46

Лучшее решение для класса начальной загрузки "sr-only".

Существует множество проблем с классом Bootstrap "sr-only".

  1. Прежде всего вы увидите из этого обсуждения, что отрицательное поле может вызвать проблемы на VoiceOver.

  2. Во-вторых, вы должны учитывать слова, заключающие по одной на строку, в качестве программ чтения с экрана. не читать разрывы строк

  3. Наконец, clip устарела.

Чтобы исправить точку 1, просто не добавляйте отрицательную маржу.

Чтобы исправить пункт 2, добавьте white-space: no-wrap, чтобы слова не заканчивались «по одному на строку» и не приводили к тому, что слова смешивались.

Чтобы исправить точку 3, мы добавляем clip-path: inset(50%), так как это обрезает квадрат 0px, мы сохраняем clip, так как в настоящий момент это имеет большой охват, clip-path используется для будущего решения вашего решения.

Ниже вы найдете гораздо более надежный класс, но пока я не нашел комбо для чтения с экрана / браузера, которое не работает, как ожидается.

У меня есть этот класс на нескольких различных тестируемых форумах, но пока хорошо, но если кто-то может найти проблему с этим, пожалуйста, дайте мне знать, так как я буду отправлять его везде.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<p>visible text <span class="visually-hidden">hidden text</span></p>
1
Community 20 Июн 2020 в 09:12

Использование атрибутов aria-label - это способ (пример ниже)

Есть ли более элегантный способ добиться этого?

Не скрывайте элемент. Да. Я не отвечаю на ваш вопрос, но я решаю проблему.

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

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

Если вы считаете, что информация важна для слепых, то она, безусловно, для них И для других людей.

Теперь, вместо длинного текста, это может быть небольшой счетчик с соответствующей маркировкой арии:

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>
0
Adam 31 Май 2020 в 08:32