Как я могу указать читателю экрана элемент span?

Question

Контекст: публикация образовательных электронных книг (HTML + CSS)

У меня есть название композиции, где у меня есть такое предложение:

<p>This is <del>correct</del> <ins>incorrect</ins></p>

И важно, чтобы пользователь знал, что часть текста удаляется, а часть вставляется. У меня также есть связанный сценарий, где текст имеет подсветку, которая имеет семантическое значение. Например:

<p>This is an <span class="highlight-blue">adjective</span> and this is a <span class="highlight-red">noun</span>. </p>

Консультант по специальностям рекомендовал мне использовать role = "region" + aria-label для этих ситуаций.

Например:

<p>This is an <span role="region" aria-label="adjective" class="highlight-blue">adjective</span> and this is a <span role="region" aria-label="noun" class="highlight-red">noun</span>. </p>

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

Я видел в других вопросах на этом сайте, что нельзя использовать aria-label для элементов span (или div). Также, используя Chromevox, я обнаружил, что читатель будет читать ярлык арии, но не текст внутри ярлыка арии. (У меня нет доступа к другим программам чтения с экрана для тестирования.)

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

нежизнеспособные варианты

Псевдоэлемент с сокрытием CSS. Я видел решения, где вы можете создать псевдоэлемент и затем скрыть его за кадром с помощью CSS. Когда вы скрываете содержимое за пределами экрана, Kindle сталкивается с проблемами, отбрасывая большие фрагменты текста после содержимого за пределами экрана, поэтому этот вариант недопустим.

Answer 1

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

Есть хорошая статья о том, как сделать блики и другие символы редактирования доступнымина " Краткая заметка о создании вашей метки (более доступная) "

запрещено использовать метку арии для элементов span (или div)

Это не совсем точно.aria-label является глобальным атрибутом и может быть установлен на любой элемент .Однако метка может игнорироваться, если она установлена ​​на <div> или <span>.См. « 2.10 Практическая поддержка: aria-label, aria-labelledby и aria-описаныby ».В частности, третий последний пункт:

• Не используйте aria-label или aria-labelledby для span или div, если ему не назначена роль.

Таким образом, если ваша <div> или <span> имеет роль , соответствующую , тогда будет прочитана метка арии.Но не назначайте роль только для чтения ярлыка арии.Роль должна иметь смысл.