Digital Accessibility For Marketers: Email, Social Content & SEO

digital-accessibility-for-marketers-part-3-email-social-content_seo

Digital Accessibility For Marketers: Email, Social Content &amp; SEO 

[[p]]A marketer&rsquo;s job is more than just maintaining a user-friendly website. Marketing professionals also use various strategies and channels to acquire website traffic. It doesn&rsquo;t matter if you have the most amazing site on the planet&mdash;if no one visits it, you may as well have one of those circa 1997 Angelfire sites (remember them?) for all that it matters.[[/p]]

[[p]]This series of three articles is intended to introduce you to some foundational practices you can start implementing immediately to help make your digital content more accessible.&nbsp;[[/p]]

[[p]]Our previous post on [[a href="https://digitalmarketinginstitute.com/blog/digital-accessibility-for-marketers-part-2-user-experience-websites" target="_blank"]]Digital Accessibility for User Experience &amp; Websites[[/a]] dug&nbsp;into website marketing features and techniques; this post will go over external channels and mediums as well as how to test them, starting with email. You can also have a look at the first of this three-part series for an [[a href="https://digitalmarketinginstitute.com/blog/digital-accessibility-what-marketers-need-to-know" target="_blank"]]overview of accessbility issues[[/a]].&nbsp;[[/p]]

[[p]]Email marketing is one of the most critical tools in a marketer&rsquo;s toolkit. Companies use email for transactional (think, order confirmations) and promotional purposes, as well as for customer support. You&rsquo;d be hard-pressed to find a digitally-savvy company today that doesn&rsquo;t take advantage of its many benefits.[[/p]]

[[p]]Yet though virtually all organizations use email to communicate with customers, clients, and prospects, not all of them ensure the emails they send out are accessible.[[/p]]

[[p]]If your company sends out plain text emails, chances are they&rsquo;re accessible. If your link text is not descriptive (see the&nbsp;[[a href="https://www.tpgi.com/accessibility-for-marketers-part-ii-user-experience-websites-and-third-party-integrations/" target="_blank"]]previous post[[/a]]&nbsp;for more information on this) it may be slightly harder for an individual with a disability to get the gist of the message, it&rsquo;s not an impossible barrier.[[/p]]

[[p]]The problem is, most marketers&nbsp;[[em]]love[[/em]]&nbsp;HTML emails. And what&rsquo;s not to love? You can style them to match your brand, fill them with glorious images and eye-catching GIFs, and create a more attractive email than what you&rsquo;d be able to achieve with a vanilla plain-text email. In addition, now that third-party cookies are becoming a thing of the past, email is fast seeing a resurgence as a [[a href="https://digitalmarketinginstitute.com/blog/the-next-big-digital-marketing-trends" target="_blank"]]big digital marketing trend[[/a]].[[/p]]

[[p]]That&rsquo;s not the issue here. The issue is that when you start embellishing your emails and you don&rsquo;t take accessibility into account, some users may not be able get a comprehensive understanding (or worst case, not be able to understand any of it).[[/p]]

[[p]]HTML emails are similar to webpages in the sense that they use header and image tags and styling to render in an email platform. Plain-text emails are just that: plain text. In order for HTML emails to be accessible, you need to follow the same guidelines as you would for websites.[[/p]]

[[p]]Most HTML emails are structured using&nbsp;[[a href="https://www.w3schools.com/tags/tag_table.asp" target="_blank"]]table tags[[/a]]&nbsp;because they offered the most consistent look for emails viewed in multiple email clients. But the table tag was not actually intended to be used in this way; like many other web-design techniques, web designers hijacked them for their own purposes. This poses a problem for screen reader users, however, as a screen reader will still read the content inside tables as individual cells, making for a disjointed user experience.[[/p]]

[[p]]However, you can circumvent that by adding a small snippet of code to your HTML. Simply add&nbsp;[[em]]role=&ldquo;presentation&rdquo;[[/em]]&nbsp;to alert these users that these are presentation tables, not a data table.[[/p]]

[[p]]The&nbsp;presentation&nbsp;role hides the table structure from screen readers while leaving the content inside the table unaffected. To a screen reader user, it will appear as if there were no table to begin with.[[/p]]

