NVDA not speaking my images


James Kinney
 

Hi. 

I'm new to NVDA but am committed to developing websites that are fully accessible.  I used a custom font with svg logos I uploaded to the font.  I have used every tag I know about but NVDA doesn't read them.  If I highlight the same area on my iPhone and ask it to speak my selection if speaks the information about the image.  I'm hoping you can give me some guidance about what I need to add to the code or perhaps a perhaps a setting to change in NVDA.

I made a screen print that shows the area and the code behind it.  I believe this will give you all the information you would need to help me.  The screen print is at:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/NVDA-reader-question.png

I also record my iPhone speaking the information and have loaded that short video here:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/iPhone-speaks-the-image-info.MOV

Let me know if you need any additional information.  I really appreciate your help with this.

Jim


Brian's Mail list account
 

I think most if not all of the devs are blind, so you may find it a bit difficult to get the issue over. Try a ticket on gather if you think its wrong. All I know is that most graphics with alt tags give a description of the graphic, according to how detailed the site builder wanted to get of course.
Normally the big messes occur in javascript intense sites.
I'm not up on html myself, but you need to test the site in different browsers too.
Brian

bglists@...
Sent via blueyonder.
Please address personal E-mail to:-
briang1@..., putting 'Brian Gaff'
in the display name field.

----- Original Message -----
From: "James Kinney" <jim@...>
To: <nvda@nvda.groups.io>
Sent: Friday, June 15, 2018 6:55 AM
Subject: [nvda] NVDA not speaking my images


Hi.

I'm new to NVDA but am committed to developing websites that are fully accessible. I used a custom font with svg logos I uploaded to the font. I have used every tag I know about but NVDA doesn't read them. If I highlight the same area on my iPhone and ask it to speak my selection if speaks the information about the image. I'm hoping you can give me some guidance about what I need to add to the code or perhaps a perhaps a setting to change in NVDA.

I made a screen print that shows the area and the code behind it. I believe this will give you all the information you would need to help me. The screen print is at:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/NVDA-reader-question.png

I also record my iPhone speaking the information and have loaded that short video here:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/iPhone-speaks-the-image-info.MOV

Let me know if you need any additional information. I really appreciate your help with this.

Jim


Brian's Mail list account
 

Github that is, spellchecker is being silly again. Brian

bglists@...
Sent via blueyonder.
Please address personal E-mail to:-
briang1@..., putting 'Brian Gaff'
in the display name field.

----- Original Message -----
From: "Brian's Mail list account via Groups.Io" <bglists@...>
To: <nvda@nvda.groups.io>
Sent: Friday, June 15, 2018 11:09 AM
Subject: Re: [nvda] NVDA not speaking my images


I think most if not all of the devs are blind, so you may find it a bit difficult to get the issue over. Try a ticket on gather if you think its wrong. All I know is that most graphics with alt tags give a description of the graphic, according to how detailed the site builder wanted to get of course.
Normally the big messes occur in javascript intense sites.
I'm not up on html myself, but you need to test the site in different browsers too.
Brian

bglists@...
Sent via blueyonder.
Please address personal E-mail to:-
briang1@..., putting 'Brian Gaff'
in the display name field.
----- Original Message -----
From: "James Kinney" <jim@...>
To: <nvda@nvda.groups.io>
Sent: Friday, June 15, 2018 6:55 AM
Subject: [nvda] NVDA not speaking my images


Hi.

I'm new to NVDA but am committed to developing websites that are fully accessible. I used a custom font with svg logos I uploaded to the font. I have used every tag I know about but NVDA doesn't read them. If I highlight the same area on my iPhone and ask it to speak my selection if speaks the information about the image. I'm hoping you can give me some guidance about what I need to add to the code or perhaps a perhaps a setting to change in NVDA.

I made a screen print that shows the area and the code behind it. I believe this will give you all the information you would need to help me. The screen print is at:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/NVDA-reader-question.png

I also record my iPhone speaking the information and have loaded that short video here:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/iPhone-speaks-the-image-info.MOV

Let me know if you need any additional information. I really appreciate your help with this.

Jim






Jonathan COHN
 

Also, the WEB-AIM mailing list or the A11Y Sslack channel both have numerous Accessibility professionals on list, there are probably folks on that list that can respond directly. I believe I did see some discussion of wrapping SVG in a div with role="image" and then labeling the div. I can't remember if the label has to be with an aria-label / aria-labeledby attribute or if you can use the alt attribute.

Some memories indicate to me that you should add an id to the title within the SVG and then use the aria-labeledby attribute to point to that id.

Sorry I don't have time to research my notes on SVG today.

Jonathan


On 6/15/18, 11:00 AM, "bglists via groups.io" <bglists@...> wrote:

I think most if not all of the devs are blind, so you may find it a bit
difficult to get the issue over. Try a ticket on gather if you think its
wrong. All I know is that most graphics with alt tags give a description of
the graphic, according to how detailed the site builder wanted to get of
course.
Normally the big messes occur in javascript intense sites.
I'm not up on html myself, but you need to test the site in different
browsers too.
Brian

