Accessibility: Email

Guidelines for accessible emails reflect general content guidelines, but the practices for applying these recommendations are tailored for desktop and mobile email clients.

In this page:

1. Write Clear Subject Lines & Preheaders
2. Use Proper Headings and Structure
3. Formatting, Fonts, and Spacing
4. Add Alternative Text to Images
5. Create Descriptive Links
6. Ensure High Color Contrast
7. Tables & Layouts
8. Provide a Plain Text Version

---

1. Write Clear Subject Lines & Preheaders

Subject lines and preheader text are the first elements read by screen readers and seen by users in their inbox preview. Clear phrasing provides immediate context before the email is opened.

• Keep subject lines concise and descriptive: Summarize the core topic accurately (e.g., “HCU Weekly Newsletter: Oct 2026 Updates” instead of “Important Read!”).
• Use preheader text intentionally: Provide additional context in the email preview space rather than repeating the subject line or leaving raw header text like “View in browser.”
• Avoid overuse of emojis or special characters: Screen readers announce emoji names aloud, which can disrupt the flow of reading when overused or placed mid-sentence.

---

2. Use Proper Headings and Structure

Using native HTML heading tags allows users relying on screen readers to navigate quickly through distinct sections of your email.

• Use true HTML headings: Apply heading styles (<h1>, <h2>, <h3>) using your email editor’s formatting tool rather than simply bolding or enlarging plain text.
• Maintain logical heading hierarchy: Start with an <h1> for the email topic/title and follow with <h2> and <h3> in numerical sequence; do not skip levels for visual styling.
• Use native list elements: Format lists using native bulleted (<ul>) or numbered (<ol>) list formatting so assistive technology recognizes them as grouped items.

---

3. Formatting, Fonts, and Spacing

Readable typography ensures that recipients with low vision, dyslexia, or cognitive impairments can effortlessly scan and digest your message.

• Choose legible, standard fonts: Stick to widespread web-safe sans-serif fonts such as Arial, Verdana, Calibri, or Tahoma.
• Maintain adequate font size and line height: Use a minimum font size of 14px–16px for body text and set line spacing to at least 1.5.
• Align text to the left: Avoid full justification or centered body paragraphs, which create inconsistent spacing between words and hinder readability.
• Avoid sending image-only emails: Never paste an image of text (like a flyer or poster image) as the sole content of the email, as screen readers cannot read text inside images.

---

4. Add Alternative Text to Images

Screen readers rely on alternative text (alt text) to describe visual elements, and alt text displays if an email client blocks images by default.

• Add descriptive alt text: Briefly describe the content and purpose of informative images (e.g., alt="Students gathered at the HCU Student Center").
• Mark decorative graphics correctly: Set empty alternative text (alt="") or mark graphics as decorative for logos, dividers, or icons so screen readers skip them.
• Avoid embedding critical text in images: If text must be included in an image, repeat that exact text completely in the alt text or in the email body text immediately below.

---

5. Create Descriptive Links

Descriptive link phrases provide context for screen reader users navigating through a list of links in an email.

• Use clear link text: Make link phrases explicit about their destination (e.g., “Review the HCU Accessibility Guidelines“).
• Avoid uninformative wording: Never use generic phrases like “Click Here,” “Read More,” or raw URLs (e.g., https://hc.edu/...).
• Provide visual cues: Ensure links stand out from regular body text using underlines in addition to distinct color styling.
• Create large touch targets: If using call-to-action buttons, ensure they have sufficient padding so mobile users can easily tap them.

---

6. Ensure High Color Contrast

Proper contrast helps individuals with low vision or color vision deficiencies read your email easily on varying screens and lighting conditions.

• Maintain strong text contrast: Achieve a contrast ratio of at least 4.5:1 for standard text and 3:1 for large headings.
• Do not rely solely on color: Avoid using color alone to convey urgency or key information (e.g., pairing green/red text with text labels or symbols like “Required”).
• Test Dark Mode compatibility: Verify that text, logos, and icons remain visible when email clients automatically invert background colors in Dark Mode.

---

7. Tables & Layouts

Complex visual designs can cause reading order issues when screen readers parse HTML tables.

• Use presentation roles for layout tables: If using tables to arrange layout blocks, include role="presentation" on the table tag so screen readers treat it as plain text content instead of data rows/columns.
• Identify headers on data tables: If sharing structured data, use proper <th> elements and scope attributes to define row and column headers clearly.
• Keep layouts responsive: Ensure email tables and containers use single-column layouts or fluid widths so content scales on mobile devices without horizontal scrolling.

---

8. Provide a Plain Text Version

Many users prefer plain text for readability, security, or low-bandwidth environments, and some screen readers default to this format.

• Include a Multi-Part Plain Text alternative: Ensure your email service provider generates an accurate, updated plain-text version alongside the HTML version.
• Clean up links in plain text: Ensure full URLs in plain text versions are formatted clearly on new lines for clean screen reader consumption.