1

I've been trying to make our emails more accessible but NVDA seems to have trouble reading text when there's a background image in Outlook. Could it be because of the VML or something else? NVDA can read it when I view in browser, but I feel like I shouldn't rely on that being used. I haven't been able to find a lot about email accessibility best practices, and nothing that discusses this issue I'm having. I'm fairly new to this so any suggestions would be appreciated.

Thanks!

<table role="presentation" class="container_module" id="heroWCTA" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;"> 
<tbody> 
<tr> 
<td align="center" valign="top" width="100%" background="https://via.placeholder.com/660x220" style=" background-image:url(https://via.placeholder.com/660x220); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;"> 
<!--[if gte mso 9]>
                                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:210px;">
                                    <v:fill type="frame" src="https://via.placeholder.com/660x220" />
                                    <v:textbox inset="10,10,10,10" v-text-anchor="top">
                                    <![endif]--> 
<table role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;"> 
<tbody> 
<tr> 
<td class="padding_top_60 padding_right_110 padding_bottom_12 padding_left_17 text_18_18" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 15px 15px 32px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; -webkit-text-size-adjust:none;"> 
<div id="heroText"> 
<h2 class="text_18_18" style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; color:#ffffff; margin:0;"><b>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</b></h2> 
</div> </td> 
</tr> 
<tr> 
<td class="padding_bottom_60" width="100%" align="left" style="padding-bottom: 25px; margin: 0;"> 
<table role="presentation" border="0" width="100%" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;"> 
<tbody> 
<tr> 
<td class="content_17" width="32" align="left" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;">&nbsp;</td> 
<td align="left" style="padding: 0; margin: 0;"> 
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;"> 
<tbody> 
<tr> 
<td class="height_22" height="28" width="100%" align="center" border="2" valign="middle" style=" vertical-align:middle; font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 2px solid #00aeef; background-color:#00aeef;"> 
<!--[if mso]>
<table>
<tr>
<td style="background-color: #00aeef; padding: 7px 10px; text-align: center;"><![endif]--><a class="height_22" role="button" href=
"http://go.na.panasonic.com/SU0K1G00F0005J01H00G00O" style=" 
text-decoration:none; color:#ffffff; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 12px; vertical-align:middle; height:28px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:7px 10px; "
><b>Learn More</b></a><br> 
<!--[if mso]></td>
</tr>
</table>
<![endif]--></td> 
</tr> 
</tbody> 
</table> </td> 
<td class="content_17" width="32" align="right" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;">&nbsp;</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> 
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td> 
</tr> 
</tbody> 
</table>
KA0-0NG
  • 23
  • 3
  • Does this answer your question? [CSS background image alt attribute](https://stackoverflow.com/questions/4216035/css-background-image-alt-attribute) – Nathan Sep 22 '20 at 00:05
  • Unfortunately, no. NVDA is skipping the whole section entirely, and I'm more worried about the

    text not being read than the background image.

     – KA0-0NG Sep 22 '20 at 09:59
  • It maybe because Outlook creates the VML block as one element in outlook. Since the language is native to MS Word, NVDA is not able to read/decode it. You might be better of just using a static background image in outlook and background image for other email clients – Syfer Sep 22 '20 at 13:33
  • That's pretty ironic, since the whole point of us implementing background images with text overlay was because we thought they'd be more accessible. Thanks for the input though. I can take this to my team and discuss our options. – KA0-0NG Sep 24 '20 at 17:03

0 Answers0