Accessibility

MailBox comes with 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 a simple fix made in the head of the email. You can set this by using lang=”” with the correct language code. This code tells screen readers and other non-human systems, such as search engines, to expect a certain language and pronounce or display the words in a specific way.

You can set the language by using the two letters that correlate to the language the email is written in, such as “en” for English. For an English email, the code 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

The tag is included in order to give screen reader users some context. It also helps when viewing the email in a browser (i.e. your email’s online version), 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

Content-Type plays a major role in the way an email displays. This code lets the browser or email client know which type of characters to expect in the subsequent code. It also ensures nothing breaks the reading pattern for a subscriber, whether he is reading the email himself or using a screen reader.

Character encoding is set to UTF-8 by default.

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

Tables

Tables were meant for displaying tabular data, not for defining the structure of a design. Unfortunately, they are (still) a requirement for coding HTML email layouts, and this misuse can be a real issue for people using screen readers to read your emails.

The solution is to use the role=”presentation” attribute on all your tables that are used for design purposes, as it makes it easier for screen readers to read your content. MailBox does this 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

Your images should always include an informative alt=”” attribute, to help screen readers describe them. This is also useful in email clients that block images by default, as your alternative text will be shown instead.

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

Use Semantic Code

Using semantic code is a basic fix that developers can apply to code, although most people overlook it. It’s important to use header () and paragraph () tags, so screen readers can easily digest your content. These tags allow the screen reader to differentiate between headings and paragraphs, which creates a more pleasant reading experience and allows the user to better navigate 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

MailBox uses the golden ratio for typography, in order to help you create emails that are easy to read.

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.