Aria-label указывает нарушение DAP для тега ‹option› в раскрывающемся списке

Я провожу тестирование доступности для проекта Angular на работе. Мы используем программу чтения с экрана JAWS. Мы также используем плагин, который выявляет проблемы в пользовательском интерфейсе и сообщает о них как о нарушениях. Я получаю один из раскрывающихся списков, которые я не могу решить. Это Accessible name does not match or contain the visible label text.

У меня есть код для раскрывающегося списка:

<select *ngIf="!viewMode" formControlName="group" placeholder="select" id="group" data-placement="right">
    <option value="" [selected]>Select</option>
    <option attr.aria-label="{{group.title}}" *ngFor="let group of records" 
     [ngValue]="group" data-placement="right" data-toggle="tooltip" title="{{group.title}}">
         {{group.title | slice:0:30}}
         <span *ngIf="group.title.length > 30">...</span>
    </option>
</select>

Мы обрезаем текст group.title и добавляем эллипсы ..., если весь заголовок не соответствует фиксированной ширине раскрывающегося списка. Однако aria-label всегда назначается полное название.

Например. если у нас есть заголовок Psychology, максимальное количество отображаемых символов - 6. Затем в раскрывающемся списке будет отображаться Psycho..., но метка арии по-прежнему будет «Психология.

Моя проблема в том, что whenever the displayed title gets truncated I get a violation as title doesn't match the aria-label. Если я удалю aria-label, программа чтения с экрана будет читать только то, что отображается, поэтому в конечном итоге многоточие будет читать как dot dot dot, чего мы не хотим. Я попытался использовать скрытую метку вместо метки aria внутри тега option, но это не сработало. Может ли кто-нибудь помочь мне с обходным путем?


typescript angular html accessibility jaws-screen-reader
person Amruta    schedule 29.06.2020    source источник
comment
за исключением создания настраиваемого выбора, состоящего полностью из div и aria (ПЛОХАЯ идея), здесь вы можете сделать очень мало, <selects> - это базовые компоненты, которые преобразуют все, что находится в <option>, в простой текст. Также <option> не работает с aria-label, насколько мне известно, очень удивлен, что title работает, но не совсем подходит. Лучший совет, просто оставьте ... - пользователи программ чтения с экрана понимают, что это сокращенное предложение, такое же, как и все остальные, и если зрячим пользователям не нужна вся информация, то также и пользователям, которые полагаются на программы чтения с экрана.   -  person Graham Ritchie    schedule 29.06.2020
comment
Перечитав свой вопрос и заметив, в какой момент вы обрезаете (среднее слово), лучшим советом по доступности будет изменение дизайна вашей формы, чтобы вам не приходилось обрезать. Это не только программы чтения с экрана, но и люди с когнитивными нарушениями, которые не могут установить связь между психикой ... и психологией. Используйте простой <select>, совсем не усекайте, измените дизайн формы, чтобы весь текст был виден.   -  person Graham Ritchie    schedule 29.06.2020
comment
@GrahamRitchie Независимо от того, усечен ли заголовок, полный заголовок отображается во всплывающей подсказке при наведении курсора. Каждый формат пользовательского интерфейса, даже способ отображения раскрывающихся данных, также одобрен UX, поэтому, вероятно, не изменится. По крайней мере, не сразу :( Думаю, сейчас сниму ярлыки и посмотрю, все ли в порядке   -  person Amruta    schedule 29.06.2020
comment
<select>d Боюсь, с ними трудно сделать много. Если вы можете убедить их, для удобства использования важно, чтобы сама форма была переработана, чтобы уменьшить необходимость в усечении, это ваш лучший путь, как я уже сказал, плюс еще проще получить одобрение чего-то подобного, чем пытаться получить стилистический изменение одобрено я бы подумал! Извините за то, что принес плохие новости, но у меня были подобные разговоры о <select> и визуально скрытом тексте / ярлыках в прошлом, редизайн форм всегда был тем путем, которым мы шли из-за ограничений.   -  person Graham Ritchie    schedule 29.06.2020
comment
WCAG SC 2.5.3 (предположительно, соответствующий критерий здесь) предназначен для того, чтобы устройства речевого ввода могли ссылаться на элементы управления по их имени, как в высказывании нажмите «Отмена». Хотя рекомендуется, чтобы доступное имя и видимая метка совпадали, где это возможно, в документах w3 говорится, что во многих (но не во всех) случаях метка и имя совпадают. (курсив мой) ... и ... лучше всего иметь текст метки в начале имени .. Таким образом, они могут отличаться, не нарушая этот SC, если вы будете осторожны, но предложение Грэма лучше.   -  person brennanyoung    schedule 30.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Идеальный ответ

Вам не нужно вручную обрезать метки, потому что это чисто визуальный артефакт, который нужно скопировать при недостаточном пространстве.

В идеале CSS должен уметь обрабатывать этот случай автоматически, чтобы вы просто написали полную метку и не заботились вообще.

CSS для этого существует. Свойство называется text-overflow со значением èllipsis`. Пример здесь

Однако очень часто, даже в последних версиях браузеров, поддержка CSS для <option> очень ограничена и неполна. В некоторых браузерах даже нельзя изменять цвет текста. Таким образом, применение text-overflow: ellipsis, к сожалению, не сработает. В идеальном мире это было бы лучшим решением.

Второй лучший ответ

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

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

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

Третий ответ

Если вы действительно не можете изменить макет так, чтобы все метки были видны в полном тексте, игнорируйте предупреждение, оставьте полный текст в aria-label, а сокращенный текст - видимым, как сейчас. Есть проблемы для нескольких групп людей, ну, но все же не так уж и плохо. Вероятно, было бы намного хуже для доступности, если бы вы решили заменить свой <select< на настраиваемый компонент.

Так что я все равно настоятельно рекомендую вам сохранить свой <select> в любой ситуации. Слепые люди и пользователи клавиатуры будут вам благодарны.

Однако всегда помните, что предупреждения никогда не появляются даром. Они указывают вам на потенциальную проблему, которую лучше решить. Это определенно не ложное срабатывание!

person QuentinC    schedule 02.07.2020
comment
Эти раскрывающиеся списки есть в некоторых формах, которые относятся к аналогичным категориям. Компонент можно использовать повторно, поэтому значения раскрывающегося списка назначаются динамически. Но ширина раскрывающегося списка фиксирована, потому что UX хочет, чтобы форма везде выглядела одинаково. Я поднял этот вопрос в нашем отделе контроля качества. На данный момент, надеюсь, удастся получить исключение для нарушения или согласиться с прочтением усеченного заголовка. - person Amruta; 03.07.2020