email/templates/examples/10th.html

ID:
email/templates/examples/10th.html
Automated score:
56.3
URL:
https://stackoverflow.design/email/templates/examples/10th.html
View JSON file

14 violations: Light: 3 Dark: 3 HC Light: 4 HC Dark: 4

Ensure aria-hidden elements are not focusable nor contain focusable elements. ARIA hidden element must not be focusable or contain focusable elements. Help URL

HTML

<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 540px; width:100%">

Target

table[aria-hidden="true"]

Summary

Fix all of the following:

  • Focusable content should have tabindex="-1" or be removed from the DOM

Ensure aria-hidden elements are not focusable nor contain focusable elements. ARIA hidden element must not be focusable or contain focusable elements. Help URL

HTML

<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 540px; width:100%">

Target

table[aria-hidden="true"]

Summary

Fix all of the following:

  • Focusable content should have tabindex="-1" or be removed from the DOM

Ensure aria-hidden elements are not focusable nor contain focusable elements. ARIA hidden element must not be focusable or contain focusable elements. Help URL

HTML

<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 540px; width:100%">

Target

table[aria-hidden="true"]

Summary

Fix all of the following:

  • Focusable content should have tabindex="-1" or be removed from the DOM

Ensure aria-hidden elements are not focusable nor contain focusable elements. ARIA hidden element must not be focusable or contain focusable elements. Help URL

HTML

<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 540px; width:100%">

Target

table[aria-hidden="true"]

Summary

Fix all of the following:

  • Focusable content should have tabindex="-1" or be removed from the DOM

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<div style="border-radius: 3px; border: 1px solid #B2B7EA; padding: 4px 6px 3px 6px; font-size: 11px; line-height: 11px; font-family: Consolas, monospace; color: #B2B7EA;" title="because we care">&lt;3</div>

Target

div[title="because we care"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #b2b7ea, background color: #30334f, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 7:1

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<div style="border-radius: 3px; border: 1px solid #B2B7EA; padding: 4px 6px 3px 6px; font-size: 11px; line-height: 11px; font-family: Consolas, monospace; color: #B2B7EA;" title="because we care">&lt;3</div>

Target

div[title="because we care"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #b2b7ea, background color: #30334f, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 7:1

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com/jobs/salary" style="color: #ffffff; text-decoration: none;" target="_parent">Salary Calculator</a>

Target

a[target="_parent"]:nth-child(1)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackoverflow.com/teams" style="color: #ffffff; text-decoration: none;" target="_parent">Stack Overflow for Teams</a>

Target

a[target="_parent"]:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com/jobs/salary" style="color: #ffffff; text-decoration: none;" target="_parent">Salary Calculator</a>

Target

a[target="_parent"]:nth-child(1)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackoverflow.com/teams" style="color: #ffffff; text-decoration: none;" target="_parent">Stack Overflow for Teams</a>

Target

a[target="_parent"]:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com/jobs/salary" style="color: #ffffff; text-decoration: none;" target="_parent">Salary Calculator</a>

Target

a[target="_parent"]:nth-child(1)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackoverflow.com/teams" style="color: #ffffff; text-decoration: none;" target="_parent">Stack Overflow for Teams</a>

Target

a[target="_parent"]:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com/jobs/salary" style="color: #ffffff; text-decoration: none;" target="_parent">Salary Calculator</a>

Target

a[target="_parent"]:nth-child(1)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackoverflow.com/teams" style="color: #ffffff; text-decoration: none;" target="_parent">Stack Overflow for Teams</a>

Target

a[target="_parent"]:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.93:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #b2b7ea)
  • The link has no styling (such as underline) to distinguish it from the surrounding text