Как я могу получить NVDA и подобное, чтобы зачитать aria-label И содержание ‹foreignobject›?

uk, я делал что-то очень похожее, хотя у меня нет поведения при открытии / закрытии, скрытии / отображении.

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

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

Сложность - это выбор веток. Есть атрибут aria-flowto, который принимает один или несколько идентификаторов «пункта назначения» в качестве значение, но у него очень плохая поддержка, и нет рекомендуемых идиом для выбора среди них. (Однако его можно заставить работать с javascript).

Одна из моих попыток использует javaScript для копирования содержимого ящиков на метку aria, прикрепленную к элементу с tabindex=0 на нем. Это работает довольно хорошо, но не дает никаких преимуществ «просматриваемого» контента. Опять же, объявление веток - это проблема.

Если вы хотите, чтобы разметка внутри foreignObject была доступна для просмотра с использованием семантических возможностей, таких как заголовки, вам, вероятно, придется использовать role=document, от чего многие члены сообщества, несомненно, предупредят вас, потому что это сложно. Мне удалось заставить role=document нормально работать в HTML, но еще не интегрировал его с SVG. Я еще не знаю, будет ли он хорошо работать с графическим модулем WAI-ARIA роли.

К сожалению, в имеющемся у вас примере это будет очень сложно реализовать (не часть маркировки, а доступность в целом из-за структуры документа).

Первое, что вам нужно сделать, это исправить порядок DOM SVG - первый узел, на который вы попадаете, - это «нет», что сбивает с толку, и исправить порядок DOM намного проще, чем пытаться управлять tabindex.

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

Для этого я бы следовал правилам сворачиваемого контента - этот пример аккордеона должен помочь вам понять, как правильно использовать aria-expanded и aria-controls. (но используйте его только для понимания этих концепций, это неправильное решение вашей проблемы.)

Затем вам нужно подумать о том, чтобы сообщить пользователю, какие варианты были ему теперь представлены. Самый простой способ сделать это - заключить SVGs в <ul>, так как тогда программа чтения с экрана сообщит им, из скольких элементов можно выбрать (в развернутом разделе).

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

Также посмотрите в этом проводнике файлов пример древовидного представления, который похож на то, что при правильном вложении вам не нужно слишком беспокоиться о маркировке. (поскольку вы можете просто использовать свойство <title> вашего SVGs в качестве содержимого, если вы обнаружите, что простой текст читается неправильно).

В приведенных выше примерах вы заметите, что текст «родительского узла» фактически содержится в <li role="treeitem">, так что, когда вы выбираете подпункт, он автоматически считывает и родительский, и выбранный элемент.

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

Последним преимуществом метода treeview является то, что пользователи будут знакомы с тем, как управлять древовидным представлением (клавиши со стрелкой и пробел для развертывания / свертывания), поэтому вам не нужно попробуйте научить их, какие элементы управления использовать.

Пример

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

<h3 id="tree_lbl">
  Decision Tree
</h3>
<ul role="tree" aria-labelledby="tree_lbl">
  <li role="treeitem" aria-expanded="false">
      <g class="node">
        <foreignObject tabindex="0" focusable="true" class="nodestyle">Is this a decision tree?</foreignObject>
      </g>
    <ul role="group">
      <li role="treeitem" aria-expanded="false">
        <g class="node">
          <foreignObject tabindex="0" focusable="true" class="nodestyle">Yes</foreignObject>
        </g>
        <ul role="group">
          <li role="treeitem">
            <g class="node"><foreignObject tabindex="0" focusable="true" class="nodestyle">A</foreignObject></g>
          </li>
          <li role="treeitem">
            <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">B</foreignObject>
            </g>
          </li>
        </ul>
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">No</foreignObject></g>
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">A1</foreignObject>
            </g>
          </li>
          <li role="treeitem" class="doc">
            <g class="node">
              <foreignObject tabindex="0" focusable="true" class="nodestyle">B1</foreignObject>
            </g>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  </ul>