{"id":3795,"date":"2020-02-11T00:00:00","date_gmt":"2020-02-11T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers\/"},"modified":"2025-09-03T14:31:05","modified_gmt":"2025-09-03T18:31:05","slug":"special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers","title":{"rendered":"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

After taking the first steps by implementing these seven simple tricks to make your code more accessible<\/a> and refactoring your bulleted lists for semantic accessibility<\/a>, you might be wondering what to do next to optimize your email code for screen readers. No worries, we\u2019ve got you covered!<\/p>\n

Many of us already use role=”presentation”<\/strong> on our tables to streamline how our emails sound in screen readers and clarify our messages. That\u2019s a great start. But what about all the other clutter? Ever since we added screen reader support<\/a> to Litmus and did more research into email accessibility<\/a>, including offering an email accessibility checker<\/a>, and we noticed that many elements marketers frequently use in their campaigns\u2014including images, line breaks, and special characters\u2014are a major challenge for screen readers.<\/p>\n

\n\n\n\n
\"\"<\/td>\n\n

Is your email accessible?<\/h2>\n

Litmus’ Accessibility Checks make it easy to test your email against accessibility best practices. See how you can improve and make better emails for everyone.<\/p>\n

Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

 <\/p>\n

But how can you take advantage of these elements while still guaranteeing a great email experience for subscribers that rely on screen readers? On the most basic level, the solution is rather simple: You just need to hide any potentially confusing content from the screen reader<\/strong>.<\/p>\n

In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.<\/p>\n

3 methods for hiding content from screen readers<\/h2>\n

There are three ways to hide content from screen readers, and each serve a different purpose.<\/p>\n

1. style=”display: none;” <\/strong>or\u00a0style=”visibility: hidden;”
\n<\/strong>
\nYou might already be using these styles to hide content, such as preview text<\/a>, from your emails. Congrats, that means this will hide it from screen readers too! But if you want users to actually see<\/em> the content you want to hide from screen readers, try some of the methods below instead\u2026<\/p>\n

2. role=\u201cpresentation”<\/strong> or\u00a0 role=”none”
\n<\/strong>
\nAgain, many of us are already familiar with these methods from streamlining our tables. While this is very similar to aria-hidden=”true”<\/strong> in that it prevents screen readers from announcing elements that are still displayed visually, the role<\/strong> attribute differs in an important way: It does not<\/em> apply to any nested elements while aria-hidden<\/strong> does<\/em> — including any children content like text. This is why any content in your tables with role=”presentation”<\/strong> is still read out, and why you need to apply role=”presentation”<\/strong> to every<\/em> presentation table rather than relying on inheritance. Basically, the role<\/strong> attribute changes the semantic meaning of an HTML element\u2014for example, telling a screen reader that a table is just there for presentation and not to be read as a data table\u2014but doesn\u2019t remove it altogether like aria-hidden<\/strong> does.<\/p>\n

3. aria-hidden=”true”
\n<\/strong>
\nAs we touched on above, this removes all children elements within the tag it\u2019s applied to from detection by assistive devices. Also, it\u2019s not recommended to apply this to any focusable element (something you can tab to when navigating on your keyboard, like a link) because this means that users can<\/em> still tab to it, but it will appear to be empty to assistive technology, so be sure to apply carefully! Remember: No ARIA is better than bad ARIA<\/a><\/strong>.<\/p>\n

So where can<\/em> you use aria-hidden=”true”<\/strong>? For the purposes of email, it\u2019s safe to use it to hide purely decorative elements or duplicated content like repeated text.<\/p>\n

Use cases: how to fix common screen reader issues<\/h2>\n

Stop a screen reader from reading out image descriptions<\/h3>\n

You might be tempted to use techniques like role<\/strong> or aria-hidden<\/strong> to hide purely decorative images, but remember to keep it simple. The <<\/b>img<\/strong>><\/b> tag is already semantic by nature. To hide it from a screen reader, just give it an empty alt attribute like this:<\/p>\n \t\t\t<\/div>\n \t\t<\/div>\n \t<\/div>\n <\/div>\n<\/div>\n\n\n\n

<img src=\"yourpic.jpg\" alt=\"\" \/><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen readers announce special characters out loud<\/h3>\n
We found that a couple of our frequently-used special characters sounded a bit clunky on a screen reader. Since they were purely decorative and didn\u2019t contain any nested content, it was safe for us to hide them with aria-hidden=”true”<\/strong>.<\/p>\n
In this first example we use html bullet<\/a> points\u2014an element thought to present unordered lists\u2014to make a headline stand out. This, understandably, has the screen reader confused:<\/p>\n
\"\"<\/figure>\n
HTML (Before aria-hidden=”true”)<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<p style=\"font-family: Arial, sans-serif; font-weight:bold; font-size:20px; line-height:30px; color:#262524; text-align:center; margin:0; padding:0;\">\n   \u2022 LOREM IPSUM \u2022\n<\/p><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript\u00a0(Before aria-hidden=”true”)<\/strong><\/p>\n
bullet<\/strong> LOREM IPSUM bullet<\/strong><\/span><\/em><\/p>\n
Adding the aria-hidden=\u201dtrue\u201d<\/strong> label to the bullet points hides the decorative bullet points from the screen reader:<\/p>\n
HTML (After aria-hidden=”true”)<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<p style=\"font-family: Arial, sans-serif; font-weight:bold; font-size:20px; line-height:30px; color:#262524; text-align:center; margin:0; padding:0;\">\n   <span aria-hidden=\"true\">\u2022<\/span>\n    LOREM IPSUM\n   <span aria-hidden=\"true\">\u2022<\/span>\n<\/p><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript\u00a0(After aria-hidden=”true”)<\/strong><\/p>\n
LOREM IPSUM<\/em><\/span><\/p>\n
Or check out this example: Do you see the little arrow at the end of this CTA button? It\u2019s a great visual element to drive the subscriber to take action, but to a screen reader, it just doesn\u2019t make sense:<\/p>\n
\"\"<\/figure>\n
HTML (Before aria-hidden=”true”)<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<a rel=\"noopener\" href=\"https:\/\/litmus.com\/\" style=\"font-family: Arial, sans-serif; font-size:18px; line-height:25px; color:#235BA8;\">\n    Click here\u00a0\u2192\n<\/a><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript\u00a0(Before aria-hidden=”true”)<\/strong><\/p>\n
link<\/em><\/span>
\nClick here right arrow<\/strong><\/em><\/span><\/p>\n
We can easily stop the screen reader from reading out loud the words \u201cright arrow\u201d like this:<\/p>\n
HTML (After aria-hidden=”true”)<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<a rel=\"noopener\" href=\"https:\/\/litmus.com\/\" style=\"font-family: Arial, sans-serif; font-size:18px; line-height:25px; color:#235BA8;\">\n    Click here\u00a0<span aria-hidden=\"true\">\u2192<\/span>\n<\/a><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript\u00a0(After aria-hidden=”true”)<\/strong><\/p>\n
link<\/em><\/span>
\nClick here<\/em><\/span><\/p>\n
Line breaks in headlines<\/h3>\n
We discovered that when we needed to add a <br \/><\/strong> tag in our heading tags for accessible design<\/a> purposes, it resulted in the screen reader saying \u201cheading level (number)<\/strong>\u201d twice! So instead of:<\/p>\n
heading level 2
\nThe quick brown fox jumps over the lazy dog<\/em><\/p>\n
A screen reader would read:<\/p>\n
heading level 2<\/em><\/span>
\nThe quick brown fox<\/em><\/span>
\nheading level 2<\/em><\/span>
\njumps over the lazy dog<\/em><\/span><\/p>\n
HTML for above example<\/strong>:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<h2 style=\"font-family: Arial, sans-serif; font-weight:bold; font-size:36px; line-height:44px; color:#262524; text-align:center; margin:0; padding:0;\">\n      The quick brown fox <br \/>jumps over the lazy\u00a0dog\n<\/h2><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Not a great experience, right? It gives the wrong impression that there are two <H2><\/strong> texts right next to each other instead of just one. There are a couple of ways to resolve this.<\/p>\n
1. You can always shrink the width of the container so that you don\u2019t need to add a <br \/><\/strong> to break a headline where you\u2019d want.<\/p>\n
2. If you can\u2019t change your container dimensions for any reason, here\u2019s a bit more of a nuanced technique. You can wrap the line you want to break in a <span><\/strong> with style=”display:block;”<\/strong> applied to it, which breaks it into a new line.<\/p>\n
Then, you can add a responsive class=”inline”<\/strong> to it so the copy flows inline again once it hits below your mobile breakpoint. Then add an &nbsp;<\/strong> before the <span><\/strong> to force a separation between the words for the screen reader, and an optional &nbsp;<\/b> at the end of the copy to prevent orphans. See code examples below:<\/p>\n
<head> CSS<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
@media only screen and (max-width: 640px) {\n.inline { display:inline !important; }\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
HTML<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<h2 style=\"font-family: Arial, sans-serif; font-weight:bold; font-size:36px; line-height:44px; color:#262524; text-align:center; margin:0; padding:0;\">\n    The quick brown fox\u00a0<span class=\"inline\" style=\"display:block;\">jumps over the lazy\u00a0dog<\/span>\n<\/h2><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Styled subject lines (Unicode)<\/h3>\n
Perhaps you\u2019ve seen fancy-pants subject lines like these in your inbox and thought, \u201cOoh, I want to try that!\u201d<\/p>\n
\"\"<\/figure>\n
Well, you may want to think again. Not only can these subject lines come off as spammy\u2014true story, this screenshot is from my actual Gmail spam folder\u2014but they\u2019re not accessibility friendly. This copy is comprised of Unicode, which is more similar to special characters or emoji than to semantic system text.<\/p>\n
So for example, this subject line:<\/p>\n
\ud835\udde7\ud835\uddf5\ud835\uddf6\ud835\ude00 \ud835\uddf6\ud835\ude00 \ud835\uddee \ud835\udde8\ud835\uddfb\ud835\uddf6\ud835\uddf0\ud835\uddfc\ud835\uddf1\ud835\uddf2 \ud835\udde6\ud835\ude02\ud835\uddef\ud835\uddf7\ud835\uddf2\ud835\uddf0\ud835\ude01 \ud835\udddf\ud835\uddf6\ud835\uddfb\ud835\uddf2<\/span><\/p>\n
Would cause a screen reader to either skip over reading it at all<\/strong><\/em>, or read out the numerical code equivalents of every single character. Basically, it\u2019s more suited for robot ears than human ears:<\/p>\n
 <\/p>\n
What\u2019s the simple solution? Just use normal system text in your subject lines.<\/p>\n
Emojis in subject lines<\/h3>\n
Speaking of subject lines, emojis have been trending in inboxes recently. After following guidelines on how to use emojis in your subject lines visually<\/a>, you might want to consider how your emojis sound on a screen reader\u2014both in your subject lines and in your email body.<\/p>\n
Because you can\u2019t use code like ARIA in your subject lines, your emojis are read out exactly as-is. Here are a few examples of how subject lines are announced by screen readers.<\/p>\n
Subject Line:<\/strong> Claim your gift! \ud83c\udf81<\/p>\n
Screen Reader:<\/strong> Claim your gift! wrapped gift<\/strong><\/p>\n
Or…<\/p>\n
Subject Line: <\/strong>This email is lit \ud83d\ude0d<\/p>\n
Screen Reader:<\/strong> This email is lit smiling face with heart-eyes<\/strong><\/p>\n
Since we can\u2019t hide subject line emojis from a screen reader and also don\u2019t have a way to influence how screen readers read out the emoji description, it\u2019s really important to use emojis in subject lines with care. If you\u2019re using an emoji, make sure you know exactly how your subject line will sound. Here\u2019s a handy guide on what description your screen reader will use for each emoji<\/a>.<\/p>\n
Emojis in the email body<\/h3>\n
However, you have more control over how to treat your emojis in your body HTML. So here are a few examples of how to code the line below:<\/p>\n
We \u2764\ufe0f email!<\/div>\n
 <\/p>\n
Original Screen Reader Transcript<\/strong>:<\/p>\n
We red heart<\/strong> email!<\/em><\/span><\/p>\n
That\u2019s not ideal, is it? Let\u2019s look at how we can make the screen reader announce that we love <\/em>email:<\/p>\n
1. Code emojis as images with your preferred ALT text.<\/strong> Not only is this the only way you can ensure that your emoji renders uniformly across all email clients, but it\u2019s also semantically correct.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
We\u00a0<img src=\"emoticon-heart.png\" width=\"22\" height=\"22\" alt=\"love\" style=\"display: inline; margin: 0; padding: 0; vertical-align: -5px;\" border=\"0\" \/>\u00a0email!<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript
\n<\/strong><\/p>\n
We
\ngraphic
\nlove<\/strong>
\nemail!<\/em><\/div>\n
 <\/p>\n
2. Use ARIA to expose the emoji to assistive devices as an image<\/strong>, and give it an accessible name that you prefer.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
We <span role=\"img\" aria-label=\"love\">\u2764\ufe0f<\/span> email!<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript
\n<\/strong><\/p>\n
We
\ngraphic
\nlove<\/strong>
\nemail!<\/em><\/div>\n
 <\/p>\n
3. Hide the emoji.<\/strong> We would recommend using this very sparingly. For example, the \u201cWe \u2764\ufe0f email!\u201d example would not be the best application to hide emojis. It would look and sound something like this:
\n<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
We <span aria-hidden=\"true\">\u2764\ufe0f<\/span> email!<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript<\/strong><\/p>\n
We
\nemail!<\/em><\/div>\n
 <\/p>\n
Because aria-hidden=”true”<\/strong> hides this element from screen readers, adding an aria-label<\/strong> to it will not re-expose it. It just remains completely hidden. As a result, we would only recommend using it in situations where the emojis are purely decorative and hiding them makes sense audibly like in the following example:<\/p>\n
We \ud83d\udc4f love \ud83d\udc4f email! \ud83d\udc4f<\/div>\n
 <\/p>\n
Original Screen Reader Transcript<\/strong><\/p>\n
We clapping hands<\/b> love clapping hands<\/b> email! clapping hands<\/b><\/em><\/div>\n
 <\/p>\n
So let\u2019s take a look at coding this with aria-hidden=”true”<\/strong> to hide the clapping hands emojis.<\/p>\n
HTML
\n<\/strong><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
We <span aria-hidden=\"true\">\ud83d\udc4f<\/span> love <span aria-hidden=\"true\">\ud83d\udc4f<\/span> email! <span aria-hidden=\"true\">\ud83d\udc4f<\/span><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Screen Reader Transcript<\/strong><\/p>\n
We love email!<\/em><\/span><\/p>\n
How does your email sound when read out loud by a screen reader?<\/h2>\n
1.3 billion people<\/a> live with some form of visual impairment and many rely on screen readers to consume online content, including emails, so be sure that you’re writing with accessible language<\/a>. Litmus lets you listen to an audio recording of your email before you send, so you can be sure subscribers using screen readers will have a great experience.<\/p>\n
Learn more about accessibility testing in Litmus \u2192\u00a0<\/a><\/strong><\/p>\n
\n\n\n\n
\"\"<\/td>\n\n
Ultimate Guide to Email Accessibility<\/h2>\n
This guide has the insights and step-by-step advice you need to write, design, and code emails that can be enjoyed by anyone\u2014regardless of their ability.<\/p>\n
Download the ebook \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.<\/p>\n","protected":false},"author":3,"featured_media":3796,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,520],"blog_category":[53],"class_list":["post-3795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-email-accessibility","blog_category-tips-resources"],"yoast_head":"\nSpecial Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers - Litmus<\/title>\n<meta name=\"description\" content=\"In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers\" \/>\n<meta property=\"og:description\" content=\"In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-11T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-03T18:31:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/aria-labels-and-accessibility.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers - Litmus","description":"In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers","og_locale":"en_US","og_type":"article","og_title":"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers","og_description":"In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.","og_url":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2020-02-11T00:00:00+00:00","article_modified_time":"2025-09-03T18:31:05+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/aria-labels-and-accessibility.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers"},"author":{"name":"","@id":""},"headline":"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers","datePublished":"2020-02-11T00:00:00+00:00","dateModified":"2025-09-03T18:31:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers"},"wordCount":14,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/aria-labels-and-accessibility.png","keywords":["Design","Email Accessibility"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers","url":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers","name":"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/aria-labels-and-accessibility.png","datePublished":"2020-02-11T00:00:00+00:00","dateModified":"2025-09-03T18:31:05+00:00","description":"In this post, we\u2019ll look at some methods on how to hide content from screen readers and when and where to use them. Then we\u2019ll look at real-life use cases that we\u2019ve encountered in our own emails, so you can get some ideas for practical applications in yours.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/aria-labels-and-accessibility.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/aria-labels-and-accessibility.png","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3795"}],"version-history":[{"count":5,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3795\/revisions"}],"predecessor-version":[{"id":119750,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3795\/revisions\/119750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/3796"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3795"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3795"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}