Accessibility

One of the important factors in design and user experience, accessibility ensures that everyone understands the message in the emailer, irrespective of any of their disabilities. Accessibility is all about designing web content in a way that can help people with disabilities access, understand, and even interact with the emailer content.

In other words, accessibility in an email is all about dealing with email clients that have poor support. Also, a developer should never overlook the accessibility factor. Apart from helping people with disability, accessible content is more usable, readable, and most importantly, it’s good for both the brand and business.

MailBox stringently follows accessibility standards so that people with disabilities can interact with the email content.

Set the HTML Language Attribute

MailBox set lang=”” HTML attribute to ‘en’ by default. Setting the language attribute is simple and the fix can be made in the head of the email. You can set this by using lang=”” with the correct language code. When the language code is set, it informs the text reader system and search engines to pronounce the text or display it in a specific way

You can set the language with the two initials of the language the email is written in. For example, the code for an English email would look like lang=”en”. If the email was written in Spanish, you would use “es.”


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>

Document Title

When there is a document title, it gives the screen reader users some context about the message that has been sent. The title of the document also helps in viewing the email in a browser by setting the title on the browser’s tab.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
     <title>MailBox - Responsive email framework</title>
</html>

Character Encoding

With character encoding taken care of, nothing breaks the reading pattern of the recipient, whether he is reading the email himself or using a screen reader. When the character encoding is in place, the browser, device or the email client knows what characters to expect in the subsequent code.

Here the character encoding is set to UTF-8 by default.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Tables

In the field of email design, tables are used to hold content and not for design. However, owing to the restrictions posed by email clients, the designers are now forced to use tables as a design element.

The challenge here is to help screen readers to differentiate between tables that hold the content and tables that have been used purely for design. The solution to the problem is to use the role=”presentation” attribute on all your tables that are used for design purposes.

With MailBox, you don’t have to undertake this task manually. It does it by default, so make sure you don’t forget to add it to your custom-coded tables.

<!-- Module 1a -->
   <table width="100%" align="center" role="presentation">
      <tbody>
         <tr>
            <td align="center" valign="top">
               <!-- Wrapper 720px -->
               <table class="wrapper" role="presentation">
                  <tbody>
                     <tr>
                        <td align="center" valign="middle">
                           <!-- Add Content Here -->
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>

Images

The alt=”” attribute in the images help screen readers to describe them. Thus, it is recommended that you should always include the same in your images. Also, the attribute is quite useful in the case when the email clients block the images. In such a scenario, the alternative text of your images is shown to the recipients of the email.

<img src="/images/logo.png" alt="" width="189" style="width: 189px; max-width: 189px;"/>

Use Semantic Code

The semantic code can really help in creating a pleasant reading experience. The semantic codes are basic tags which help in differentiating between paragraphs and heading. Though most developers overlook it, but when applied, they help screen readers to easily digest the content. Furthermore, it helps in better navigating your emails.

<!-- Module 1a -->
   <table width="100%" align="center" role="presentation">
      <tbody>
         <tr>
            <td align="center" valign="top">
               <!-- Wrapper 720px -->
               <table class="wrapper" role="presentation">
                  <tbody>
                     <tr>
                        <td align="center" valign="middle">
                           <!-- Container 600px -->
                           <table class="container" role="presentation">
                              <tbody>
                                 <tr>
                                    <td align="center" valign="middle">
                                       <h2>Get 50% Off on All Products</h2>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td align="center" valign="middle">
                                       <p>Use coupon code OFF50 on purchase above $999.</p>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>

Typography

Typography further makes the email quite easy to read. In the case of MailBox, it uses the golden ratio for typography. For desktops and tablets, body font size is set to 16px, with a line height of 26px. On mobile, the line height is reduced to 23px. In both cases, the ideal ratio for the maximum available content width is used.