Mastering Styled Alt Text In Email - Email On Acid
Có thể bạn quan tâm
- Search
- Sinch Email
Mailjet
Mailgun
- Help
- Documentation
- Login
- Sinch Email
Back to main menu
Mailjet
Mailgun
- Help
- Documentation
- Login
Email Development
Mastering Styled Alt Text in Email
Share to
Share on LinkedIn Share on X Share on Facebook Share on MailTable of contents
- How to Style Alt Text
- Where does alt text show?
- Alt Text in Email
- Alt text and accessibility
- Other considerations
- How is your alt text looking?
Though it might seem like an afterthought to add alt text to images, it can make a huge difference for the success of your campaigns. Alt text is easy to style in many clients, and can help get your message across whether or not image blocking is on. I’ll cover how to style your alt text, as well as some email client considerations.
How to Style Alt Text
Styling alt text is actually very easy! We’ll be using this image for our example. Images that have text in them with a message you really need to get across are the perfect place to use alt text.
First, you’ll need to add the alt text attribute to the image tag.
- HTML
This text can appear in a variety of different ways in the email, but by default it will take on the styles of its container. There are a few styles we should set for maximum readability.
- HTML
Font size will help make sure that the alt-text doesn’t get lost. Don’t forget to set line-height, as many email clients will cut off the bottoms of letters if the line height is shorter than the font-size. Line-height can also be used to create spacing above and below the alt text.
Next we’ll add a background color and font color, to mimic the color of the image.
- HTML
Most email clients support background colors for blocked images, and this can really help maintain the look and feel of your email.
Finally, some centering. We can use text-align:center to make the text center within the image. Vertical centering is a bit harder. We can use line-height to center the text vertically. Our example image is 300px tall, so we’d set the line-height to 300px (assuming the text will all be on one line) to get it to center inside the image.
Where does alt text show?
Now that Gmail no longer blocks images, most clients will show images by default. However, many clients allow their users to choose whether or not to download images by default. They may opt to not download these images for security or to conserve mobile data.
Note that Outlook desktop clients (2007-2016) will show the alt text you’ve added, but only after a long “security warning” message. They will not allow you to style the alt text at all. Outlook 2011 for Mac does allow you to style alt text.
Alt Text in Email
| Email Client | Blocks Images by Default? | Alt text displayed? | Alt text can be styled? |
|---|---|---|---|
| AOL | ✔ | ✔ | ✔ |
| Gmail | ✕ | ✔ | ✔ |
| Google Apps | ✕ | ✔ | ✔ |
| Yahoo! Mail | ✔ | ✔ | ✔ |
| Outlook.com | ✕ | ✔ | ✔ |
| Office 365 | ✕ | ✕ | ✕ |
| Apple Mail | ✕ | ✔ | ✔ |
| Lotus Notes 8.5 | ✔ | ✔ | ✕ |
| Outlook 2000-2016 | ✔ | ✔ | ✕ |
| Outlook 2011 (Mac) | ✔ | ✔ | ✔ |
| Thunderbird | ✕ | ✔ | ✔ |
| iOS Mail | ✕ | ✔ | ✔ |
| Gmail App | ✕ | ✔ | ✔ |
Alt text and accessibility
Using alt text as described above can greatly increase the accessibility of your emails. Screen readers will be able to read this text for the visually impaired. If your image has no text in it, the alt text can still help get the message across.
Similarly, links can have the title attribute filled in to help the visually impaired. This text will also appear in some clients when the user hovers over a link.
Other considerations
Where possible, define height and width for your images using HTML attributes. This will preserve their dimensions (and your layout) when image blocking is on, and give you enough space to display your alt text. For fluid images, this may not be possible.
Very small images, like social media icons, may break out of their correct size if too much alt text is included (see below). In this case you may want to keep alt text to increase accessibility To do so, define the image size using attributes, reduce the font-size to 1px, and change the font-color to white. This will prevent the blocked image boxes from blowing out their size.
If the image is linked, some clients will show the text in blue and underlined. You can use inline styles to counteract this behavior in most clients.
Finally, you may want to leave alt text off of some images. All things in moderation, and alt text is no exception. If an image isn’t important to communicating the message of your email, and is just there for decoration, you may want to leave alt text off of it so as not to distract from the real goal of the email. As always, this is a judgment call.
How is your alt text looking?
If you haven’t tested your email to see how it looks with images off, you should start today! Just make sure to check in the “Include a preview of each client with image blocking enabled” checkbox at the bottom of the test form, or select “Process all my email previews with blocked images by default” in our email testing platform to get image blocking results for your auto-process tests.
Don’t have access to our email testing platform? Get unlimited email, image, and spam testing, free for 7 days!
Know any other alt text tricks or considerations? Let us know in the comments below!
Author: Kyle Lapaglia
Related articles
Email Development Why Should I Set My Table Role As 'Presentation'?
Melanie Graham
Email Development How to Use Media Queries in HTML Emails
Kyle Lapaglia
Email Development How to Get Rid of White Lines in Outlook Emails
Megan Boshuyzen See more articles Most people would agree cookies make life better. For us, they help us make our site and marketing better. But if you don’t like cookies, that’s cool – you can let us know by clicking the settings button! Allow all Disable all CustomizeYour Cookie Choices
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer. Cookie Statement
Strictly Necessary Cookies (always active)These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information. Cookie details
| Cookie Subgroup | Cookies | Cookies used |
|---|---|---|
| eu5.mm.sdi.sinch.com | ASP.NET_SessionId | First Party |
| community.sinch.com | AWSALB , LiSESSIONID | First Party |
| appengage.sinch.com | dd_cookie_test_ | First Party |
| tickets.sinch.com | atlassian.xsrf.token , JSESSIONID | First Party |
| cockpit2.sinch.com | SESSION | First Party |
| engage.sinch.com | instapage-variant-xxxxxxxx | First Party |
| dashboard.sinch.com | cookietest | First Party |
| brand.sinch.com | PHPSESSID , AWSALBCORS | First Party |
| sinch.com | __cf_bm , OptanonConsent , TEST_AMCV_COOKIE_WRITE , OptanonAlertBoxClosed , onesaasCookieSettings, QueryString, functional-cookies, performance-cookies, targeting-cookies, social-cookies lastExternalReferrer, lastExternalReferrertime, cookies, receive-cookie-deprecation _gdvisitor, _gd_session, _gcl_au, _fbp, _an_uid, _utm_zzses, lpv | First Party |
| mediabrief.com | __cf_bm | Third Party |
| recaptcha.net | _GRECAPTCHA | Third Party |
| cision.com | __cf_bm | Third Party |
| techtarget.com | __cf_bm | Third Party |
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance. Cookie details
| Cookie Subgroup | Cookies | Cookies used |
|---|---|---|
| community.sinch.com | ValueSurveyVisitorCount | First Party |
| buzz.sinch.com | instap-spid.8069 , instap-spses.8069 | First Party |
| appengage.sinch.com | _dd_s | First Party |
| sinch.com | AMP_TLDTEST , rl_page_init_referrer , rl_trait , _vis_opt_s , __q_state_dp56h9oqwhna9CoL , cb_user_id , __hstc , rl_anonymous_id , rl_user_id , initialTrafficSource , _vwo_uuid , _vwo_uuid_v2 , rl_page_init_referring_domain , _hjIncludedInSessionSample_xxx , apt.uid , __hssrc , test_rudder_cookie , cb%3Atest , __hssc , rl_group_trait , _hjAbsoluteSessionInProgress , _vwo_referrer , _vwo_sn , _vis_opt_test_cookie , _hjFirstSeen , _hjTLDTest , _hjSession_xxxxxx , s_sq , _vwo_ds , rl_group_id , _vis_opt_exp_n_combi , s_cc , _gclxxxx , cb_anonymous_id , cb_group_id , apt.sid , rl_session , _uetvid , AMP_899c7e29a9 , _hjSessionUser_xxxxxx | First Party |
| brand.sinch.com | AMP_TEST | First Party |
| engage.sinch.com | no-cache , instap-spses.85bb , instap-spid.85bb | First Party |
| www.sinch.com | d-a8e6 , s-9da4 | First Party |
| nr-data.net | JSESSIONID | Third Party |
| sinch-en.newsroom.cision.com | _ga, _gid | Third Party |
| sinch.in | _ga_xxxxxxxxxx, _gat_UA-XXXXXX-X, _gid, _ga | Third Party |
| g.fastcdn.co | instap-spses.85bb | Third Party |
| hello.learn.mailjet.com | pardot, visitor_id, visitor_id##### | Third Party |
| www.googletagmanager.com | userId | Third Party |
| hello.learn.mailgun.com | visitor_id#####, visitor_id | Third Party |
| dev.visualwebsiteoptimizer.com | _vwo_ssm | Third Party |
| box.com | box_visitor_id | Third Party |
| app.box.com | z, cn | Third Party |
| sinch-tfn.paperform.co | laravel_session | Third Party |
| go.sinch.in | visitor_id#####, visitor_id | Third Party |
| Qualified | __q_local_form_debug | Third party |
| Rudderstack | rudder.inProgress, rudder.3156dd1f-7029-4600-ae54-baf147d9af20.queue, rudder.3156dd1f-7029-4600-ae54-baf147d9af20.ack, rudder.3156dd1f-7029-4600-ae54-baf147d9af20.reclaimStart, rudder.3156dd1f-7029-4600-ae54-baf147d9af20.reclaimEnd, | Third party |
| 6sense | _6senseCompanyDetauls, _6signalTTL | Third party |
| Appcues | apc_local_id, apc_user | Third party |
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising. Cookie details
| Cookie Subgroup | Cookies | Cookies used |
|---|---|---|
| investors.sinch.com | visitor_id | First Party |
| community.sinch.com | VISITOR_BEACON , LithiumVisitor | First Party |
| sinch.com | _uetsid , ajs_user_id , _gcl_aw , ajs_group_id , AMCV_ , __utmzzses , _fbp , _gcl_au , AMCVS_ | First Party |
| go.latam.sinch.com | visitor_id##### , pardot | First Party |
| linkedin.com | li_gc, bcookie, lidc, AnalyticsSyncHistory, UserMatchHistory, li_sugr | Third Party |
| pi.pardot.com | lpv151751, pardot | Third Party |
| hsforms.com | _cfuvid | Third Party |
| google.com | CONSENT | Third Party |
| sinch.in | _gclxxxx, _gcl_au | Third Party |
| www.linkedin.com | bscookie | Third Party |
| bing.com | MUID, MSPTC | Third Party |
| www.facebook.com | Third Party | |
| hello.learn.mailgun.com | pardot | Third Party |
| www.youtube.com | TESTCOOKIESENABLED | Third Party |
| dev.visualwebsiteoptimizer.com | uuid | Third Party |
| g2crowd.com | __cf_bm | Third Party |
| pardot.com | visitor_id#####, visitor_id | Third Party |
| tracking.g2crowd.com | _session_id | Third Party |
| hubspot.com | __cf_bm, _cfuvid | Third Party |
| doubleclick.net | test_cookie, IDE | Third Party |
| youtube.com | CONSENT, VISITOR_PRIVACY_METADATA, VISITOR_INFO1_LIVE | Third Party |
| go.sinch.in | pardot | Third Party |
| liadm.com | lidid | Third Party |
| www.google.com | _GRECAPTCHA | Third Party |
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies, then some or all of these services may not function properly. Cookie details
| Cookie Subgroup | Cookies | Cookies used |
|---|---|---|
| portal.sinch.com | pnctest | First Party |
| partner.appengage.sinch.com | _dd_s | First Party |
| investors.sinch.com | First Party | |
| community.sinch.com | LithiumUserInfo , LithiumUserSecure | First Party |
| tickets.sinch.com | selectedidp | First Party |
| engage.sinch.com | ln_or | First Party |
| cockpit2.sinch.com | CSRF-TOKEN , NG_TRANSLATE_LANG_KEY | First Party |
| sinch.com | apt.temp-xxxxxxxxxxxxxxxxxx , hubspotutk , ajs%3Acookies , cf_clearance , ajs%3Atest , __tld__ , __q_domainTest , pfjs%3Acookies , ajs_anonymous_id | First Party |
| auth.appengage.sinch.com | AUTH_SESSION_ID , KEYCLOAK_3P_COOKIE , KEYCLOAK_3P_COOKIE_SAMESITE , KC_RESTART , AUTH_SESSION_ID_LEGACY | First Party |
| www.recaptcha.net | _GRECAPTCHA | Third Party |
| boxcdn.net | __cf_bm | Third Party |
| d2oeshgsx64tgz.cloudfront.net | cookietest | Third Party |
| sinch-np.paperform.co | XSRF-TOKEN, laravel_session | Third Party |
| vimeo.com | __cf_bm, vuid | Third Party |
| sinch-ca-sc.paperform.co | XSRF-TOKEN, laravel_session | Third Party |
| box.com | site_preference | Third Party |
| app.box.com | bv | Third Party |
| sinch-tfn.paperform.co | XSRF-TOKEN | Third Party |
| cision.com | cf_clearance | Third Party |
These cookies are set by a range of social media services that we have added to the site to enable you to share our content with your friends and networks. They are capable of tracking your browser across other sites and building up a profile of your interests. This may impact the content and messages you see on other websites you visit. If you do not allow these cookies you may not be able to use or see these sharing tools. Cookie details
| Cookie Subgroup | Cookies | Cookies used |
|---|---|---|
| community.sinch.com | ln_or | First Party |
| sinch.in | _fbp | Third Party |
| youtube-nocookie.com | CONSENT | Third Party |
| youtube.com | YSC | Third Party |
Từ khóa » Html Image Alt Text Color
-
How To Style Alt Text Color? - Html - Stack Overflow
-
Quick Tip: Remember To Style Your ALT Text - Web Design
-
HTML Img Alt Attribute - W3Schools
-
Style Alt Text - CodePen
-
The Ultimate Guide To Styled ALT Text In Email - Litmus
-
Image ALT Tag Tips For HTML - Accessibility At Penn State
-
Should Color Be Included In Alt Text? - DEV Community
-
An Alt Decision Tree | Web Accessibility Initiative (WAI) - W3C
-
t - Web APIs | MDN
-
HTML Img Alt Tags For SEO Best Practice - Search Engines Love ...
-
How To Change Color Of Alt Text In Css?
-
What Is Image Alt Text? - Allyable
-
Alternate Text For Background Images, Alt Text Accessibility
-
Writing Useful Alt Text - CSS { In Real Life }