Accessible Emails USING DIFFERENT COMMUNICATIONS CHANNELS TO MARKET STRATEGICALLY Creating a Discrimination-Free Educational Environment Section 504 of the Rehabilitation Act of 1973 and Title II of the ADA protect individuals from discrimination based on a disability under any educational program or activity that receives funding or in any state government activity. These laws, as well as Section 508, apply to The Texas A&M University System because our programs and activities receive federal funding. Source: The Texas A&M University System course Creating a Discrimination-Free Workplace in TrainTraq. Creating a Discrimination-Free Educational Environment The Texas Commission on Human Rights Act (1983) prohibits discrimination because of race, color, religion, sex, national origin, age, genetic information, and disability. This law, as well as (TAC) §206 and (TAC) §213, apply to The Texas A&M University System because our programs and activities receive state funding. Source: The Texas A&M University System course Creating a Discrimination-Free Workplace in TrainTraq. Communication has changed through the years due to innovation Drawings on walls, stone and other materials Mail / Postal service Telegraph Telephone Radio Television Beginning of recorded history 550 BC 1790s 1890 1920 1946 Graphics, hieroglyphics, text Graphics, text Text Audio Audio Audio, graphics, video Travel to location, local group Delivery to person Delivery to person Device to person Device, local to global Device, local to global Extremely slow Very slow Slow Fast Fast (if you have signal) Fast (if you have signal) Email Bulletin Board Systems Listserv World Wide Web Blogs Social Media (i.e., Friendster) 1966 1978 1986 1990 1999 2002 Text first, later graphics as well as attachments Text and textual (ANSI) graphics first, later graphics Text first, later graphics as well as attachments Audio, graphics, text, video Audio, graphics, text, video Audio, graphics, text, video Device to person or group, local to global Device to person or group, local to global Device to group, local to global Device to group, global Device to group, global Device to group, global Originally slow, but now very fast (also depending on signal) Originally slow, but now very fast (also depending on signal) Originally slow, but now very fast (also depending on signal) Fast (depending on signal) Fast (depending on signal) Fast (depending on signal) *Not a comprehensive listing of communications channels Marketing strategically to convey a message Each channel has its strengths and weaknesses. They should not be used the same way with the same content. They cannot convey the same message or have the same purpose. Not all channels can fit all the content about an announcement or event. For print media (drawings and text on a material), content has to be rearranged depending on the dimensions of the media. Images must be resized, moved, removed, or readjusted for the space. Text must be resized, moved, removed, or rewritten for the space. Print Media comes in many sizes or channels Billboard Poster Flyer Letter Postcard Extremely Large Somewhat Large Medium Small Extremely Small Typically larger width Typically larger height Typically larger height Typically larger height Typically larger width Drive Past Walk Past Walk Past or Delivered (and Hold in Hand) Delivered, Hold in Hand Delivered, Hold in Hand You must come near it You must come near it You must come near it or receive a delivery You can receive a delivery You can receive a delivery Regional Local to regional Local Personal, Intimate Personal Large announcements or events Events Announcements or events Important information or personalized events Announcements or events Smallest amount of text, large font, must be memorable Medium amount of text, large and medium font Medium amount of text, medium and small font Largest amount of text, typically small font Small amount of text, medium and small font *Not a comprehensive listing of print media Print Media or “the Flyer” Print media is used at a physical location. For example, people must walk up to a flyer or hold it in their hands to view it. Print media is static; it does not change based on interactions and has no animated parts (unless through mechanical operations). Print media has a permanent layout; it does not change dimensions, but there is great flexibility in design. Design is only limited by the company printing it and the materials available to print on (i.e., number of colors, dullness to shininess, thickness of fonts). Electronic Media comes in many channels, too Digital Signage Web Email USED TO BE: Large to extremely large NOW: Comes in many sizes USED TO BE: Somewhat large for desktop computers NOW: Comes in many sizes USED TO BE: Somewhat large for desktop computers NOW: Comes in many sizes Drive Past, Walk Past Sitting, Walking Sitting, Walking You must come near it It comes to your device It comes to your device Local Global Personal, Intimate Announcements or events Announcements or events Announcements or events, sometimes personal Smallest amount of text, large font Medium amount of text, large and medium font Medium amount of text, medium and small font Depending on location and device, can have interaction (selectable content that does something). Always has interactive functionality. Always has interactive functionality. *Not a comprehensive listing of electronic media Electronic Media or “the Email” Electronic media is viewable on multiple: Devices Operating Systems Browsers Email Clients Screen Sizes However… Content does not appear the same! Color Devices/clients may show the same colors differently. Colorblind users may not be able to see all colors legibly. Visually impaired users may have their own color set that must overwrite your choices, so they can see the information. Devices/clients may not respect color choices because they are limited to a certain number or only one. Content does not appear the same! Size Join us to celebrate Alissa Elizabeth Mitran Devices/clients display content at different sizes, which can require scrolling or zooming in to view the content. Horizontal scrolling is frustrating for users with motor function disabilities. Text on images do not wrap on any screen. Images of text do not improve legibility by zooming in for the visually impaired because the text is a part of the image, not separate from the image as highlightable (the ability to copy and paste). Content does not appear the same! Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice on May 5th, at 2pm. Light fair to follow. At 521 Milford Road, Teaton, TX RSVP 541-290-4561 Interaction It is impossible to highlight text off an image and paste it into a calendar event. You must type it all out which is a burden for many users with or without impairments or disabilities. If there is information to link to on an image, the image has to be broken into pieces to add specific links, and those images will wrap differently on each device/client. Content does not appear the same! [cid:image001.jpg@04C05A06.045DFC78] Images, in general The blind cannot view images, in general, unless there is alternative text provided. Some devices/clients will not load images at all. This includes clients that do not trust the source of the email or don’t display them by default. Some devices/clients will not load images in areas with low internet signals. If images take too long to download because they are too large, users will not see them because they give up and move on to the next email (sometimes deleting yours). Universal Design: Creating an accessible email For all users and all abilities (e.g., blind, colorblind, deaf, paralyzed) For all devices (e.g., desktop, mobile phone, tablet) For all email clients (e.g., Outlook, Gmail, Hotmail) Why is it important to design for universal usage? 30% Top 10 Email Clients Used from 1.1 Billion Email Opens During February 2015 26% 25% 18% 20% 12% 15% 10% 9% 8% 7% 5% 5% 4% 2% 1% 0% Apple iPhone Gmail Apple iPad Outlook Apple Mail Google Android Outlook.com Yahoo! Mail Windows Live Mail AOL Mail Source: emailclientmarketshare.com Why is it important to design for universal usage? 50% 45% 45% Top 10 Email Clients Used from 1.1 Billion Email Opens During February 2015 40% 28% 35% 30% 19% 25% 20% 15% 10% 5% 0% Mobile Desktop Web-Based Source: emailclientmarketshare.com How to improve your engagement with accessible email Give yourself enough time: Plan ahead! All messages should support a strategy that utilizes each channel appropriately If you are collaborating and have little graphical experience, encourage the designer of your marketing materials to provide you with different content to support the different channels you want to use If you have graphical experience (and the software to edit it), ask for the original document (not a scanned or flat image), so you can organize the content depending on each message you want to convey or focus on How to improve your engagement with accessible email The essentials 1. Subject Line (the front line, before any email is actually read) 2. Links (with appropriate and engaging verbiage, calls-to-action) 3. Text (can be styled and highlightable with the ability to be copied/pasted into another app) 4. Graphics (used in moderation and always with alternative text) 5. Attached Documents (when necessary and appropriate) How to improve your engagement with accessible email Senior Voice Recital Create an engaging subject line Most users will not be able to see the content of your email when they see it in their inbox, so you need to find a way to make them select your email for further viewing. Avoid generic subjects and consider the following from their point of view: Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Why should I care about this? What How makes this stand out or unique? does it benefit me? Who/what is this about? How to improve your engagement with accessible email Senior Voice Recital Avoid using clickbait Clickbait is content that sensationalizes to attract more users to select content they may not normally access, and more times than not, it falsely advertises what the users will actually experience. Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm It ruins trust with your audience discourages viewership increases the chance of your emails being deleted immediately Examples: Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! This politician has had it and restores my faith in humanity The situation looked bleak, but it’s not what you think This student wasn’t going to graduate, but then this happened How to improve your engagement with accessible email Senior Voice Recital Make it easy to add to a calendar You got them to select the email, but if they like the event, can they add it to their calendar? Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Make event info textual. Copy and paste is easier than typing it out. Mobile devices will assist when there appears to be an event and provide links to automatically include some of the content into your calendar. Link text or graphics to the event on the Online Calendar. All the content can be added to someone’s Outlook or mobile device calendar with only a few selections – no typing whatsoever. Why use our Online Calendar System? Extended event details in event description Social media marketing Reminders and event update notifications Quick add to my calendar option to desktop and mobile calendars Potential to add image of poster/flyer Links to registration applications* Links to further information*: agendas, maps, parking waivers, brochures… Potential Tarleton homepage coverage* Potential calendar highlight coverage* Embed a calendar feed specific to your area on your website* * Contact Web Services for assistance and approval of content. How to improve your engagement with accessible email Senior Voice Recital Make it easy to add to a calendar You got them to select the email, but if they like the event, can they add it to their calendar? Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Make event info textual. Copy and paste is easier than typing it out. Mobile devices will assist when there appears to be an event and provide links to automatically include some of the content into your calendar. Link text or graphics to the event on the Online Calendar. All the content can be added to someone’s Outlook or mobile device calendar with only a few selections – no typing whatsoever. How to improve your engagement with accessible email Senior Voice Recital Make link text meaningful Why select that link? Give your audience a reason that doesn’t require reading the text around it to get the context of your link. Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Are they signing up for something? Is it a form? Is it an event listing? A document? About what? Remove ambiguity Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Use a call-to-action Don’t use “more info,” “here,” or other generic words and phrases Remove “actions to select” the link Not every device allows you to “click,” “tap,” “double tap,” “wink,” “blow,” “hit,” or “swipe” to select. Let the user choose. How to improve your engagement with accessible email Senior Voice Recital Make sure links are easy to select They are interested in your content! Let them have at it, but don’t make them work too hard to get at it or they will give up entirely. Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Make links/buttons large enough to select without accidentally selecting a different link/button (Fat Finger Friendly or F3) Do not make someone retype a link, causing an undue burden for your audience If you mention that you have social media, provide the specific links to your social media content – do not make your audience hunt it down Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Never use QR codes in electronic media, only print media A QR code is like a bar code, but you can scan it with a device that has: a camera an app to interpret the QR code internet access available in the location where it is being scanned time to scan the QR code completely for the app to interpret It is essentially a link which can go to a form, a web address, an app, a phone number, an email address or anything else that is linkable. However, you cannot scan a QR code inside an email: Email is typically viewed on a screen that is opposite of where the camera is located to scan it. In an email, use a link instead of a QR code How to improve your engagement with accessible email Senior Voice Recital Textual information can be pretty, too Text is not required to be black in Times New Roman on a white background in 12pt. That’s just one option. Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Change font families (typefaces). Use an email friendly font. These common fonts are available on almost all devices/clients. Avoid frilly, script looking fonts as they are hard to read. Change font sizes. Don’t go less than 12pt. Use in different sizes in moderation; focus on the important pieces. Change colors. Make sure there is a good color contrast. Avoid red/black, low contrast colors (e.g., purple/black), complementary colors (e.g., red/green). Why are frilly, script looking fonts (as well as other fonts) inaccessible? Your eyes constantly scan the text in front of you to determine patterns from symbols to form meaningful relationships, whether you have a low vision disability, a reading disorder, or no impairment at all: Problems recognizing character patterns due to font family (typeface) choice Is it an l or an I or a 1? Is it l or I or 1? Is it l or I or 1? L: Is it a T or an L? L or L: Is it an I or an L? L: Is it a Y or an L? Problems recognizing separate characters due to proximity and font family choice li could look like an uppercase or lowercase U because the letters are close enough together Problems recognizing words putting all the characters together With character location, spacing, and font choice all put together, you can have some confusing, if not embarrassing, results. Sources: webaim.org, uxmovement.com, and www.yousuckatmarketing.com Email Friendly Fonts (PC) Arial Lucida Sans Unicode Arial Black Palatino Linotype Book Antiqua Tahoma Comic Sans MS Times New Roman Trebuchet MS Verdana Symbol Courier New Impact Georgia Wingdings Lucida Console Webdings Email Friendly Fonts (Mac) Arial, Helvetica New York Arial Black, Gadget Palatino, Book Antiqua Comic Sans MS Times Courier New Trebuchet MS Geneva Verdana Impact, Charcoal Symbol Lucida Grande Webdings Monaco Zapf Dingbats How to improve your engagement with accessible email Senior Voice Recital Yes, you can add images; just use them in moderation Keep in mind not all devices/clients (as well as users) will be able to see them, so you need to provide alternative text which will “appear” where the images would have been. Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Keep it simple and to the point. Don’t write a novel. You are limited to about 100 characters of alternative text. Don’t repeat that it is an “image”, “logo”, or “picture of” anything. Keep it within the context of the message. Not every detail is required if it does not amplify the information already given in text. Make sure mood and atmosphere that a visual user sees/feels is also conveyed in the alternative text (i.e., happy about what, proud due to what circumstance). How to improve your engagement with accessible email Senior Voice Recital Some images should not be used If the user is missing any information because it is contained in the image, it may be better to avoid using an image with alternative text at all and use text instead. Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Take advantage of lists. If you have a lot of information that can be organized in lists, use ordered (numbered) or unordered (bulleted) list functionality of your email client. Avoid using punctuation (i.e., *, -, +) to denote a list item as these are interpreted incorrectly by screen readers. Take advantage of tables. If your have a really huge schedule of events that is better in a table, use the table functionality of your email client. Copy and paste from Office documents into the email client, and add or remove color/styles, adjust columns/rows, and remove unwanted items/table cells where necessary. How to improve your engagement with accessible email Senior Voice Recital Some images should not be used Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Light fair to follow. 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! Don’t repeat image text content already in the text of the email message. Your audience may think you are insulting their intelligence by repeating yourself as though they “didn’t get it the first time.” Repetition looks unprofessional. Universal design is relaying a message once by providing all the necessary components to look seamless. If it has more than 200 characters worth of text, don’t include the full image. Crop the image to show main theme or idea. Remove extra text on the image that will be (and should be) textual in the message. When images are used: always, always, always provide alternative text! How to improve your engagement with accessible email Senior Voice Recital Add attachments to your email only when appropriate Join us to celebrate Alissa Elizabeth Mitran as she performs her senior recital in voice May 5th, at 2pm Do add an attachment if they need to fill out a form they need to print something out they are being asked to promote it (physically post it) to others in their area Do not add an attachment if the file is incredibly large (10 MB is our limit, but it should not be abused – ideally, don’t go over 1 MB) Light fair to follow. the information can be found or linked to on the Tarleton website 521 Milford Road, Teaton, TX RSVP 541-290-4561 Add to your calendar! it does not provide further information than the main email content it is not in a compatible file type (e.g., Adobe Acrobat is crossbrowser/device compatible) Good example of an accessible email Engaging subject line Text is highlightable (can be copied/pasted into a calendar) Uses various colors and font sizes in moderation Provides links Note: Do not use the web address as the text for the link as each letter is read by the screen reader (they don’t always know where they are going based on the address) Engaging small image Image has appropriate alternative text “Spring Job Fair” Mentions the sponsors Good example of an accessible email Engaging subject line Text is highlightable (can be copied/pasted into a calendar) Uses various colors, fonts and font sizes in moderation Note: Be careful about formatting. The unordered (bulleted) list here is slightly off depending on screen size due to over-aligning for a particular screen size. Engaging small image Image has appropriate alternative text “Job search” Good example of an accessible email Text is highlightable (can be copied/pasted into a calendar) Uses various colors, fonts and font sizes in moderation Provides links Note: If you have multiple events linked to a calendar (repeated text for links), find a way to differentiate them (i.e., “Mark Summer Camp Job Fair in your calendar!”) Engaging small image Image has appropriate alternative text “This week's events & opportunities” Contact Web Services for the official Tarleton email templates One column email template Two column email template More information about accessibility of electronic & information resources www.tarleton.edu/accessibility *Email follows the same accessibility standards as websites. Electronic & information resources accessibility coordinator EIR (Electronic & Information Resources) Accessibility Coordinator Karole Schroeder 254-968-1819 schroeder@tarleton.edu Electronic & information resources accessibility coordinator duties All need to be reviewed for accessibility compliance: Website, Email, TexanSync, Mobile Apps Web Applications and Software: Software Applications: Microsoft Office and Outlook, Adobe Creative Suite Operating Systems: Windows, Mac, Android Telecommunications: Phones Videos/Multimedia: YouTube, Self Contained: Copy/Fax Machines, Laboratory Equipment Desktop/Portable/Mobile Computers: iPad, Microsoft Surface Vimeo *Not a comprehensive listing of electronic & information resources