Write Accessible Emails Training Video and Transcript

Hi, everyone. Welcome to Write Accessible Emails, one of our several self-paced courses on digital accessibility. I'm Kristina England, the Digital Accessibility Specialist for the President's Office, and I'll be conducting this training.

During today's session, we're going to go over several topics. Why accessible emails matter. Typeface, text formatting, and descriptive links. Headings and tables. Images and animations. Attachments and videos.

We'll also wrap up by going over Outlook's built-in editor, which will offer you spelling corrections as well as plain language tips. And we'll go over the accessibility checker to confirm the accessibility of your email. Finally, we'll wrap up by going over how to leverage the email accessibility checklist.

Let's start off with why accessible emails matter. 1 in 4 people in America identify as having a disability. That's 26% of Americans per the latest report by the CDC. When you think about that number, how many emails you send out and how many people you email on a regular basis, someone in your To field needs an accessible email, and that may even be you.

Disability is a spectrum. There are many non-apparent disabilities, including color blindness, dyslexia, low vision, motion sensitivity, and many more. And no one should need to disclose their disability to get an accessible email. Accessible emails ensure anyone using assistive technology, including screen readers, high contrast mode, text-to-speech, reduced motion settings, et cetera, can receive that email in an equally effective way.

Remember that email is a vital form of communication. When you make it barrier free, though, you may not get a response, you will be making someone else's day. Think of digital accessibility as a random act of kindness. You may never get a response, but you are creating a positive ripple effect.

Now let's talk about typefaces, text formatting, and descriptive links. When selecting a typeface, always use a readable and familiar typeface. There is no such thing as one best typeface or font. Font readability relies on the typeface being familiar and easy to parse. Familiar typefaces can fall into either serif or sans serif fonts.

In addition, there is not one typeface that will be optimal for all users with dyslexia, regardless of how much third-party services market the dyslexia font. Recommended familiar fonts include Arial, Georgia, Times New Roman, and Verdana. You can also compare the pros and cons of each font through a guide to understanding what makes a typeface accessible. This guide will be included in your Learning Path.

Let's go over some text formatting guidelines to keep in mind while writing your email. Always use bold to emphasize your content, not italics or underlines. Italics is harder to read and underlines are associated with hyperlinks. So again, when trying to emphasize content that's important in the email, use the bold functionality.

Also keep contents left-aligned. Centered text takes longer to read. Use a font size of 12 points or larger. Use a font color that meets color contrast guidelines when paired with your email background color. I use WebAIM's Color Contrast Checker to verify that, and I'll include that in the Learning Path so that you can save the contrast checker as a favorite. Also use the built-in bulleted and numbered lists to group related items.

In the next section, we're going to talk about headings and tables. Heading structure matters. When we're writing an email that includes sections, we should always use the built-in heading styles. Everyone in the blind, deafblind, and low vision community that uses a screen reader benefits from an accurate heading structure as it conveys critical parent-child information about the content and allows screen reader users to use a keyboard shortcut to scan an email for topics of interest.

So what is the correct heading structure for emails? The main subject of the email should always be assigned as a Heading 1. That would be also the email title. Thus, any sections, topic sections within the email should then be assigned a Heading 2. If a topic section includes sub-sections, those sub-sections should be Heading 3s. This creates a hierarchy within the email that allows for that scanning of the content.

Let's go over how to assign headings to email topics and sub-topics. The first demo I'll walk you through is how to assign headings via the Windows Outlook Desktop Client. I then will go over how to do this if you are a Mac user. It should be noted that unfortunately the Mac Desktop Client for Outlook does not support headings, so the best place to write accessible emails on a Mac computer is Outlook on the Web.

Let's walk through how to assign a heading. What you're going to do is highlight the text that you want to make into a heading. In this case, I have an email open and I have the text at the top of the email that says "September is National Guide Dog Month." This is going to be the title of my email, so I'm going to select all the text for that and actually select it from September up until the end of month.

And I'm going to go up, and what you want to make sure of is in Outlook that you select the Format Text menu item in the Outlook menu. When you do that, there will be a Styles option. Go ahead and select the Styles option. And what you want to do is look for Heading 1.

Assign the Heading 1 to the text. Keep in mind, a Heading 1 should only be used for the title of the email. Any sub-sections within the email would be a Heading 2. You would assign them the same way by going to Format Text and to Styles. And that is how you assign a heading in Outlook.