bglists@...
Sent via blueyonder.
Please address personal E-mail to:-
briang1@..., putting 'Brian Gaff'
in the display name field.

----- Original Message -----
From: "James Kinney" <jim@...>
To: <nvda@nvda.groups.io>
Sent: Friday, June 15, 2018 6:55 AM
Subject: [nvda] NVDA not speaking my images


Hi.

I'm new to NVDA but am committed to developing websites that are fully
accessible. I used a custom font with svg logos I uploaded to the font. I
have used every tag I know about but NVDA doesn't read them. If I highlight
the same area on my iPhone and ask it to speak my selection if speaks the
information about the image. I'm hoping you can give me some guidance about
what I need to add to the code or perhaps a perhaps a setting to change in
NVDA.

I made a screen print that shows the area and the code behind it. I believe
this will give you all the information you would need to help me. The screen
print is at:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/NVDA-reader-question.png

I also record my iPhone speaking the information and have loaded that short
video here:

https://sandiego-autodetail.com/wp-content/uploads/2018/06/iPhone-speaks-the-image-info.MOV

Let me know if you need any additional information. I really appreciate your
help with this.

Jim


James Kinney
 

Thank you, Jonathan and Brian for your responses.  Geez, i can be a dope.  I understand it would be very difficult to diagnose the issue if you couldn't see where it skips.  The image i sent was also not very helpful then.  I should have at least cut and copied the code.  My apologies for that over-site.  

I will follow up on both your leads.  I didn't know about the role=image or ID options.

My hats off to everyone contributing to this project.  I'll make a separate post to volunteer to test.  

Jim Kinney
Thrive Web Solutions
jim@...
619-609-0021



From: nvda@nvda.groups.io <nvda@nvda.groups.io> on behalf of Cohn, Jonathan <jcohn@...>
Sent: Friday, June 15, 2018 8:28:59 AM
To: Brian's Mail list account; nvda@nvda.groups.io
Subject: Re: [nvda] NVDA not speaking my images
 
Also, the WEB-AIM mailing list or the A11Y Sslack channel both have numerous Accessibility professionals on list, there are probably folks on that list that can respond directly. I believe I did see some discussion of wrapping SVG in a div with role="image" and then labeling the div. I can't remember if the label has to be with an aria-label / aria-labeledby attribute  or if you can use the alt attribute.

Some memories indicate to me that you should add an id to the title within the SVG and then use the aria-labeledby attribute to point to that id.

Sorry I don't have time to research my notes on SVG today.

Jonathan
 

On 6/15/18, 11:00 AM, "bglists via groups.io" <bglists@...> wrote:

    I think most if not all of the devs are blind, so you may find it a bit
    difficult to get the issue over. Try a ticket on gather if you think its
    wrong. All I know is that most graphics with alt tags give a description of
    the graphic, according to how detailed the site builder wanted to get of
    course.
     Normally the big messes occur in javascript intense sites.
    I'm not up on html myself, but you need to test the site in different
    browsers too.
     Brian
   
    bglists@...
    Sent via blueyonder.
    Please address personal E-mail to:-
    briang1@..., putting 'Brian Gaff'
    in the display name field.
    ----- Original Message -----
    From: "James Kinney" <jim@...>
    To: <nvda@nvda.groups.io>
    Sent: Friday, June 15, 2018 6:55 AM
    Subject: [nvda] NVDA not speaking my images
   
   
    Hi.
   
    I'm new to NVDA but am committed to developing websites that are fully
    accessible. I used a custom font with svg logos I uploaded to the font. I
    have used every tag I know about but NVDA doesn't read them. If I highlight
    the same area on my iPhone and ask it to speak my selection if speaks the
    information about the image. I'm hoping you can give me some guidance about
    what I need to add to the code or perhaps a perhaps a setting to change in
    NVDA.
   
    I made a screen print that shows the area and the code behind it. I believe
    this will give you all the information you would need to help me. The screen
    print is at:
   
    https://sandiego-autodetail.com/wp-content/uploads/2018/06/NVDA-reader-question.png
   
    I also record my iPhone speaking the information and have loaded that short
    video here:
   
    https://sandiego-autodetail.com/wp-content/uploads/2018/06/iPhone-speaks-the-image-info.MOV
   
    Let me know if you need any additional information. I really appreciate your
    help with this.
   
    Jim
   
   
   
   
   
   
   
   





James Kinney
 

Thanks again.
Here is the final code for the custom font image that NVDA has no issue with.  

<a href="https://www.facebook.com/" title="Facebook" target="_blank"><div id="placeholder" role="img" aria-label="Facebook" ><span class="icon-facebook" aria-hidden title="Facebook"><span class="path1"></span><span class="path2"></span><span class="sr-only">Facebook</span></span></div></a>