[[p]]Just because you&rsquo;re creating an email doesn&rsquo;t mean rules for orderly code go out the window. Ensure your headers are used correctly (e.g., use the H1 for the title, H2/H3 for sub-headers, etc.) so everyone, regardless of their visual abilities, will be able to get the gist of your content in a logical reading order. Take advantage of title tags here too, to provide additional context.[[/p]]

[[p]]If your email client requires a user to click to download images, you may have experienced the following: You open an email with lots of blank squares and only bits of text to explain what&rsquo;s going on. As soon as you click &ldquo;Download images&rdquo; and the visuals appear, the puzzle pieces fall into place, but until that moment, you&rsquo;re utterly confused.[[/p]]

[[p]]Unfortunately, this will be a daily (or hourly) experience for screen reader users if the marketers neglect to include alt text for the visuals. So do them a favor and include it for email images. For decorative images, use the&nbsp;empty alt attribute.[[/p]]

[[p]]As&nbsp;people are increasingly reading their emails on their mobile devices, it has become more critical to design with this consideration in mind. Conveniently, guidelines for a better mobile experience coincide with accessibility. For example:[[/p]]

[[ul]]
	[[li]]Aim to keep your text above 14px font &ndash; if people can&rsquo;t read your message on mobile, they won&rsquo;t read it at all[[/li]]
	[[li]]Keep your&nbsp;[[a href="https://www.tpgi.com/color-contrast-checker/"]]color contrast[[/a]]&nbsp;to accepted guidelines, which makes it easier for people with all visual abilities to consume your content[[/li]]
	[[li]]Avoid center-aligned paragraphs (much harder to read, especially on a small device)[[/li]]
	[[li]]Make link text informative and short[[/li]]
[[/ul]]

[[p]]Multimedia like videos and podcasts are great assets for marketers to help increase brand awareness, generate product interest, and connect with their target audience. The good news is that a) it&rsquo;s pretty easy to make content like this accessible, and b) when you make it accessible, it can improve the experience for everyone.[[/p]]

[[p]]A visually impaired person will not be able to fully see what&rsquo;s happening on the screen, whereas someone with hearing challenges won&rsquo;t be able to hear the dialogue. You can add captions to accommodate deaf viewers or those with poor hearing. YouTube will automatically generate captions, but they&rsquo;re not the best quality&mdash;it&rsquo;s usually better to splurge on a&nbsp;captioning service&nbsp;if it&rsquo;s a long video or manually correct the auto-generated captions if it&rsquo;s short. One nice benefit of captioning is that it can help people who can see perfectly. Have you ever been in a waiting room or an airport and wished you could hear what people on a muted TV were saying? Or maybe a friend posts a video on social media you&rsquo;re dying to watch, but you&rsquo;re in a public place without headphones. Captioning solves both these problems and makes the content accessible to people with visual disabilities.[[/p]]

[[p]]Visually impaired people will be able to hear the dialogue but may miss out on key areas of a video if there is no narration for instances where no one is talking. That&rsquo;s where audio descriptions come in handy. Audio descriptions are a narration of what is happening on screen. Check the video below for an example:[[/p]]

[[p]]Video not playing?&nbsp;[[a href="https://youtu.be/Od5fBjGRi24" target="_blank"]]View it at YouTube[[/a]].[[/p]]

[[p]]When Netflix launched audio descriptions they were such a hit they decided to&nbsp;[[a href="https://variety.com/2020/digital/news/netflix-audio-only-option-mobile-1234864337/" target="_blank"]]test out an audio-only mode[[/a]]&nbsp;that would allow users to save on data usage while bingeing on the go.[[/p]]

[[p]]Transcripts are very helpful for people with all kinds of disabilities. Screen reader users and those with hearing difficulties can zip through them without having to go through the entire video (a feature people without disabilities can take advantage of this as well!).[[/p]]

[[p]]Some assets are entirely audio-based. A podcast, for example, would be entirely useless to someone who was unable to hear it; a transcript makes it accessible. The DMI provides transcripts for every podcast, like this episode on [[a href="https://digitalmarketinginstitute.com/resources/podcasts/making-live-theatre-work-online-podcast-47-creation-theatre" target="_blank"]]Making Live Theater Work Online[[/a]].[[/p]]

