Смешанный контент - текст и математика

ProgramBox

Смешанный контент — текст и математика

Post author:admin
Запись опубликована:30 марта, 2023
Post category:Вопросы по программированию

#html #accessibility #screen-readers #wai-aria

#HTML #Специальные возможности #программы чтения с экрана #вай-ария

Вопрос:

У меня есть некоторый контент на странице, который представляет математические формулы. Этот контент находится внутри <span> , но внутри него есть пользовательский контент, смешанный с текстом. У меня есть текстовое описание математического контента, которое я мог бы поместить в aria-label атрибут в <span> , но программы чтения с экрана, похоже, игнорируют атрибуты aria для элементов, не относящихся к форме.

Есть ли способ заставить программы чтения с экрана использовать альтернативное описание для содержимого внутри <span> или <div> ?

Мой html выглядит так

 <span aria-label='[TEXT DESCRIPTION]'>
    <svg>[SOME SVG CONTENT]</svg>
    <span>[SOME TEXT CONTENT]</span>
</span>

Ответ №1:

Ваш код

 <span aria-label='[TEXT DESCRIPTION]'>
    <svg>[SOME SVG CONTENT]</svg>
    <span>[SOME TEXT CONTENT]</span>
</span>

выглядит немного странно для меня. Первое, что я бы сделал, это изменил внешний диапазон на <div> . Возможно, вам потребуется добавить к нему что-то вроде tabindex="-1" . Более универсальным подходом к дизайну было бы иметь [ТЕКСТОВОЕ ОПИСАНИЕ] в виде обычного текста до / после [НЕКОТОРОГО ТЕКСТОВОГО СОДЕРЖИМОГО], идея в том, что если человеку с нарушениями зрения нужна дополнительная помощь, то другие люди также могут.

Другой вариант может быть таким

 <div>
  <svg aria-describedby="mathOne">.....</svg>
  <span id="mathOne" class="offScreen">{Description}</span>
  <span>Content</span>
</div>

Из комментариев:

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

Я не хочу этого делать. Контент <span> должен улучшать вещи. Давайте представим, что я отображаю квадратичную формулу, код будет выглядеть так

 <div>
  <svg aria-describedby="mathOne">{Generated Formula}</svg>
  <span id="mathOne" class="offScreen">negative B plus or minus the 
   square root of the radical B squared - 4 a c end radical all over 2 a.</span>
  <span>In basic algebra, the quadratic formula is the solution of 
   the quadratic equation.</span>
</div>

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

1. Этот подход не будет работать точно, потому что визуально svg и текстовое содержимое могут быть наложены или расположены абсолютно так, что это имеет смысл с точки зрения математической формулы. Подумайте о символе sqrt, который растет вместе с радикалом и радиусом. Я не могу описать отдельные части отдельно, мне нужно описание для целого.

2. Я добавил пример

3. Вероятно, лучший ответ, чем мой… Программы чтения с экрана читают элементы svg как графику повсеместно? Если это так, то это дает эффект, к которому я стремился, но лучше.

4.Я знаю, что в этой области было проделано немало работы. Это один из тех, за которыми я не слежу активно в основном из-за личного интереса. Ничего не приходит сразу на ум относительно отображения текста в <svg> , но обычно, если вспомогательные технологии знают, как взаимодействовать с ARIA, они должны просто объявлять mathone <span> и игнорировать <svg> . OP, вероятно, мог бы подключиться role="presentation" к <svg> , если они хотят убедиться, что <svg> не был затронут. Конечно, в этом есть свои плюсы и минусы

Ответ №2:

Вы могли бы попробовать установить атрибут роли на что-то вроде img и установить aria-label, вот так.

 <span role="img" aria-label="This will appear like an image. Nothing will be read from inside, but you can set your own description">
<span>here is some non-screen-readerable stuff</span>
</span>

Это то, что вы ищете?

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

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

1. К сожалению, это не работает. Программа чтения с экрана по-прежнему не читает текст. Фактически, теперь он полностью игнорирует элемент.

2. Я попробовал это, установив роль в текстовое поле, и это работает. Я не уверен, какие побочные эффекты это может иметь, но это может быть шагом в правильном направлении.

3. Я бы посоветовал не использовать текстовое поле, так как это было бы действительно запутанным. с какой конфигурацией браузера / программы чтения с экрана вы пробовали img? Он работает с FF и NVDA, но я не пробовал все браузеры со всеми программами чтения с экрана.