"Easy" way of making embedded text in SVG file more accessible?

[jdb2]

I have an SVG file that I've created with Inkscape and it has embedded text. I'd like to make the text selectable and also accessible to screen readers. I've done some research but most of what I could find necessitates manually editing the XML in the SVG file. I'm familiar with XML, HTML etc. but not with the SVG XML schema. Is there any "easy" way to make the text more accessible just by using Inkscape alone?

Thanks,

jdb2

[brynn]

I'm not familiar with "embedded text".  I think that means that the font has somehow been added to the file, so that anyone who views the file can see that font, even if they don't have it installed.  Is that what you mean?

My best guess is that the text would have to be text (not converted to paths) for screen readers to read it.  Although I don't know that for a fact.

If the text has already been converted to paths, there's no way to convert it back to text.  You would just need to type the text again.  You can use the status bar to find out whether it's text or path.

As for it not being selectable, I have no idea why it's not selectable.  If you could share the SVG file, we could look at it.  Maybe it has something to do with it being embedded, but again, I'm not sure.

I'd be glad to look at the file, but I still might not be able to give you an answer.  Others here probably know though.

[jdb2]

I'm not familiar with "embedded text".

I apologize if my question was a little confusing  . I mean that the SVG file has text added with the text tool. 

  I think that means that the font has somehow been added to the file, so that anyone who views the file can see that font, even if they don't have it installed.  Is that what you mean?

I mean that I have text that I put into the SVG file via the text tool and  that I want it to be selectable and accessible to screen readers.

My best guess is that the text would have to be text (not converted to paths) for screen readers to read it.  Although I don't know that for a fact.

I guess it's been converted to a path in my case then? Is that why I can't select it?

If the text has already been converted to paths, there's no way to convert it back to text.  You would just need to type the text again.  You can use the status bar to find out whether it's text or path.

Thanks for the tip There's no big deal in typing the text again

As for it not being selectable, I have no idea why it's not selectable.  If you could share the SVG file, we could look at it.  Maybe it has something to do with it being embedded, but again, I'm not sure.

I'd be glad to look at the file, but I still might not be able to give you an answer.  Others here probably know though.

Here it is : https://upload.wikimedia.org/wikipedia/commons/2/29/HP_Saturn_registers.svg

Thanks and regards,

jdb2

[brynn]

After looking at your SVG file, it looks like the text is all text to me.  The reason you can't select it is because it's grouped together with everything else.

To ungroup, select, and then click Ungroup until the status bar says "No groups to ungroup".  This button  or the key shortcut or Object menu > Ungroup.

[jdb2]

After looking at your SVG file, it looks like the text is all text to me.  The reason you can't select it is because it's grouped together with everything else.

To ungroup, select, and then click Ungroup until the status bar says "No groups to ungroup".  This button  or the key shortcut or Object menu > Ungroup.

Thanks for the tip I kept selecting the object and then clicking ungroup until Inkscape indicated that there were no more objects to ungroup, but, the text still isn't selectable

Thanks and regards,

jdb2

[jdb2]

I've been using this https://css-tricks.com/accessible-svgs/ article for a reference in terms of making my SVG file accessible. Any comments on the approach outlined in the article?

Regards,

jdb2

[brynn]

I kept selecting the object and then clicking ungroup until Inkscape indicated that there were no more objects to ungroup, but, the text still isn't selectable

After ungrouping, I can select the text.  I didn't try selecting every single text object though.  Can you show a screenshot of the ones you can't select?  Or is it possible you're working on a different file than the one you provided here?  (There could be other reasons why the text can't be selected.  That's why we ask for the file, so we don't have to guess or explain every reason.)

Any comments on the approach outlined in the article?

I really can't comment on the contents of that article (I've never even used a screen reader before, much less prepared a file for it), except to say that the CSS Tricks website is entirely reputable, and I have seen some excellent articles there.  Although most of the coding is over my head, haha.

As much as I can understand, what you're trying to do is covered in approx the last half of the article.  And as far as I can tell for the file you provided, all the text should be accessible to the screen reader (after ungrouping).

(There are some flowed text objects identified in the file, but as far as I can tell, they are empty.  Flowed text would probably not work for the screen reader.  So it's possible you'll need to delete those empty text objects.  But I don't really know.)

[jdb2]

I kept selecting the object and then clicking ungroup until Inkscape indicated that there were no more objects to ungroup, but, the text still isn't selectable

After ungrouping, I can select the text.  I didn't try selecting every single text object though.  Can you show a screenshot of the ones you can't select?  Or is it possible you're working on a different file than the one you provided here?  (There could be other reasons why the text can't be selected.  That's why we ask for the file, so we don't have to guess or explain every reason.)

Well, I created a tiny HTML file to test the image. Here's a link to the archive of the image and HTML file :

