Introduction
This page will showcase my steps to create an email for a client and the steps I learnt to ensure the visually impaired have a smooth experience while navigating an email.
Why focus on accessibility for the visually impaired?
A 2020 global study reveals that 49.1 million people are affected by blindness (Bourne, R.R.A. et al., 2020). This significant statistic highlights the urgent need for awareness and intervention regarding visual impairment worldwide. According to a study by email markup connections, 99.97% of tested emails had serious or critical accessibility issues (Email Markup Connection, 2023). This means that if accessibility guidelines are followed during development, there is an opportunity for an email to be legible to millions of people.
Next, I will explain the tools and processes I use to develop emails that are accessible to visually impaired individuals.
Email Development Process
Preparation Stage
▪️ I review the client brief to understand the desired email design and development.
▪️ Next, I research the client's website, brand guidelines or social media to use as a reference point when designing.
▪️ Finally, I will sketch out the look and feel of the email.
Design Stage
▪️ At this point, I have a clear vision of the email's look and feel based on the sketch.
▪️ Next, I download client resources such as Email copy, brand logos, photos, videos, brand colours and fonts,
▪️ After that, I use Photoshop or After Effects to digitize my sketched designs. That can be creating gifs, graphic illustrations, and hero images.
▪️ Finally, designs are saved, exported and uploaded to a cloud provider so they can be accessed via a URL link during the coding stage.
Coding Stage
▪️ I begin with a default email HTML template.
▪️ The HTML template is divided by table tags. This ensures that all email clients, such as Outlook and Gmail, do not hide content.
HTML table example code
▪️ Next, I restructure the code layout to match my sketch.
▪️ Default images will be replaced with client-branded image URLs.
▪️ Email will fonts and colour will be changed to match client branding.
Accessibility Essentials
▪️Tables will be given ARIA roles (eg banner, main) for screen readers to categorise the section of content narrated.
HTML table example with ARIA role, main
▪️ To avoid redundant narrations of table tags, some tables tags will be ARIA 'Presentation' roles.
HTML table example with ARIA role, presentation
▪️ Image tags will be given an ARIA lable and alt tag name for screen readers and as an alternative if users has images unavliable in the email client.
▪️ Body texts such as , P, h1, h2, h3, Li will have branded styling within each tag like the example below so branding is consistent amongst all email clients especially in Gmail.
HTML p tag example
▪️ The width of the Email will be a max of 600-800px.
▪️The width of the tables is set to 100% so they are responsive to different screen sizes.
▪️ The images, buttons and other interactable elements are also styled for mobile screen sizes.
Testing Stage
▪️ At the end of building the email, I use Windows Narrator while closing my eyes to check the navigation experience for a blind individual.
▪️ I use keyboard shortcuts like the 'Tab' key to test the navigation of interactable elements of the email.
▪️ I use an image blocker browser extension to check the alt tag readability.
▪️ I test the look with the dark mode theme browser extension and email client dark theme appearance settings
▪️ I use a browser inspection tool. 'Toggle device toolbar' to check the email responsiveness.
▪️ Lastly, I send emails to various email clients to check for consistency in design and branding.
References:
Bourne, R.R.A. et al. (2020) Global prevalence of blindness and distance and near Vision Impairment in 2020: Progress towards the Vision 2020 targets and what the future holds., Investigative Ophthalmology & Visual Science. Available at: https://iovs.arvojournals.org/article.aspx?articleid=2767477 (Accessed: 07 November 2024).
Accessibility report 2023 (no date b) Email Markup Consortium. Available at: https://emailmarkup.org/en/reports/accessibility/2023/ (Accessed: 08 November 2024).