Now I'll go over how to assign headings via Outlook on the Web. This can be used by Mac users as well as anyone on a Windows computer that prefers Outlook on the Web.

Outlook on the Web, what you want to do is go ahead and highlight what you want to make into a heading. And then once you've done highlighting it, and in this case, we've highlighted "September is National Guide Dog Month," what you want to do is you want to go up into the Outlook menu on Outlook on the Web, select Format Text, if it's not already selected, and you want to look for the Styles icon as a sub-menu item.

And that is for screen reader users, it's labeled as Styles. And for folks that are sighted, you can look for an A icon with a pencil next to it. So you want to look for the A with a pencil next to it. Go ahead and select that option.

And when you select that option, a sub-menu appears for Styles and you get the chance to select between Normal, Heading 1, Heading 2, and Heading 3. And you're going to go ahead because this is the title of the email, you're going to select Heading 1. And that is it for Outlook on the Web and how to assign headings.

Now that we've talked about headings, let's talk about tables in Microsoft Outlook. You should never use tables in Microsoft Outlook. They are not accessible, so they cannot deliver data in an accessible way to assistive technology users. Instead, you should attach an accessible spreadsheet to the email.

In addition, never use tables for design purposes, including to style email signatures. Users of screen reader technology will not get the structural information needed to understand the content in the table. Tables are also not mobile responsive, so they cannot be resized by the low vision community, whether they're using zoom or magnification tools.

Our next topic is image best practices. The first image best practice to keep in mind is to never use an image-only email. This is when you design a flyer and stick it in your email as your content. Image-only emails are often done to draw attention to content and to provide a specific design to that content, but that image-only email cannot be made accessible and can create multiple issues, including no ability to convey the complex content structure to screen reader users via alt text.

An image-only email prevents epilepsy, vestibular disorder, and motion sensitivity community members from using high contrast or dark mode settings. It also provides no ability to convey the information, to text-to-speech software that the low vision and neurodivergent community may use. Neurodivergent includes ADHD, Autism, and Dyslexia. Lastly, an image-based email will create barriers for anyone in the low vision community using magnification tools or browser zoom. If you want to create a flashy email, use an email marketing platform instead for an accessible and mobile responsive design that's built off of CSS and HTML.

When using images in your emails, always add alternative text. People often include complimentary images alongside email text, whether photos of an employee cookout or an image of recent analytical data. Alternative text provides the blind, deafblind, and low vision community with equal access to the image. The alt text should always convey what a person would miss by not being able to see the image.

Here is an example of good alt text. I have an image on the left that is graduates celebrating at commencement. I want to be as detailed as possible to convey the overall emotion and tone going on in this image.

"Three graduates celebrate outdoors on a sunny day. They are dressed in black graduation caps and gowns. The graduate in the center has both arms raised in triumph and is smiling widely. The graduate on the left is clapping and smiling enthusiastically, while the graduate on the right appears to be cheering and holds a diploma in her right hand. Behind them is a backdrop of trees and other graduates in similar attire. The sky is bright blue with wispy clouds."

Now let's walk through how to add alt text to an image in Outlook. I'm now going to show you how to add alt text to an image. So I have an image within my email where it is a dark-skinned man sitting at a desk and he is in a wheelchair. He has his guide dog to the right of him standing and looking up at him. He also is looking at his computer and his computer is displaying a Zoom screen with four colleagues on it.

So what I'm going to do is I'm going to go ahead and select that image. And what I do in Outlook, a Picture Format menu item appears in the top menu of the Outlook email. I'm going to select Picture Format. Under Picture Format, I have various options. In this case, I want to select the Alt Text menu item.

When I do that, a pane appears to the right, and in that pane, I'm just going to move my zoom screen for a second. In that pane, I have to enter in alt text. There is the ability to generate alt text. However, AI alt text is not usually sufficient. I'm going to go ahead and click that button just to see what it provides.

And what it provides is just a quick statement. That statement says, "a cartoon character in a wheelchair." That is not sufficient enough for what we want to convey. In fact, this isn't an email about "September is National Guide Dog Month" and the guide dog isn't even identified in the automated or in the autogenerated alt text.

