Grouping separate lines of text in an svg image

[wilfried]

When exporting an image or SmartArt from a word doc as an svg file it makes any text more accessible.

This can then be edited in a source code editor to add tabindex="1" etc for each text element, so a user can tab through the text elements.

The problem I have is when there are several lines of text I am not able to find a way to group these as one block of text so a user could tab from one block to the next rather than each line.

Anyone know a way to fix this? (maybe @James 🙏)

Here is a link for an svg with lines of text than you can tab through. - https://articulateusercontent.com/rise/courses/V9dIWw1I_fX53nF4QB9k_b56wKHOC0FT/rBhtjO6VzHL_F0UU.svg 

Thanks

[James · Accepted solution]

@wilfried 

This is not my area of expertise so don't be surprised if I give bad advice. It's kind of like asking a used-car salesman which pizza joint in town is best. They may give you an answer, but it may not be worth much.

When exporting an image or SmartArt from a word doc as an svg file it makes any text more accessible.

It's been over 20 years since I took my accessibility course and SVGs weren't covered. I cannot agree with the universal nature that Word makes text "more" accessible. Sometimes you do not want text to be distinguished as text. That may sound blasphemous, but a random word of text, with no context, and possibly read out of order read by a screenreader is worse than a well-formed alt attribute describing the image. If it's primarily text, then it would be best to not make it an image at all

As for making them receive focus with tabindex, I imagine it would have a lot to do with what the artwork was. Not all items need to be focusable, which is why tabindex isn't applied to elements such as div, span, p and href-less anchors. Similarly, not all images need to be focusable.

If the SVG was some kind of navigation image or were clickable, then it accessibility could be improved. I'll assume that there really is some reason for wanting to be able to tab through the text, such as the image containing links.

There is a quick fix that doesn't address getting an entire block together, but allows you to skip from one section to the next. That is to simply not add the tabindex to every piece of text, but only the first text element in each object. Again, that doesn't group it, but it makes it navigable.

That might be enough, though, depending on the image. The SVG Accessibility / Navigation page at W3C Wiki says they want an approach to focus navigation that allows an author to use tabindex to establish essential keyboard landmarks in a drawing (emphasis mine). That would say that the first line in each block of text could be what you want.

It goes on to say, which matches my original thoughts, that we want all SVG drawings with a semantic role of "none" to not be focusable. This is what I feel should happen on the SVG you linked to. That image is similar to a table, which means that you don't tab through each item or even each row. However, if you want to tab through things, it should only be the first line in each item, not every line. 

For the example SVG you gave, I don't see the reason to have tabindex at all. That means that I don't see a need to group the text together to gain focus. If I'm solely looking at it from an accessibility perspective, I don't see why this is an image at all.

I'll assume that you were just using that as an example but that you have a legitimate need to group text together within an SVG and make it focusable.

You want to group to the text together when there are multiple lines of text. Perhaps there is a link that is split across multiple lines.

In this case, it is likely that the <g> tags are causing the problem. There's a blog post about making and testing an accessible SVG that was enlightening when researching your answer. It took an SVG image that was a clickable diagram and made it accessible. In their case, each text element was wrapped in its own <g> tag. They fixed it by wrapping multiple <text> elements within a single <g> element.

I tried their suggestion in the image you provided and still didn't select the block together. That's because each text element had a tabindex on it. Once I moved the tabindex from the <text> to the <g>, then it worked.

Here is what they originally had (I stripped a lot of stuff out to focus on the structure).

<g><text tabindex="6">Productivity tools (such as mindmapping, time</text></g>
<g><text tabindex="7">management, tools to support planning and</text></g>
<g><text tabindex="8">organisation, generative artificial intelligence tools…</text></g>

Here is what it looks like after reorganizing and moving the tabindex.

<g tabindex="6">
  <text>Productivity tools (such as mindmapping, time</text>
  <text>management, tools to support planning and</text>
  <text>organisation, generative artificial intelligence tools…</text>
</g>

Adding tabindex="1" (emphasis on the 1) to every text element in the SVG is not a best practice. The WebAIM group provides some insight into keyboard accessibility and tabindex. They say that "tabindex="1" (or any number greater than 1) defines an explicit keyboard navigation order. This must always be avoided." This time the emphasis is theirs. It goes on to say that tabindex="0" means to place the element in the default navigation order and allows items to become focusable.

Another good page to read is how to use the tabindex attribute from the A11Y Project.

I'm not convinced that Microsoft Word is a good tool to use to create accessible SVG files. It very likely has things out of order. Even though the image you linked to isn't SmartArt, the tabindex is not in the order that it appears in the file. Screen readers read them in the order they are declared, not some weird order created by the SVG creation software. The blog post I reference talked about using Adobe Illustrator so you could layer text together and change the order.

To summarize, the best pizza place in town is ...

[wilfried]

That was a great 🍕