email/templates/examples/coc.html

ID:
email/templates/examples/coc.html
Automated score:
68.8
URL:
https://stackoverflow.design/email/templates/examples/coc.html
View JSON file

10 violations: Light: 2Dark: 2HC Light: 3HC Dark: 3

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:537px; width:100%">

Target

.email-container > 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:537px; width:100%">

Target

.email-container > 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:537px; width:100%">

Target

.email-container > 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:537px; width:100%">

Target

.email-container > 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

<a class="s-btn s-btn__outlined" href="https://stackoverflow.com/conduct" style="background-color: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

table[align="center"] > tbody > tr > .s-btn.s-btn__outlined > .s-btn.s-btn__outlined

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://stackoverflow.com/conduct" style="color: #0077CC; text-decoration: none;">Code of Conduct</a>

Target

p:nth-child(1) > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://stackoverflow.com/conduct#reporting" style="color: #0077CC; text-decoration: none;">Flag harmful behavior</a>

Target

strong > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__outlined" href="https://stackoverflow.com/conduct" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

table[align="left"] > tbody > tr > .s-btn.s-btn__outlined > .s-btn.s-btn__outlined

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), 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

<a class="s-btn s-btn__outlined" href="https://stackoverflow.com/conduct" style="background-color: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

table[align="center"] > tbody > tr > .s-btn.s-btn__outlined > .s-btn.s-btn__outlined

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://stackoverflow.com/conduct" style="color: #0077CC; text-decoration: none;">Code of Conduct</a>

Target

p:nth-child(1) > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://stackoverflow.com/conduct#reporting" style="color: #0077CC; text-decoration: none;">Flag harmful behavior</a>

Target

strong > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__outlined" href="https://stackoverflow.com/conduct" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

table[align="left"] > tbody > tr > .s-btn.s-btn__outlined > .s-btn.s-btn__outlined

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), 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