Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Email Accessibility

Runner85

Newbie
Total Posts:  2
Posted: 05 January 2018 04:16 PM

I’m trying to figure out the best practice to what I want to do with email accessiblity and screen readers.

Right now I have an image that is clickable and descriptive text underneath that is not clickable. Right now the alt tag is the same as the descriptive text, of course some times not showing up since there are too many characters and with the screen reader, content is getting read twice.

What is the best way to accomplish this? Is the aria describedby supported by all email clients yet? This was my first thinking of how to accomplish this.


CODE EXAMPLE
<table width=“100%” border=“0” cellspacing=“0” cellpadding=“0” align=“center”>
          <tr>
            <td class=“resize100” align=“center”>
            [url=”#” target=“_blank”]
              ” border=
            [/url]
            </td>
          </tr>
          <tr>
          <td style=“font-size:0px; line-height:0px” height=“10”> </td>
          </tr>
          <tr>
          <td align=“center”>
          <table width=“85%” border=“0” cellspacing=“0” cellpadding=“0” align=“center”>
                        <tr>
            <td style=“font-family: ‘Helvetica Neue’, Arial, Helvetica, sans-serif; font-size:14px; line-height:16px; color:#333333”>
            <span style=“color:#333333; text-decoration:none”>Example</span>
            </td>
          </tr>
          <tr>
            <td style=“font-family: ‘Helvetica Neue’, Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; color:#666666;”>
            <span style=“color:#333333; text-decoration:none”></span>
            </td>
          </tr>
          <tr>
            <td style=“font-size:0px; line-height:0px” height=“4”> </td>
          </tr>
          <tr>
            <td style=“font-family: ‘Helvetica Neue’, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #000000; font-weight: bold”>
            TEXT
            </td>
          </tr>
          <tr>
            <td style=“font-size:0px; line-height:0px” height=“4”> </td>
          </tr>
          <tr>
            <td style=“font-family: ‘Helvetica Neue’, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 12px; color: #666666”></td>
          </tr>
          </table>
          </td> 
        </tr>
        </table>


 

Alex Ilhan

Avatar
Administrator
Total Posts:  228
Posted: 08 January 2018 05:55 AM
[ # 1 ]

Hey there!

Great question.

I believe the best thing to do in this case would be to add a blank alt tag (alt=” “) so that the screen reader wouldn’t repeat itself. Or, you could include the descriptive text inside the images anchor tag to link it. ARIA is not widely supported in email clients, thus far.

Some further resources on this:

http://blog.gorebel.com/accessibility-in-email/
https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017

Cheers!
Alex


 

Runner85

Newbie
Total Posts:  2
Posted: 08 January 2018 08:46 AM
[ # 2 ]

Hi Alex

When you talk about the descriptive text inside the anchor tag, are you referring to the descritptive=”” that is deprecated?


Thanks


 

Alex Ilhan

Avatar
Administrator
Total Posts:  228
Posted: 10 January 2018 06:13 AM
[ # 3 ]

Hey Runner85,

No - sorry, I should have been more clear. The screen reader will read the contents of your link.

Cheers!