Check these 7 boxes before you hit send!
Creating accessible emails ensures that everyone—including students, faculty, and staff using screen readers or assistive technology—can engage with your content. Follow these seven steps to ensure your campaigns are compliant with WCAG 2.2 Level AA standards.
1. Structure with Heading Tags (Title Blocks)
Screen readers use headings (H1, H2, H3) to navigate. Without them, the email is a "flat" wall of text.
- Do: Drag a Title block into your layout.
- Set the Tag: In the left settings panel, select the HTML Heading Tag.
- H1: Main campaign title (use only once).
- H2: Major section headers.
- H3: Sub-sections under an H2.
2. Provide Context with Alt Text
Alt text describes the purpose of an image for those who cannot see it.
- How: Click any Image block and fill in the Alt text field.
- Be Descriptive: Instead of "image.jpg," use "Students studying in the Branford Price Millar Library."
- Note: If an image is purely decorative (like a divider), you can leave the alt text blank so screen readers skip it.
3. Use Paragraph Blocks for Body Text
Proper paragraph tags (<p>) help assistive technology maintain a logical reading order, especially if the email is saved as a PDF.
- How: Always use the dedicated Paragraph block for your main copy. Avoid using Title blocks for long sentences.
4. Create Order with List Blocks
Manually typing bullets (•) or dashes (-) doesn't tell a screen reader a list exists.
- How: Use the List block for bulleted or numbered information. This generates the correct code (<ul> or <ol>) that devices recognize.
5. Ensure High Color Contrast
Contrast is vital for users with low vision or color blindness. WCAG 2.2 requires a minimum ratio of 4.5:1 for standard text.
6. Make Links "Touch-Friendly"
Users with motor impairments or those on mobile devices need enough space to tap.
- For Buttons: Click the button block. In the settings panel, look for Button Content Padding.
- Ensure the Top/Bottom padding is at least 10px and Left/Right is at least 20px. This creates a physical "hit area" that meets the accessibility standard regardless of the font size.
- For Text Links: Avoid putting two text links immediately next to each other or on consecutive lines without extra spacing.
- The Fix: Increase the Line Height of your paragraph to at least 1.5 in the text settings. This pushes the links apart vertically so they are easier to tap.
- For Menus/Social Icons:
- In the Social Block settings, increase the Icon Spacing or Margin to ensure there is visible "white space" between the icons.
7. Use Descriptive Link Text
Screen reader users often "tab" through links. If every link says "Click Here," they won't know where the links lead.