VML is rendered as an image in Outlook, meaning all the content becomes part of the image. This causes issues for accessibility.

The best option is to avoid putting anything more than one line of content inside VML.

If you are using content inside VML it's always best to set an alt to be sure of what it read to the user.

<v:rect fill="true" stroke="false" style="width:640px; height:210px;" alt="Lorem ipsum dolor sit amet, coctetuer adipiscing elit">
<h2>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</h2>
</v:rect>

Without the alt it will be read as Rect. Lorem ipsum dolor sit amet, coctetuer adipiscing elit
With the alt it will be read as Lorem ipsum dolor sit amet, coctetuer adipiscing elit

As a side note, I can see you have role="button" on a link. This makes the link unusable for people using screen readers. When talking about design we often refer to styled links as buttons but semantically they are still links <a></a> and not buttons <button></button>. When adding role="button" the screen reader will be passing message of a button action rather than a link action meaning it doesn't get clicked.

I'd recommend this one, it gives a really good break down of the issues end users might have
https://whocanuse.com/?b=ffdddd&c=567000&f=24&s=

It's set to display: block and block element don't respond to text align. Remove that and it should work.

Depends a bit on how you're defining responsive.

• Some people might say it's making the email adjust to fit the viewport.
• Some people might say it's making the email adjust to fit the viewport by specifically using @media queries.

Neither is outdated. Neither is "the lazy way out".

It's worth noting that no ESP can or will be able to serve the different versions to the end user depending on if they are using desktop or mobile. Tracking for mobile v's desktop isn't 100% accurate. and just because someone has previously opened on desktop doesn't mean they will never open on mobile.

Also viewport size is more important than the device. You can have a mobile device with a huge screen and a desktop device with a small preview pane both can be adjusted very easily to change the viewport size.

My only guess would be they are talking about having the layout change significantly on smaller viewports rather than just scaling down to fit. But worth clarifying with them to be sure.

Yeah you are right, making everything a link is VERY bad for accessibility and VERY bad for user experience.

Without looking into the full specifics I'll assume that you have a good design with clear CTA's and I'll assume the recipient understands that this is an email and not a banner ad.

Assuming those things then any click that is not on a clear CTA can be categorised as an accidental click. The user was trying to do something else but accidentally triggered a click to the landing page rather than what they were trying to do.

This often leads to the question what were they trying to do...

• double tap to zoom
• tap the scroll
• highlight some text to translate it
• highlight some text to look up the meaning of a word
• highlight some text to copy and paste
• highlight some text to keep place while reading - (I do this one myself)
• highlight some text to run through a text reader I'm sure there are more to add to this list

From a screen reader users point of view all these links will make the content confusing.
The text inside a link should describe the action of the link in a concise way "buy our product" "read more about our product" etc. Having a long paragraph here makes no sense. The screen reader will announce "Link: some text" "Link: some text" "Link: some text" leaving the user wondering what different things those paragraphs and images are linking to.

There is also a shortcut to list all the links on the page that is often used by screen reader users, you can quickly scroll through a list of the links to go to the one you want. If everything is a link then this function is made redundant.

The only possible thing I can think of as a reason in favour from an accessibility point of view is it makes the click area larger. That's fine, you should have a large click area but just make your links bigger, don't break other parts of the accessibility to get this one thing.

Really it depends on how strict you are with your QA. Personally I say yes use them.

I say any <table> that isn't a data table should be a ghost table (wrapped in <!--[if mso]>). This is because some email clients still strip out role attributes, meaning a screen reader will announce the table as in this video https://www.youtube.com/watch?time_continue=13&v=8gAnE1il9QY&feature=emb_logo

Here's an example creating a 600px wide container for your content

<!--[if mso]>
<table width="600" cellspacing="0" cellpadding="0" role="presentation">
  <tr>
    <td>
<![endif]-->
<div style="margin:0 auto; max-width:600px">
  Content
</div>
<!--[if mso]>
    </td>
  </tr>
</table>
<![endif]-->

Hope that helps

There is a write up about this issue in the email bugs repo https://github.com/hteumeuleu/email-bugs/issues/73

Short answer is, the way to avoid this is to not use width attributes (width="600") anywhere in your code, instead use style attributes (style="width:600px")