TTS is reading image tags

[ngosang]

wallabag app master branch

When I use Text-to-Speech it's really annoying that it read <img src="http://url..."> in each image of the article. Is there a way to exclude that tags from reading?

[nicosomb]

I think that TTS must read images alternative text. It's a great feature for people who have vision troubles.

[ngosang]

I agree, but not the url. Maybe replace < img alt="My text" src="url" > with "Image: My text"

[Strubbl]

Maybe the URL is also an important piece of information?

[ngosang]

Maybe the URL is also an important piece of information?

I think it's not. Try to read this loud: => http://e00-elmundo.uecdn.es/assets/multimedia/imagenes/2017/03/26/14905243855423.jpg
It's really annoying. 😞

[tcitworld]

Yeah, let's look at removing the url.

[Strubbl]

Maybe the URL is also an important piece of information?

I think it's not. Try to read this loud: => http://e00-elmundo.uecdn.es/assets/multimedia/imagenes/2017/03/26/14905243855423.jpg
It's really annoying. 😞

For you of course. But for people who have vision troubles?

[tcitworld]

That's the purpose of the alt attribute.

[Strubbl]

That's the purpose of the alt attribute.

Of course. But do you have any reference, that the link is not necessary?

[tcitworld]

As far as I've googled it, it's of no use. I'll ask a friend of mine who's specialized in accessiblity.

[ntnsndr]

Checking on this. It's a consistent problem for me. Can the app just automatically remove URL-like strings?

[di72nn]

Can somebody provide a couple of examples?

[ngosang]

Most images are read properly, but I found one that doesn't.

https://www.elconfidencial.com/espana/2020-04-01/coronavirus-ultima-hora-covid19-fallecidos_2524247/

Start reading in this paragraph, you will hear not just the URL, also the HTML code, tags...

If you look at the source code it's a bit more complex than an img:

<a href="https://www.ecestaticos.com/file/bb9dda95798ab68ea963442112b32b18/1585730429-carta-admin-provisional-u-nica-de-rtve-01-04-20.pdf" class="img-link" target="_blank" rel="nofollow">
   <figure class="news-img-figure">
      <noscript>
         <p><img class="eclazy news-img-def" src="https://www.ecestaticos.com/image/clipping/585/d2dd4f749212b4be8ddba6b5ce1c5e51/pinche-aqui-para-consultar-la-carta-integra-a-rtve.jpg" alt="Pinche aquí para consultar la carta íntegra a RTVE" width="585" height="836" referrerpolicy="no-referrer" /></p>
      </noscript>
      <img class="news-img-def" alt="Pinche aquí para consultar la carta íntegra a RTVE" src="https://www.ecestaticos.com/image/clipping/585/d2dd4f749212b4be8ddba6b5ce1c5e51/pinche-aqui-para-consultar-la-carta-integra-a-rtve.jpg" referrerpolicy="no-referrer" width="585" height="836">
      <figcaption class="news-img-caption-def">Pinche aquí para consultar la carta íntegra a RTVE</figcaption>
   </figure>
</a>

Maybe we should remove all HTML code when reading (all the HTML tags).

I hove @ntnsndr can provide better examples.

[ntnsndr]

Yes, I've been looking for examples! Will post as I encounter them. Sorry for the delay. It's true that this happens less than I think it used to. But I was reminded of this the other day when my wife said, "I love it when your robot reads URLs."

[di72nn]

That problem with <noscript> elements is unusual, but trivial to fix.
I also encountered the same problem with this article (near the very end).

However, it seems to me that <img> tags are not read at all (an accessibility issue).

[ngosang]

However, it seems to me that tags are not read at all (an accessibility issue).

That should be easy to fix. Just add some code like this here => https://github.com/wallabag/android-app/pull/945/files#diff-db78bf95f5278b36d57b2bb1ace522c9R118

            } else if (element.nodeName === 'IMG') {
                if (element.hasAttribute("alt")) {
                    accumulatedText += "Image: " + element.getAttribute("alt");
                }
            }

NOTE: You have to translate the text "Image".

[ntnsndr]

I noticed the problem today on an image in a Google Doc (I can't share the URL because it was shared with me privately).

[ntnsndr]

Okay, I found an example of an image tag the TTS is reading: See this article, just before the author's byline at the very end.

[di72nn]

Seems like another <noscript> tag. Should be fixed in #931.

[ntnsndr]

Another offender here. Looks like <noscript> again.

[di72nn]

You probably want to check out the latest beta (APK, beta on Google Play, eventually on F-Droid) - it contains a lot of TTS-related changes (including the fix for the <noscript> tag).

[ngosang]

I have been testing the code in the master branch for a while. It's really good. Thank you!

[ntnsndr]

Thanks! Yes, I'm on the F-Droid bandwagon.

[di72nn]

2.4.0-beta.4 is available in F-Droid (it's not marked as "suggested", so you have to choose the version manually).

[di72nn]

Reopen if you have new examples (with 2.4.0-beta.4+).