Check these 9 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 nine 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: Select 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: Avoid using “image of…” or “picture of…” in the alt text, as screen readers already inform the user when they encounter an image.
- 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 identify main bodies of text.
- 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.
- How: Emma does not auto-check this. Use a tool like the WebAIM Color Contrast Checker to test your text against your background colors. Check your link colors at the WebAIM Link Contrast Checker.
- Pro Tip: PSU's green (HEX #6d8d24) is tricky but it is accessible on a white background if the font is at least 18 pt and bold!
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.
8. Use Images & Graphics for "Vibes"; Body Text for Info
Refrain from using images or graphics with text whenever possible, or if unavoidable, ensure image has minimal text such as just the event title. All the information should be in the Body Text and not the image.
- Exception: Logos that contain text, such as the PSU logo.
- How: If your image does contain text, it should be included in Alt Text exactly as it appears in the image.
Do not use flyers as your entire story! They are invisible to screen readers and not searchable.
9. Typography: Size Matters
- Use a minimum Font Size of 16 in MyEmma.
- Use a sans-serif font like MyEmma’s default Global Font or Verdana instead of serif fonts like Times New Roman.
- What is a serif? It’s the little decorative stroke or “foot” on a letter, as seen in Times New Roman and Georgia fonts.