webpage images with NVDA (was: Why does NVDA not find photos on this website?)


Giles Turnbull
 

Hi all,

this is a follow-up to my question about why NVDA didn't find any images using the g shortcut keystroke on the Borrow My Doggy website when sighted members told me they could see the photos of the dogs.

After trying, unsuccessfully, to find the answer with one of the website developers I took a closer look at the html code behind the pages.

It turns out that they were coding images with ALT tags this way:
<IMG ALT="this is an image description" SRC="http://...">

I saved a webpage as a file on my laptop and edited the code so the ALT tag followed the SRC link, and NVDA recognised the graphic object.

I'm assuming since sighted people can see the photos, is there something in the NVDA program code that only recognises an image if the code is in the layout IMG SRC ALT so that IMG ALT SRC does not get picked up as a graphical element?

I was an occasional website designer many years ago and never coded an IMG tag with the ALT text between the IMG and the SRC and I've never ever seen a website code images that way. But, if it is technically okay to structure the image tag that way, should NVDA be able to cope with that structure too?

Giles


Andy B.
 

It shouldn’t make any difference if the alt and src attributes are in a different order. W3C specs never qualify an order. I suspect NVDA is looking for them in a specific order. It should only care that the attributes exist, not the order they appear in the code.

 

 

 

Sent from Mail for Windows 10

 

From: Giles Turnbull
Sent: Monday, August 19, 2019 9:38 AM
To: nvda@nvda.groups.io
Subject: [nvda] webpage images with NVDA (was: Why does NVDA not find photoson this website?)

 

Hi all,

this is a follow-up to my question about why NVDA didn't find any images using the g shortcut keystroke on the Borrow My Doggy website when sighted members told me they could see the photos of the dogs.

After trying, unsuccessfully, to find the answer with one of the website developers I took a closer look at the html code behind the pages.

It turns out that they were coding images with ALT tags this way:
<IMG ALT="this is an image description" SRC="http://...">

I saved a webpage as a file on my laptop and edited the code so the ALT tag followed the SRC link, and NVDA recognised the graphic object.

I'm assuming since sighted people can see the photos, is there something in the NVDA program code that only recognises an image if the code is in the layout IMG SRC ALT so that IMG ALT SRC does not get picked up as a graphical element?

I was an occasional website designer many years ago and never coded an IMG tag with the ALT text between the IMG and the SRC and I've never ever seen a website code images that way. But, if it is technically okay to structure the image tag that way, should NVDA be able to cope with that structure too?

Giles

 


Giles Turnbull
 

one further question: is there any reason why an image without an ALT tag is not showing up to NVDA as a graphic? I thought a non-tagged image just used to be spoken as "graphic" but it was still navigable with the g shorcut. Maybe I'm remembering incorrectly.

Giles


Andy B.
 

Each screen reader has a way of dealing with unlabeled images on the web. JAWS attempts to add an alt attribute automatically by giving the user a choice of reasonable defaults such as a filename. I don’t think NVDA has any reasonable default method for exposing images on websites. However, it’s worth a dev giving this thread feedback on the problem.

 

 

Sent from Mail for Windows 10

 

From: Giles Turnbull
Sent: Monday, August 19, 2019 11:14 AM
To: nvda@nvda.groups.io
Subject: Re: [nvda] webpage images with NVDA (was: Why does NVDA not findphotos on this website?)

 

one further question: is there any reason why an image without an ALT tag is not showing up to NVDA as a graphic? I thought a non-tagged image just used to be spoken as "graphic" but it was still navigable with the g shorcut. Maybe I'm remembering incorrectly.

Giles

 


Quentin Christensen
 

Hi Giles,

It shouldn't make a difference in which order the tags go, as long as the IMG tag is first.  Interestingly, in my test, it worked fine.  I created a test page with the following code:
<HTML>
<BODY>
<IMG SRC="https://www.nvaccess.org/images/logo.png" ALT="Alt text after src">
<P>
Here is a paragraph.
<P>
<IMG ALT="Alt text before src" SRC="https://www.nvaccess.org/images/logo.png">
<P>
More text.
<P>
<ALT="Alt, then SRC, then IMG" SRC="https://www.nvaccess.org/images/logo.png" IMG>
</BODY>
</HTML>

Testing that in both Firefox and Chrome, the first two images are both read fine either with say all, or when pressing G or SHIFT+G.  In both browsers, the third image, with the IMG tag last, is not read by NVDA, but it is also not displayed visually, and so I don't think should be expected to work.

On Mon, Aug 19, 2019 at 11:38 PM Giles Turnbull <giles.turnbull@...> wrote:
Hi all,

this is a follow-up to my question about why NVDA didn't find any images using the g shortcut keystroke on the Borrow My Doggy website when sighted members told me they could see the photos of the dogs.

After trying, unsuccessfully, to find the answer with one of the website developers I took a closer look at the html code behind the pages.

It turns out that they were coding images with ALT tags this way:
<IMG ALT="this is an image description" SRC="http://...">

I saved a webpage as a file on my laptop and edited the code so the ALT tag followed the SRC link, and NVDA recognised the graphic object.

I'm assuming since sighted people can see the photos, is there something in the NVDA program code that only recognises an image if the code is in the layout IMG SRC ALT so that IMG ALT SRC does not get picked up as a graphical element?

I was an occasional website designer many years ago and never coded an IMG tag with the ALT text between the IMG and the SRC and I've never ever seen a website code images that way. But, if it is technically okay to structure the image tag that way, should NVDA be able to cope with that structure too?

Giles



--
Quentin Christensen
Training and Support Manager


Luke Davis
 

On Mon, 19 Aug 2019, Giles Turnbull wrote:

<IMG ALT="this is an image description" SRC="http://...">
I saved a webpage as a file on my laptop and edited the code so the ALT tag followed the SRC link, and NVDA recognised the graphic object.
The order of attributes shouldn't matter at all, as others have said.
What version of NVDA, and what browser/version are you using?

Can you send me a copy of the non-working document off-list, and indicate the name of one of the image files that isn't showing its alt tag?

Luke


Giles Turnbull
 

thanks for the replies. I'm very impressed to see a website taking so much time to improve their screen reader accessibility :)

This was the test page that they set up. It contains 4 images of different sorts / ALT tag versions. The fourth one does now get picked up as a graphic by NVDA and the ALT tag is spoken. Graphics 2 and 3 should not have been spoken by NVDA because 2 has an empty ALT tag and 3 is a background image. I am surprised image 1 does not get picked up as a graphic because it does not have any ALT tag.

as to what I'm using ... NVDA 2019.2 and Firefox 68.0.2 (64-bit) on Win10.

The Borrow My Doggy website designers are happy with the feedback in this thread so thanks everybody for that :)

Giles