http://www.mediafire.com/file/j2eonjebetupnja/Inkscape-SVG-test.zip/file

Any comments on the approach outlined in the article?

I really can't comment on the contents of that article (I've never even used a screen reader before, much less prepared a file for it), except to say that the CSS Tricks website is entirely reputable, and I have seen some excellent articles there.  Although most of the coding is over my head, haha.

As it is over my head as well

As much as I can understand, what you're trying to do is covered in approx the last half of the article.  And as far as I can tell for the file you provided, all the text should be accessible to the screen reader (after ungrouping).

Thanks for the tip

(There are some flowed text objects identified in the file, but as far as I can tell, they are empty.  Flowed text would probably not work for the screen reader.  So it's possible you'll need to delete those empty text objects.  But I don't really know.)

Well, I can't select text from the SVG in Firefox ( latest version ) and now I've also run into a new problem where some of the text is visibile in Inkscape but not in Firefox.

Thanks,

jdb2

[jdb2]

OK, this is weird. On my Linux machine, I can't select the text in the SVG file. Also, the "20-bits" text above "RSTK" in the diagram is missing, but, if I view it outside of Firefox using Linux Mint's Image Viewer, then it shows up. As a test, I transferred the SVG file to a Windows machine and there, pressing CTRL-A and then CTRL-C, opening up Notepad and then pressing CTRL-V *works*. That is, the text *is* selectable, although it still seems that individual text elements aren't selectable as one has to select the whole image to get the text. Does anyone know what might be the problem?

Thanks,

jdb2

[brynn]

Ok, I think we have some misunderstanding somewhere.  Are you thinking you should be able to select the text on an HTML page?  No, you can't do that.  The SVG file which accompanies the HTML file you shared, is properly ungrouped, and I can select all the text in the SVG file, in Inkscape.  But you can't select it on the webpage.  It's possible there's some way to do that, but I have no idea what it would be.  That would be at least as advanced as the code on the CSS TRICKS article, and maybe more advanced -- if it's possible at all.

As I said, I know little to nothing about screen reading or screen readers.  I'm not sure whether the text would need to be ungrouped in the SVG file, for the screen reader to able to read it, or not.  Maybe not, maybe so.

When you put the SVG file on the html page, did you try to read it with the screenreader?

Also, the "20-bits" text above "RSTK" in the diagram is missing

I don't see any text above "RSTK".

When you're trying to select the text on the webpage, how are you doing that?  Does the screen reader software allow you to do that?  Is that what you're trying to do?  Oh I have no idea about that.  And I'm not sure who might know anything about that, within our community.  I'm guessing the best place to ask for help with this is going to be the mailing list.  The User mailing list.  You can find the link to subscribe here:  https://inkscape.org/community/mailing-lists/

Of course we can keep stumbling around here, if you want to try.  I can spend some time reading the CSS TRICKS article more closely, and maybe come up with some clues.  But I'm starting to think you're trying to do something that is too far over both our heads, at the moment.  If someone on the mailing list knows something about using inkscape with screen readers, that would be your best bet.  But there might not be anyone who knows.  This is the first time I've heard anything about this.

If no one on the mailing list knows, and if the screen reader software is free, I wouldn't mind installing it, and trying to experiment alongside with you.  Or if you don't want to try the mailing list yet, I'm happy to stumble around some more.  Just let me know.

Edit
The SVG file which accompanies the html page, is different from the SVG file you attached earlier.  In that one, I do see the "20-bits".  The reason it doesn't show up is because it's made of Flowed Text.  I think I mentioned about that before, but flowed text doesn't show up anywhere outside of Inkscape.

In Inkscape, select the flowed text.  For future reference, notice in the status bar, how it says "Flowed Text....".  Now Text menu > Convert to Text.  When you do that, you'll see the text moves over slightly.  You can just move it back, using the Selection tool.  And now it will show up just like all the rest of the text.

Edit #2
Possibly having removed the flowed text from the file will make it work with the screen reader?  If not, there is another flowed text object in the file.  It's empty, meaning there's not actually any text.  But I'm thinking it still might confuse the screen reader (keeping in mind that I have no idea how they work).  So we could try removing that one as well, and cross fingers.

[jdb2]

Ok, I think we have some misunderstanding somewhere.  Are you thinking you should be able to select the text on an HTML page?  No, you can't do that.

Well, yes, that's what I want to be able to do ie. make the text selectable when the SVG is linked to in HTML. I've read that CSS Tricks article that I mentioned earlier, and, I added "alt=" properties with descriptions to all of the text elements, as suggested by the article, but, it doesn't seem to work with making it more screen reader accessible or allowing the text to be copied and pasted .

  The SVG file which accompanies the HTML file you shared, is properly ungrouped, and I can select all the text in the SVG file, in Inkscape.  But you can't select it on the webpage.  It's possible there's some way to do that, but I have no idea what it would be.  That would be at least as advanced as the code on the CSS TRICKS article, and maybe more advanced -- if it's possible at all.

Well, I've done further research, and, it seems that the one of the only way to get selectable text from an SVG file linked to in an img element in HTML is to *overlay* HTML over the top of the SVG, with all the HTML text elements having the same font as the SVG file and having the same relative positions. It would probably be very complicated and a real PITA  .

As I said, I know little to nothing about screen reading or screen readers.  I'm not sure whether the text would need to be ungrouped in the SVG file, for the screen reader to able to read it, or not.  Maybe not, maybe so.

I don't have much experience with screen readers as well , but another editor who's also editing the Wikipedia article which I'm editing insists that everything be screen reader accessible.

When you put the SVG file on the html page, did you try to read it with the screenreader?

Well now, there's an idea I haven't performed this test yet.

Also, the "20-bits" text above "RSTK" in the diagram is missing

I don't see any text above "RSTK".

Well, it was flowed text HAHA I fixed it now

When you're trying to select the text on the webpage, how are you doing that?

I just hold down the left mouse button while over the image and drag the mouse pointer, but I can't select any text. If I open up the SVG image on its own page then I can press CTRL-A followed by CTRL-C and then CTRL-V, and, although that does copy the text, it's ugly and runs down the page for maybe 100 lines... And, I just had an idea : I could insert the SVG image inline into the HTML It just might fix the problem

  Does the screen reader software allow you to do that?  Is that what you're trying to do?  Oh I have no idea about that.  And I'm not sure who might know anything about that, within our community.  I'm guessing the best place to ask for help with this is going to be the mailing list.  The User mailing list.  You can find the link to subscribe here:  https://inkscape.org/community/mailing-lists/

I'll have to try some screen reader programs later.

Of course we can keep stumbling around here, if you want to try.  I can spend some time reading the CSS TRICKS article more closely, and maybe come up with some clues.  But I'm starting to think you're trying to do something that is too far over both our heads, at the moment.  If someone on the mailing list knows something about using inkscape with screen readers, that would be your best bet.  But there might not be anyone who knows.  This is the first time I've heard anything about this.

I'm hoping there is a way to do it within Inkscape, or at least by editing the XML

If no one on the mailing list knows, and if the screen reader software is free, I wouldn't mind installing it, and trying to experiment alongside with you.  Or if you don't want to try the mailing list yet, I'm happy to stumble around some more.  Just let me know.

Thank you for the offer Any help would be appreciated

Edit
The SVG file which accompanies the html page, is different from the SVG file you attached earlier.  In that one, I do see the "20-bits".  The reason it doesn't show up is because it's made of Flowed Text.  I think I mentioned about that before, but flowed text doesn't show up anywhere outside of Inkscape.

In Inkscape, select the flowed text.  For future reference, notice in the status bar, how it says "Flowed Text....".  Now Text menu > Convert to Text.  When you do that, you'll see the text moves over slightly.  You can just move it back, using the Selection tool.  And now it will show up just like all the rest of the text.

Thanks for the tip I fixed it now

Edit #2
Possibly having removed the flowed text from the file will make it work with the screen reader?  If not, there is another flowed text object in the file.  It's empty, meaning there's not actually any text.  But I'm thinking it still might confuse the screen reader (keeping in mind that I have no idea how they work).  So we could try removing that one as well, and cross fingers.

According to the CSS Tricks article, grouping semantically related text elements in the XML and giving them an alt attribute and an id is what should be done, but it doesn't seem to work for me .

Regards,

jdb2

[Moini]

Doesn't accessibility for screen readers rely on the aria attributes? (I didn't read the whole thread here, so I might be totally off about what this is about).

[jdb2]

Well, I've done further research, and, it seems that the one of the only way to get selectable text from an SVG file linked to in an img element in HTML is to *overlay* HTML over the top of the SVG, with all the HTML text elements having the same font as the SVG file and having the same relative positions. It would probably be very complicated and a real PITA  .

And this is not even possible using Wikipedia's WikiMedia software .

And, I just had an idea : I could insert the SVG image inline into the HTML It just might fix the problem

Again, can't do this on Wikipedia either

Regards,

jdb2

[jdb2]

Doesn't accessibility for screen readers rely on the aria attributes? (I didn't read the whole thread here, so I might be totally off about what this is about).

Well, according to the CSS Tricks article that I'm using as a reference for accessible SVGs, it indeed does But, there's is a lot more to it than that from what I can gather and I don't completely understand, from reading the article at least, how to implement it

Regards,

jdb2

[brynn]

This whole chapter in the Inkscape manual is about using SVG on the internet.  So maybe you can get some clues there?

http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web.html