Предоставление альтернативного текста для текста в программе чтения с экрана для неинтерактивного текста

Question

У меня следующая разметка:

<p><span alt="Something else">Lorem</span> ipsum blah blah</p>

Но я хочу заменить Lorem на «Something else» только для программ чтения с экрана. Как я могу это сделать? Я не смогу использовать aria-label, поскольку span не является интерактивным элементом.

Answer 1

Вам нужно будет использовать комбинацию aria-hidden и визуально скрытого текста.

Во-первых, быстрое предупреждение о выполнении того, что вы просили.

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

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

Не зная вашего конкретного c варианта использования, я не могу посоветовать, верно ли это для вашего варианта использования (поэтому этот ответ показывает вам, как это сделать), но общий Правило в том, что если это полезно для одной группы людей, то полезно для всех. Вместо этого посмотрите, как сделать объяснение / информацию и т. Д. c. работают для всех пользователей, чтобы у всех был одинаковый опыт.

aria-hidden

aria-hidden позволяет скрыть информацию от программы чтения с экрана. Думайте об этом как о display: none, но для вспомогательных технологий.

Вы бы скрыли ту часть, которую не хотите читать.

<span aria-hidden="true">Lorem</span>

визуально скрытый текст

Визуально скрытый текст противоположен aria-hidden. Его часто называют текстом «только для чтения с экрана».

Вы просто помещаете текст, который должен быть прочитан программой чтения с экрана, внутри элемента (обычно <span>) и применяете класс. Это будет прочитано программой чтения с экрана, но визуально невидимо.

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

Поскольку визуально скрытый текст работает вплоть до IE6, у вас не должно быть никаких проблем с совместимостью (хотя некоторые программы чтения с экрана могут игнорировать aria-hidden и объявите, что также , так что имейте в виду, что вы ничего не можете с этим поделать)

<span class="visually-hidden">Something else</span>

Собираем все вместе - пример

.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><span aria-hidden="true">Lorem</span><span class="visually-hidden">Something else</span> ipsum blah blah</p>

Answer 2

Другой способ сделать это:

<p><span aria-label="something else" role="img">Lorem</span>ipsum blah blah</p>

... NVDA объявляет это как "graphi c something else ipsum blah blah" .

Роль img указывает AT не заглядывать внутрь элемента в поисках дополнительных доступных имен, что в чем-то похоже на aria-hidden, поэтому особенно полезно для доступной маркировки 'dingbat' типовые глифы и эмодзи (например, значки 'graphi c', представленные как 'текстовые' символы), или , когда последовательность символов может интерпретироваться (особенно с помощью синтезатора речи) несколькими способами или не объявляться вообще. Это позволит вам придерживаться единой интерпретации.

Пример: символ одинарной кавычки ' может означать минут или футов , в зависимости от контекст. NVDA вообще не объявляет об этом, если в параметрах не включена пунктуация.

Теперь, в отличие от диапазона без семанти c по умолчанию, роль img позволяет обрабатывать произвольные последовательности символов как graphi c, и используют aria-label.

Недостатком является то, что роль объявляется (например, как «graphi c» или «image "), и элемент появится в любом пользовательском интерфейсе списка изображений, предлагаемом вашим AT.

Вы можете быть довольны или не удовлетворены объявлением роли. (В данном случае это вообще не граф c). Вы можете настроить это с помощью aria-roledescription, таким образом:

<p>You turned over the 5<span aria-label="hearts" role="img" aria-roledescription="suit">&#9829;</span></p>

... NVDA объявляет это как «Вы перевернули 5 сердечек масти» .

Не идеально, но это закрепляет символ масти карты «сердца», а не (произносит) слово «любовь» (как в «I ♥ NY»). В вашей ситуации могут быть более подходящими другие имена для особых ролей. Обратите внимание, что пустые атрибуты aria-roledescription являются не действительными в ARIA, поэтому вы не можете полностью избавиться от них с помощью этой техники, и вы не можете точно предсказать, как разные AT будут вставлять объявление роли в речевой поток. Поэтому используйте атрибут aria-roledescription с особой осторожностью.

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

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

Еще один менее чем очевидный Дело в том, что не все AT являются программами чтения с экрана!

Некоторые «творческие» решения для текстовых вариантов могут хорошо работать с программами чтения с экрана, но плохо работать (скажем) с устройствами Брайля. Это особенно верно, если вы пытаетесь «догадаться», как программа чтения с экрана произносит что-то, и испытываете соблазн предоставить какой-то хакерский c phoneti, который пользователям Брайля будет сложно понять *. 1060 *

Как правило, следует избегать сокрытия информации от AT или предложения вещей только для AT.

Если вам это абсолютно необходимо, подумайте о пользователях программ чтения с экрана dyslexi c, пользователях устройств Брайля, и (желательно) получить второе мнение о вашей реализации от сообщества специальных возможностей или некоторых репрезентативных пользователей, предоставив достаточно контекста (то есть не только lorem ipsum), чтобы ваша реализация могла быть оценена должным образом.

Answer 3

TL; DR: вы можете установить role на теге, чтобы сделать его интерактивным элементом, но подождите ...

Но я хочу заменить Lorem с "Something else" только для программ чтения с экрана. Как я могу это сделать? Я не смогу использовать aria-label, поскольку span не является интерактивным элементом.

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

Или того хуже, текстовая альтернатива может испортить пользовательский опыт, как, например, замена легко читаемого текста, такого как «ФБР», на «Федеральное бюро расследований».

У вас может возникнуть соблазн express формат даты, выраженный как «09/11 / 01 "со следующим тегом:

<div role="img" aria-label="September 11th, 2001">09/11/01</div>

Он будет работать в программах для чтения с экрана. Это может помочь слепым людям, не живущим в Америке, но не поможет 99,9% пользователей в мире, говорящих на английском sh языке, где полный текст мог бы помочь им понять формат даты ( is it "9 ноября , 2001 »или« 1 ноября 2009 г. »?).