Versions Compared

Version Old Version 7 New Version Current
Changes made by

Denise Delgado

Denise Delgado

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

Coming soon…

...

Websites designed with accessibility in mind tend to be more user-friendly for all. Features like video captions benefit users watching in noisy environments, making content accessible and convenient for everyone.

...

📧 Building Accessible Emails in HubSpot

  • Avoid All-Image Emails

    • Limit the use of decorative graphics and images. Rely on text-based content rather than embedding all content in an image, such as a flyer. This approach avoids issues for users whose email clients block images or use screen readers.

    • Alt Text for Images

    Alt text is a short description that’s
    Expand
    Expand
    titleDesigning Accessible Email Campaigns
    titlePublic Website Accessibility

    Accessibility is built into the design and structure of all of our public Maricopa Community Colleges websites. The District subscribes to SiteImprove, which scans these sites for accessibility and quality assurance issues (spelling, broken links, plain language).

    For all of our public-facing websites, we have ensured that our Drupal Common Framework meets WCAG 2.1 AA compliance. You can read more about Drupal’s approach to accessibility here.

    Expand
    titleDigital Document Accessibility

    All documents created within Maricopa Community Colleges must align with WCAG2.1 AA standards, which means that accessibility is not the responsibility of any one department—it is everyone’s responsibility.

    .pdfs by nature don't work with screen readers, so they provide a bad user experience for users with vision issues. See an example here.

    It is your responsibility to ensure that any .pdfs you would like to post to the web meet accessibility standards and are ADA-compliant.

    Expand
    titleEnsuring Digital Document Accessibility

    In order to check a .pdf for digital accessibility, you will first need to download Adobe Acrobat Pro, which Maricopa Community Colleges provides to all employees.

    Once you have Adobe Acrobat Pro installed, open your .pdf using this software and do the following:

    1. Select the Tools tab at the top of the document

    2. Choose Accessibility from the right-hand menu

    3. You can now use the Accessibility Check tool to scan your document for accessibility (use Select All, then Start Checking)

    4. Once this is complete, you can now view the Accessibility Report, which will detail any accessibility issues found in your document

    5. For any status item marked Needs manual check or Failed, visit the associated Rule Name link for guidelines on remediating these issues

    You can visit Adobe's complete guide on accessibility here.

    Maricopa Community Colleges also works with Crawford Technologies, a third-party vendor specializing in document accessibility for the web. Crawford will provide remediation services at around $8/page. If you decide to go this route, you can reach out directly to das-quotes@crawfordtech.com (please cc matthew.rodgers@domail.maricopa.edu and jharrison@crawfordtech.com).

    Composing an Email - Body Content

    📖 Design for Readability

    Designing for readability is key to writing good digital content, including emails.

    Best Practices:

    • Choose accessible fonts like Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans, and Sans serif.

    • Use a minimum of 12px for body text and 18px for headlines, and ensure readable line spacing and font size to accommodate all screen sizes.

    • Left-aligned text is easier to read, especially for users with dyslexia, as it maintains consistent word spacing.

    • Break up text into short paragraphs.

    • Keep the email copy short and easy to read. Break down long sentences (less than 80 characters) for better readability. This will help users with cognitive disabilities understand your message.

    📄 Attachments

    Documents can be challenging to access and remediate. Before attaching a document, consider if:

    • this is the best way to share information.

    • the content be added directly to the body of the email.

    If an attachment is necessary, follow best practices:

    • Use headings for document structure.

    • Include alternative text for images.

    • Be mindful of color contrast to ensure readability.

    • Confirm the documents or other attachments in your email are accessible and that the files have descriptive names. Verify all document properties and content for accessibility before attaching them to your email.

    ▶️ Video and Audio

    When you embed a video or audio player in an email, add accurate

    • Add accurate captions for all videos.

    • Provide transcripts for audio content.

    • Ensure media controls (e.g., play, pause, stop) are keyboard accessible.

    📅 Event Flyers

    If you add an event flyer to an email, ensure that any text in the image is repeated in the email body text or the alt text.

    Best practices:

    • Repeat all text within the image in the email body, such as event details (e.g., date, time, location).

    • Include alt text for the image.

    📹 Animation

    Avoid auto-playing animations and videos and distracting animations.

    🖊️ Signatures

    When adding signatures, use actual text for name and contact information to ensure greater accessibility.

    Best practices:

    • Use actual text for names and contact information in email signatures.

    • Including a logo (e.g., college or organization shield) is fine, but add alt text to describe the image for accessibility.

    Ensure the visible link text describes the link's purpose and/or destination.

    Best practices:

    • Use clickable elements such as buttons with descriptive CTAs such as “Read our Guide" instead of "Click here."

    • If a link leads to a non-web page document such as a PDF or Word document), include the format in the link text.

    (big grin) Emojis

    Emojis can enhance communication, but avoid overusing or relying on them to convey meaning.

    Best practices:

    • Add emojis at the end of a message, not between words.

    • Avoid replacing words with emojis.

    🗨️ Layout

    Keep the layout simple, using a single-column layout to enhance readability, reduce sensory overload, and ensure device compatibility.

    Best practices:

    • Use color combinations that are easily readable to low-vision users and users with difficulty differentiating color.

    • Avoid using background effects with images or patterns that lower the text-to-background contrast.

    Expand
    titleAdding Alt Text for Images in Emails

    Alt text is a short description displayed in place of an image when content is read by a screen reader, or images are being blocked. Include descriptive and concise alt text for all images, enabling screen readers to describe them to visually impaired users.

  • Keep Layout Simple

    • Use a single-column layout to enhance readability, reduce sensory overload, and ensure device compatibility.

    • Use color combinations that are easily readable to low-vision users and users who have difficulty differentiating color. Avoid using background effects with images or patterns that lower the text-to-background contrast.

  • Left-Align Text

    • Left-aligned text is easier to read, especially for users with dyslexia, as it maintains consistent word spacing.

  • Text Formatting

    • Choose accessible fonts, such as OpenDyslexic, Comic Sans, and Sans serif options (including Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, and Open Sans).

    • Use a minimum 16px for body text and 18px for headlines, and ensure readable line spacing and font size to accommodate all screen sizes.

    • Adequate Color Contrast

    The email loses all meaning without alt text when the image does not load.

    Best Practices

    • Alt text should be concise and descriptive.

    • Avoid duplicating text already present in the email body.

    • Limit the use of decorative graphics and images. Rely on text-based content rather than embedding all content in an image, such as a flyer. This approach avoids issues for users whose email clients block images or use screen readers.

    • If an image contains text (e.g., banners or event flyers), ensure the text is also included in the email body or alt text.

    How to Add Alt Text in Emails

    1. Open the Email:

      • Navigate to Marketing > Email in your HubSpot account.

      • Open an existing email or create a new one using the Drag-and-Drop Editor.

    2. Add or Select the Image:

      • Click on the image module where you want to add alt text.

      • If the image hasn’t been uploaded, click Replace to add an image.

    3. Add Alt Text:

      • Find the Alt text field in the Image Settings panel on the right.

      • Enter a concise and descriptive alt text that conveys the purpose of the image.

        • Example: “Student holding books at Maricopa Community College.”

    4. Save Your Changes:

      • Once added, click Done or Save to ensure the alt text is applied.

    Expand
    titleColor Contrast Accessibility

    Ensuring proper color contrast in email design is crucial for accessibility, as it enhances readability for all users, including those with visual impairments. The Web Content Accessibility Guidelines (WCAG) provide specific standards to help designers achieve this.

    • WCAG recommends using a contrast ratio of at least 4.5:1 for standard text (and 3:1 for larger text) to assist those with visual impairments.

    • Provide enough white space around elements to prevent crowding, helping users visually differentiate and navigate content easily.

    • Hyperlinks and Attachcments

      • Ensure the visible link text describes the link's purpose and/or destination, using clickable elements such as buttons with descriptive CTAs such as “Read our Guide" instead of "Click here."

      • Confirm the documents or other attachments in your email are accessible and that the files have descriptive names. Verify all document properties and content for accessibility before attaching them to your email.

    • Readability

      Keep the email copy short and easy to scan. Break down long sentences (less than 80 characters) for better readability. This will help users with cognitive disabilities or those in a hurry understand your message quickly

    Tips for Implementing Color Contrast in Emails:

    🔤 Text and Background Colors:

    Avoid medium-to-light greys on white backgrounds or mid-toned, highly saturated colors, and foreground and background colors similar in luminance. 

    Best Practices:

    • Use lighter colors on light backgrounds or darker colors on dark backgrounds only for headings, where larger font sizes compensate for lower contrast.

    • Ensure sufficient contrast between text and background to improve readability.

    🟧 Button Colors

    Use accessible contrast ratios for all button states: hover, focus, and active. To simplify testing, limit button color variations across states.

    Best Practices:

    • Increasing the button size or font size.

    • Avoid relying solely on color or opacity changes.

    🔗 Link Colors

    Ensure link colors in both their default and hover/focus states meet contrast guidelines:

    • Against the background.

    • Compared to the surrounding text for a clear distinction.

    🖌️ Beyond Colors

    To emphasize content:

    • Use underlines, highlights, bolding, or italics for links.

    • Add icons (e.g., arrows, checkmarks, or stars) to buttons.

    • Include meaningful graphical indicators or emojis to supplement text where appropriate.

    🖼️ Graphics and Imagery

    • Keep visuals clean and uncluttered using a limited, WCAG-compliant color palette.

    • Avoid placing text over busy images.

    • Always provide alt text for images, as many email clients may not initially render them.

    🌑 Dark Mode Emails

    Dark mode is growing in popularity on desktop and mobile. Some email clients automatically invert colors, which can create readability issues.

    Best Practices:

    • Test emails in dark mode across multiple email clients to identify display issues.

    • Pay attention to:

      • Text and background contrasts.

      • Button contrasts in both light and dark modes.

    ...

    📚 Digital Accessibility Courses

    ...