Как остановить программу чтения с экрана для чтения всех тегов диапазона ошибок, у которых есть роль = предупреждение?

Я использую программу чтения с экрана Chrome Vox для своего мобильного приложения. Этот ридер читает все теги диапазона ошибок, которые имеют role="alert", я хочу, чтобы скринридер читал только первую ошибку (role='alert'). Например, мы можем увидеть страницу регистрации учетной записи Gmail. Как я могу достичь этого сценария?


javascript html jquery wai-aria jaws-screen-reader
person Vishwakant    schedule 20.04.2016    source источник
comment
Вы ищете селектор attr? api.jquery.com/attribute-equals-selector, то есть $( [role= 'тревога'] ) ?   -  person Ismail Farooq    schedule 22.04.2016
comment
вы должны добавить атрибут role='alert' во время выполнения для необходимых элементов.   -  person Uday Sravan K    schedule 08.03.2017
comment
A11y читает только первый элемент role='alert', хотя существует много элементов div. A11y читает только последний элемент role='alert', хотя существует много элементов span. Поэтому вы можете попробовать изменить span на div, чтобы он читал только первый элемент.   -  person Uday Sravan K    schedule 08.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

Если вы ставите промежутки рядом с каждым вводом при ошибке, у них не должно быть роли = предупреждение, а скорее идентификаторы. Тогда входные данные хотели бы иметь aria-describedby= этот идентификатор. Возможно, вы захотите иметь предупреждение о сообщении, в котором говорится, что были ошибки, и либо сосредоточиться на нем, либо сосредоточиться на первом вводе, связанном с ошибкой, выбрать и т. д.

Если вам нужно окно с ошибкой в ​​верхней части формы и вам нужна сводка, вы можете сосредоточиться там на ошибке и составить список с якорями (текст, объясняющий ошибку), указывающий на входные данные. Для этого не нужна роль оповещения.

Если вы просто хотите предупредить пользователей об ошибках, вы можете поместить фразу, говорящую об этом, в контейнер с role=alert и aria-live=assertive, а затем сосредоточиться на первой ошибке ввода.

person Nick Goodrum    schedule 02.05.2016
comment
спасибо, Ник, я пытаюсь использовать атрибут aria-describeby. Он работает нормально, как я и требовал. Но если мы перейдем к другому элементу управления вводом в форме и снова вернемся к тому же вводу, который имеет aria-describedby, он не будет прочитан во второй раз. - person Vishwakant; 10.05.2016
comment
Я хотел бы отметить, что ChromeVox не очень распространенная программа чтения с экрана для настоящих конечных пользователей. Было отмечено, что он не так хорош в отношении функций для aria и т. д. webaim.org/ обсуждение/mail_thread?thread=5758 webaim.org/projects/screenreadersurvey6 0,3% респондентов из текущих опросов от webaim отметили использование ChromeVox.on Desktop и не указаны для мобильных устройств. В настоящее время основные претенденты на мобильные устройства: VoiceOver 56,7% TalkBack для Android 17,8% Nuance Talks 4,5% - person Nick Goodrum; 14.05.2016

arrow_upward
0
arrow_downward

Мне пришлось решить ту же проблему, и лучшим решением было вообще не использовать role=alert для сообщений об ошибках. Вместо этого используйте aria-describedby для элементов, которые можно проверить, и укажите его на диапазон, содержащий сообщение об ошибке.

Это гарантирует, что сообщение об ошибке для элемента в фокусе будет прочитано.

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

Пример:

      <div> 
         <input type="text" 
                    name="username" 
                    id="username" 
                    aria-describedby="username_error"
                    aria-invalid="true"/> 
          <span class="error" id="username_error">Username is unknown</span> 
      </div>

Еще несколько советов:

  • Получите подсказку программе чтения с экрана о том, что элемент содержит ошибки, установив атрибут aria-invalid=true
  • ARIA 1.1 определяет атрибут aria-errormessage, который можно использовать вместо aria-describedby, как только он будет широко принят
person proactive-e    schedule 23.07.2020
comment
aria-describedby будет работать, когда программа чтения с экрана будет фокусироваться на этом элементе. Экранный ридер обычно используется слепыми или дальтониками, и его цель - предупреждать о загрузке экрана, чтобы пользователь мог узнать, в чем ошибка с минимальными усилиями, иначе пользователь должен просмотреть все элементы, а затем пользователь найдет элемент ошибки. - person Vishwakant; 25.07.2020