Re: [Inkscape-user] Making Inkscpe SVGs accessible to screen readers
I replied but the mail server rejected the message because it had a zip attachment. Here's a link to the zip archive on my Mediafire account :
http://www.mediafire.com/file/u55y9fs15d4y13f/acessible-SVG-test.zip/file
Thanks and regards,
Jonathan
On Wed, Jun 5, 2019 at 10:27 AM Jonathan Busby <jonathanbusby@...155...> wrote:
On Mon, Jun 3, 2019 at 7:11 PM Steve Litt <slitt@...2357...> wrote:
If I understand you correctly, you already have this text visible on the picture and able to be selected (how?).
The text in the accessibility modified file is visible, but it's not selectable.
Once you can select it, copy it from the SVG and paste it into a window whose job it is to feed text into a text-to-speech program.
The original, "non-accessible" file, has selectable text, but only via a CTRL-A, a CTRL-C and a CTRL-V. But its text is quite ugly and garbled when pasted.
I've tested the original, "non-accessible" SVG file with JAWS https://www.freedomscientific.com/products/software/jaws/?utm_term=jaws%20screen%20reader&utm_source=adwords&utm_campaign=All+Products&utm_medium=ppc&hsa_tgt=aud-544366240235:kwd-394361346638&hsa_cam=200218713&hsa_ad=296201131673&hsa_kw=jaws%20screen%20reader&hsa_grp=52663682111&hsa_net=adwords&hsa_mt=e&hsa_src=g&hsa_acc=1684996396&hsa_ver=3&gclid=CjwKCAjw0N3nBRBvEiwAHMwvNj8nn8W_WXFoPhqM1PBETY55GX-2dhBPDjLb3QeQtJsJnd2PcFcKQxoClrwQAvD_BwE and it reads the file pretty decently, but it doesn't even read *anything* from the "accessible" SVG file.
I'll attached the original SVG, the screen reader accessible SVG that I attempted to create and the "diff -Nau" between the two files. Any help would be appreciated.
SteveT
Steve Litt June 2019 featured book: Thriving in Tough Times http://www.troubleshooters.com/thrive
Thanks and regards,
Jonathan
Did you ever try using a screen reader on it yet?
Is the problem that you still can't select the text from the html page?
I'm not sure, but I think I found the section of the CSS Tricks article you're using, which you need the most. It's about halfway down the page (a little less) called "Complex images - An Accessible Graph".
#1 - "Setting up the file" starts with ordering the layers. You only have one layer, so it might be that you need to make some more? It also mentions optimization (among several other things). It recommends using a particular tool. However, Inkscape has some optimization features as well. You'll just have to sort through it and figure out what you need.
It mentions something about using the keyboard to guide the screenreader through the webpage. So it sounds like you'll need some idea how screen readers work.
#2 - "Let's make it accessible" sounds like your pot of gold! But I wouldn't skip #1.
You'll have to plow through it all yourself. I didn't look past that point, but you probably should.
All best, brynn
-----Original Message----- From: Jonathan Busby Sent: Wednesday, June 05, 2019 9:37 AM To: Inkscape User Community Subject: Re: [Inkscape-user] Making Inkscpe SVGs accessible to screen readers
I replied but the mail server rejected the message because it had a zip attachment. Here's a link to the zip archive on my Mediafire account :
http://www.mediafire.com/file/u55y9fs15d4y13f/acessible-SVG-test.zip/file
Thanks and regards,
Jonathan
On Wed, Jun 5, 2019 at 10:27 AM Jonathan Busby <jonathanbusby@...155...> wrote:
On Mon, Jun 3, 2019 at 7:11 PM Steve Litt <slitt@...2357...> wrote:
If I understand you correctly, you already have this text visible on
the picture and able to be selected (how?).
The text in the accessibility modified file is visible, but it's not selectable.
Once you can select it, copy it from the SVG and paste it into a window whose job it is to feed
text into a text-to-speech program.
The original, "non-accessible" file, has selectable text, but only via a CTRL-A, a CTRL-C and a CTRL-V. But its text is quite ugly and garbled when pasted.
I've tested the original, "non-accessible" SVG file with JAWS and it reads the file pretty decently, but it doesn't even read *anything* from the "accessible" SVG file.
I'll attached the original SVG, the screen reader accessible SVG that I attempted to create and the "diff -Nau" between the two files. Any help would be appreciated.
SteveT
Steve Litt June 2019 featured book: Thriving in Tough Times http://www.troubleshooters.com/thrive
Thanks and regards,
Jonathan
_______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
On Thu, Jun 6, 2019 at 9:15 AM brynn <brynn@...3089...> wrote:
Did you ever try using a screen reader on it yet?
Yes :) I used "JAWS"*, but, unfortunately, unlike the "non-accessible" SVG file, the "screen reader accessible version" presents no text data to JAWS and it isn't able to read it. For the plain unmodified SVG though, JAWS rambles off the text rapidly and it's really quite bad. :(
*( https://www.freedomscientific.com/products/software/jaws/ )
Is the problem that you still can't select the text from the html page?
I don't know if that's the problem or not. According to the reference specs from the W3C, the "aria-label" properties in the SVG file should fix that, or at least make the SVG file screen reader accessible.
I'm not sure, but I think I found the section of the CSS Tricks article you're using, which you need the most. It's about halfway down the page (a little less) called "Complex images - An Accessible Graph".
#1 - "Setting up the file" starts with ordering the layers. You only have one layer, so it might be that you need to make some more?
Well, if you mean groups, then I did add <g> elements with "role=list" and "aria-label" properties to groups of text elements that are related, but that doesn't seem to make the screen reader work.
I'm not sure what "role" I should use -- img, group, list, text?
It also mentions optimization (among several other things). It recommends using a particular tool. However, Inkscape has some optimization features as well. You'll just have to sort through it and figure out what you need.
I'm afraid I don't know much about SVG optimization :/ I guess I'll have to read up on it.
It mentions something about using the keyboard to guide the screenreader through the webpage. So it sounds like you'll need some idea how screen readers work.
#2 - "Let's make it accessible" sounds like your pot of gold! But I wouldn't skip #1.
Well, I followed the examples and advice mentioned in the article, but with no success :/
You'll have to plow through it all yourself. I didn't look past that point, but you probably should.
All best, brynn
Thanks and regards,
Jonathan
#1 - "Setting up the file" starts with ordering the layers. You only have one layer, so it might be that you need to make some more?
Well, if you mean groups, ....
No, I think it means layers, not groups. In that particular section, where it talks about "layer grouping" it's not the same thing as Inkscape's "Groups". I think it means generally a grouping of layers.
.... then I did add <g> elements with "role=list"
and "aria-label" properties to groups of text elements that are related, but that doesn't seem to make the screen reader work. I'm not sure what "role" I should use -- img, group, list, text?
For the most part, that html code is over my head, so I can't comment about it. However, I didn't see any code like that in your html file. Oh, I see it's in the TXT file. Maybe someone will be able to have a look at it?
Under that "#2 Let's make it accessible", the first thing it says is
"Screen reader traversable - Make sure the SVG is traversable in all browsers by adding role="group" to the <svg>. According to the new SVG spec, they should map to the graphics-document role. However, the spec is still in working draft mode, therefore, the browsers have not implemented that yet."
I don't know, it looks like the article is 2 or 3 years old. Maybe browsers do implement it by now. Or maybe that's part of the problem?
I'm afraid I don't know much about SVG optimization :/ I guess I'll
have to read up on it.
The instructions look fairly easy, now that I took the time to read it closely. It looks like you just need to click the "prettify" button in the program they recommend.
Too bad that JAWS program doesn't have a free version. Have you found any free screen readers? If there is, I wouldn't mind diving into this, code and all.
brynn
-----Original Message----- From: Jonathan Busby Sent: Thursday, June 06, 2019 11:23 AM To: Inkscape User Community Subject: Re: [Inkscape-user] Making Inkscpe SVGs accessible to screen readers
On Thu, Jun 6, 2019 at 9:15 AM brynn <brynn@...3089...> wrote:
Did you ever try using a screen reader on it yet?
Yes :) I used "JAWS"*, but, unfortunately, unlike the "non-accessible" SVG file, the "screen reader accessible version" presents no text data to JAWS and it isn't able to read it. For the plain unmodified SVG though, JAWS rambles off the text rapidly and it's really quite bad. :(
*( https://www.freedomscientific.com/products/software/jaws/ )
Is the problem that you still can't select the text from the html page?
I don't know if that's the problem or not. According to the reference specs from the W3C, the "aria-label" properties in the SVG file should fix that, or at least make the SVG file screen reader accessible.
I'm not sure, but I think I found the section of the CSS Tricks article you're using, which you need the most. It's about halfway down the page (a little less) called "Complex images - An Accessible Graph".
#1 - "Setting up the file" starts with ordering the layers. You only have one layer, so it might be that you need to make some more?
Well, if you mean groups, then I did add <g> elements with "role=list" and "aria-label" properties to groups of text elements that are related, but that doesn't seem to make the screen reader work.
I'm not sure what "role" I should use -- img, group, list, text?
It also mentions optimization (among several other things). It recommends using a particular tool. However, Inkscape has some optimization features as well. You'll just have to sort through it and figure out what you need.
I'm afraid I don't know much about SVG optimization :/ I guess I'll have to read up on it.
It mentions something about using the keyboard to guide the screenreader through the webpage. So it sounds like you'll need some idea how screen readers work.
#2 - "Let's make it accessible" sounds like your pot of gold! But I wouldn't skip #1.
Well, I followed the examples and advice mentioned in the article, but with no success :/
You'll have to plow through it all yourself. I didn't look past that point, but you probably should.
All best, brynn
Thanks and regards,
Jonathan
_______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
participants (2)
-
brynn -
Jonathan Busby