Как скрыть переполнение содержимого от программ чтения с экрана

Я работаю над сайтом для курирования контента. Одна из вещей, которую вы можете создать, - это виджет с некоторым текстом и без ограничений по символам. Виджет (и его предварительный просмотр) визуализируются простым установлением overflow: hidden

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

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

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

Однако, прежде чем прибегнуть к этому, мне было интересно, можно ли скрыть переполненный контент из программы чтения с экрана?


css accessibility screen-readers nvda
person Alec    schedule 17.08.2016    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Один, по общему признанию, хакерский способ решить эту проблему - сначала ответить на этот вопрос:

Перенести переполнение из одного div в другой

Это позволит вам отделить переполненное содержание от другого div. После этого вы можете добавить aria-hidden=true с помощью JavaScript следующим образом:

elem.setAttribute("aria-hidden", "true");

В приведенном выше примере фрагмент использует jQuery, поэтому вы также можете сделать это следующим образом:

p2.attr( "aria-hidden", "true" );

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

Надеюсь, это помогло!

person fnune    schedule 17.08.2016
comment
Это звучит как наиболее вероятный ответ, но я не тестировал / не буду тестировать - мы просто установим ограничение на количество символов, чтобы упростить задачу. - person Alec; 19.08.2016
comment
Надеюсь, все пройдет хорошо. Подумайте также о голосовании :) - person fnune; 19.08.2016

arrow_upward
1
arrow_downward

aria-hidden="true" заставит программы чтения с экрана не воспринимать этот элемент и его содержимое, а это означает, что он не будет считан.

aria-label установит текст, который будут воспринимать вспомогательные технологии (программы чтения с экрана и т. д.).

http://www.w3.org/TR/wai-aria/states_and_properties

person Jeni    schedule 17.08.2016
comment
Может aria-label работать на div? И прочитает ли он одновременно этикетку и содержимое? - person Alec; 19.08.2016
comment
Нет, aria-label не будет работать с div, программа чтения с экрана будет учитывать его только для элементов управления, связанных с формой, и мультимедиа. - person Fiona - myaccessible.website; 19.08.2016
comment
Да, вы можете работать с aria-label на div. Атрибут aria-label используется для определения строки, маркирующей текущий элемент.. Это не ограничено для конкретного элемента. Этот атрибут можно использовать с любым типичным элементом HTML. См. здесь: w3.org/TR/wai-aria/states_and_properties#aria-label @Alec - person Jeni; 19.08.2016

arrow_upward
0
arrow_downward

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

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

person Fiona - myaccessible.website    schedule 18.08.2016
comment
Проблема в том, что слабовидящие пользователи не смогут эффективно администрировать контент для зрячих пользователей, которые могут получить текст, который был обрезан задолго до того, как это предложит программа чтения с экрана. - person Alec; 19.08.2016
comment
Ах, понял. В этом случае, да, ограничение на количество символов кажется наиболее разумным. - person Fiona - myaccessible.website; 19.08.2016

arrow_upward
-1
arrow_downward

Чтобы скрыть контент от программы чтения с экрана, вы можете использовать атрибут aria-hidden="true".

<span aria-hidden="true">Here be redundant or extraneous content</span>

Источник.

person 3rdthemagical    schedule 17.08.2016
comment
Я пытаюсь скрыть только часть содержимого. Не все. - person Alec; 19.08.2016