[[p]]The easiest way to add a transcript to your site is as a downloadable text file&nbsp;and if you also display the text on the page that will help your SEO efforts[[/p]]

[[p]]Inclusivity isn&rsquo;t the only reason you should ensure your PDF is accessible; it&rsquo;s also beneficial for SEO. If a screen reader can read it, a web crawler can crawl it, sending valuable signals back to Google about your website content.[[/p]]

[[p]]Some software is better equipped to convert documents to accessible PDFs than others. Microsoft has been particularly mindful of accessibility, whereas other companies have deprioritized it, and it shows in the level of effort required to create accessible PDFs.[[/p]]

[[p]]Microsoft Word has a&nbsp;[[strong]]Create PDF[[/strong]]&nbsp;option under its&nbsp;[[strong]]Acrobat[[/strong]]&nbsp;menu header; this will automatically convert your file into an accessible PDF. You can use the same option for converting PowerPoint presentations into PDFs. (Note that you should&nbsp;[[a href="http://support.microsoft.com/en-us/office/add-alternative-text-to-a-shape-picture-chart-smartart-graphic-or-other-object-44989b2a-903c-4d9a-b742-6a75b451c669" target="_blank"]]always add alt text to images[[/a]]&nbsp;before converting your file to a PDF.) Use the native&nbsp;[[strong]]Accessibility Checker[[/strong]]&nbsp;(located under the&nbsp;[[strong]]Review[[/strong]]&nbsp;menu item) before transforming your files into PDFs.[[/p]]

[[p]]Converting other file formats to accessible PDFs require a little more effort. For example, design files (like those created on Adobe software) will&nbsp;[[a href="https://www.adobe.com/content/dam/acom/en/products/indesign/pdfs/creating-accessible-pdf-documentw-with-adobe-indesign-cs6-v3.pdf" target="_blank"]]necessitate some manipulation[[/a]]&nbsp;before and after you&rsquo;ve transformed the file into a PDF.[[/p]]

[[p]]Adobe Acrobat Pro has a native accessibility checker function that will help surface some errors, but the work needed to complete the process using the&nbsp;[[a href="https://helpx.adobe.com/acrobat/using/accessibility-features-pdfs.html#:~:text=Accessibility%20features%20in%20Acrobat%2C%20Acrobat,tends%20to%20benefit%20all%20users." target="_blank"]]Acrobat Accessibility features[[/a]]&nbsp;can be challenging and is best left to the pros.[[/p]]

[[p]]It&rsquo;s wise to test PDF accessibility with a screen reader or using a tool like JAWS Inspect. Regardless of what a native accessibility checker will tell you about a PDF, exposing your file to a real user or proxy is the best way to confirm its accessibility.[[/p]]

[[p]]What&rsquo;s good for SEO is also good for accessibility. Screen readers are similar to web crawlers: both can only read content on a site that is made available to them. That means inaccessible PDFs, images without alt text, multimedia without a transcript, etc., are all effectively invisible. They&rsquo;ll only be able to read the file name. Your website could be missing out on some amazing opportunities to rank simply because of its inaccessible elements.[[/p]]

[[p]]There are other SEO best practices that converge with accessibility guidelines, such as using proper and sequential heading structures and descriptive link text. For more information on this topic,&nbsp;[[a href="http://www.tpgi.com/digital-accessibility-and-seo-tactics/" target="_blank"]]check out our blog post on how SEO helps with accessibility and vice versa[[/a]].[[/p]]

[[p]]Testing for accessibility is as critical as your efforts to make your assets accessible in the first place. While it&rsquo;s admirable to aim for accessibility, until you&rsquo;ve verified that your content is actually accessible, you&rsquo;ve only fought half the battle.[[/p]]

[[p]]Furthermore, testing and documenting your results will be advantageous for your company if you ever become the target of a lawsuit and help you identify trends to stop accessibility issues at the source.[[/p]]

[[p]]You can check out the [[a href="https://www.tpgi.com/" target="_blank"]]TGPi website[[/a]] for full details of their&nbsp;testing tools.[[/p]]

Digital Accessibility For Marketers: Email, Social Content & SEO

Related Free Video Lessons

TPGi