Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Links not keyboard accessible when inside VML #77

Open
M-J-Robbins opened this issue Mar 5, 2020 · 2 comments
Open

Links not keyboard accessible when inside VML #77

M-J-Robbins opened this issue Mar 5, 2020 · 2 comments
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@M-J-Robbins
Copy link
Contributor

It looks like an <a> element, nested inside a VML background isn't focusable or clickable via a keyboard input.

So far I've been unable to test this myself in a live environment, so if anyone else is able to that would be great. I would also be interested if this is accessible with a screen reader.

This is an issue raised on Email geeks slack here is the original post for reference.

Hi all, I’ve noticed on Outlook Desktop (Windows) that if you have a module with a full width background-image being used (with VML code), and have a text/CTA overlay on top, the CTA is inaccessible with keyboard tab (it highlights the background-image and moves to the next content), is this is a known Outlook bug or is there a way around this?
@hteumeuleu hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label Mar 5, 2020
@hteumeuleu
Copy link
Owner

I made a test code using a background from backgrounds.cm and I can confirm this. The entire VML object gets the focus, but none of the HTML inside. I'm on Outlook for Office 365 MSO (16.0.12430.20112) on Windows 10.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VML bug</title>
</head>
<body>
	<p>
		<a href="https://www.example.com">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit. <a href="https://www.example.com">At unde quidem</a>, animi laboriosam corporis, <a href="https://www.example.com">natus non</a> ex sunt ullam aut! Tenetur illum voluptas ipsum eveniet quam ratione voluptatibus <a href="https://www.example.com">facilis veritatis</a>!
	</p>
	<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" align="center">
		<tr>
			<td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="600" height="200" valign="top">
				<!--[if gte mso 9]>
				<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
				<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
				<v:textbox inset="0,0,0,0">
				<![endif]-->
				<div>
      				<a href="https://www.example.com">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit. <a href="https://www.example.com">At unde quidem</a>, animi laboriosam corporis, <a href="https://www.example.com">natus non</a> ex sunt ullam aut! Tenetur illum voluptas ipsum eveniet quam ratione voluptatibus <a href="https://www.example.com">facilis veritatis</a>!
				</div>
				<!--[if gte mso 9]>
				</v:textbox>
				</v:rect>
				<![endif]-->
			</td>
		</tr>
	</table>
	<p>
		<a href="https://www.example.com">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit. <a href="https://www.example.com">At unde quidem</a>, animi laboriosam corporis, <a href="https://www.example.com">natus non</a> ex sunt ullam aut! Tenetur illum voluptas ipsum eveniet quam ratione voluptatibus <a href="https://www.example.com">facilis veritatis</a>!
	</p>
</div>
</body>
</html>

@hteumeuleu
Copy link
Owner

And here's a video demonstrating the issue: https://youtu.be/fXwt-rXFnH0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hteumeuleu @M-J-Robbins