- 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.
- 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
I've found a bit of a work around.
We can apply a media query directly to a <style> block.
e.g. <style media="screen and (max-width:480px)">
But some email clients will ignore the media attribute and apply it as a regular style even when the media condition isn't met.
So to only apply it to Thunderbird we can prefix our styles with .moz-text-html so the full fix looks like
<style media="screen and (max-width:600px)">
.moz-text-html .foo{background:green}
</style>
There is a bug for it filed here https://bugzilla.mozilla.org/show_bug.cgi?id=1679878
And a bit more info on why they did it here https://bugzilla.mozilla.org/show_bug.cgi?id=1530106#c60
Yup I'm seeing this too.
I was on 78.3.0 and just updated to 78.5.0 on MacOS 10.15.7 tested both versions, and both are removing media queries.
Testing on Litmus media queries are supported Thunderbird 60 on Windows 10
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.
Ah right.
In that case I'd recommend these tools
https://wave.webaim.org
https://www.deque.com/axe
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.
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...
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.