So let me go ahead and add the alt text that I came up with for this image. I'm going to actually paste it in just to save some time. And now, if I scroll up on this, it says, "a dark-skinned man in a wheelchair sits at a desk with his laptop open. He talks to four colleagues who are seen on a Zoom screen. His colleagues vary in ethnicity. In addition, his guide dog stands on the other side of the desk."

So that's the alt text I've written for this image. And once I add it, I don't have to click save or anything. I just close the alt text pane with the X button or the Close button. I can go back and just check that the alt text has carried into there, just in case.

And what I can do is I can either right-click it to look and view the alt text or I can just click it and go back to that alt text item in Picture format. And there we have the alt text that I wrote. And so that is how you add alt text to an image in Outlook.

If you are designing graphics for your emails, such as a header image or icons, you should always keep color contrast in mind. The Web Content Accessibility Guidelines require a contrast ratio of at least 3 to 1 for graphics and user interface components. You can test the color contrast of your graphics using the WebAIM Contrast Checker, which will be available via the Learning Path for this course.

I also have an example screenshot of the WebAIM Checker where I've done a test of a foreground color and a background color. The foreground color is a light pink. The background color is a maroon. The contrast ratio is 3.51, which means it meets the color contrast guidelines for graphics.

The last image best practice I want to go over is animations. Do not use animations in your emails. Using animations and emails can actually do unintentional harm to the epilepsy, vestibular disorder, and motion sensitivity community. You could accidentally trigger a seizure, migraine, vertigo, or motion sickness based on the person's diagnosis.

At this time, unfortunately, Outlook does not have full support for reduced motion in emails, which actually freezes animations for the vestibular epilepsy and motion sensitivity community. That being said, there is no way to deliver an animation without potentially causing harm. Even when it does respect reduced motion settings, the animation is often delivered in a broken image that may make the recipient think your email design is actually broken.

Now let's go over attachments and videos. When attaching files to your email, always make sure they're accessible. They should meet the document accessibility guidelines. These guidelines are covered in the Intro to Microsoft Files Accessibility Course that you should complete if you haven't completed already.

Remember that the best format to keep documents in is their native format, such as Powerpoint, Word, or Excel. This allows users to make needed customizations, such as changing the font size or the typeface. Avoid using PDFs unless they are necessary, and when using a PDF, always ensure the PDF is accessible.

If you plan to include a video with your email, you should also ensure the video is accessible. If linking to an internal video, that video should meet the video accessibility guidelines covered in our Accessible Video Checklist, which will be included in this Learning Path. For a thorough overview of these requirements, you should also complete the Introduction to Video Accessibility Course. You should also use the same accessibility checklist to confirm the accessibility of any third-party videos that you will share in any email communication to employees, students, or the public.

For our last topic in today's how to write accessible emails course, we're going to go over the built-in Editor and Accessibility Checker. You can use Microsoft's Editor to ensure your content is clear and concise. Plain language is important for the neurodivergent community. Microsoft Editor is conveniently integrated into many versions of Outlook, including Outlook on the Web and the Outlook desktop applications for both Mac and Windows computer.

Editor provides suggested refinements for clarity, conciseness, inclusive language, and more. You can use the Editor Settings panel to customize your Editor preferences, including the proofreading language. I have a screenshot here that shows the Editor open and it shows total suggestions are 1. Categories include professional writing, spelling, grammar, clarity, conciseness, and formality.

The category that's flagged with a one is actually grammar. So we would go ahead and expand that to see what we needed to adjust from a grammar perspective.

You can also run the Accessibility Checker on your email to confirm you have no major accessibility issues. It should be noted that the Accessibility Checker won't find all issues with your email as it can only find things it can automatically detect. That's why we'll be sharing a checklist with you to ensure you're following accessibility best practices with email, whether or not the checker can pick those up.

So in order to run the Accessibility Checker, you would go to the Review tab in Outlook and you would select Check Accessibility to open the Accessibility pane on the right. You can then inspect your results and address any issues that you find.

Before we wrap up this training, I wanted to go over the Email Accessibility Checklist. Our recommendation is once you've complete this training, you save the Email Accessibility Checklist as a favorite. It's housed on our Inclusive by Design website with our other checklists. There is a lot to learn about email accessibility, and it can be easy to forget a step.

We've created the interactive checklist so you can reference it when writing an email. You'll be able to access the checklist through LinkedIn Learning now that you've completed this course. I'd like to thank you for attending the Write Accessible Emails course and feel free to contact me if you have any questions. Thank you.