How I review my emails for accessibility at Invoice2go
How do you check for accessibility errors when your ESP doesn’t offer any warnings, and you don’t have a technical background? I have a very easy walk-through of how I currently leverage Parcel, to check for accessibility issues before I proceed with sending or signoffs.
Shout out to this tweet that sent me into a spiral enough to write this piece.
If you can gather from the title of this article, I value creating accessible emails for all my subscribers, and I work at Invoice2go. I’ll start by setting the foundation of my role and how I execute communication as a Lifecycle Marketing Manager.
When I am strategizing email concepts, I work with an in-house creative team to conceptualize email design and imagery that will be used
The creative team produces a Figma with the design(s)
The creative team exports assets and imagery for me to import and host in our ESP
I leverage Braze as our ESP, and furthermore, their Bee white-labeled Drag & Drop email builder
I build the email, based on the Figma file, using Drag & Drop components
I send the email straight into Parcel, from Braze, to check for accessibility issues
I fix said accessibility issues and drive the company more revenue because our email can be understood by more people
I do not have a technical background, and my elevator pitch is primarily geared toward email strategy. Identifying and fixing accessibility issues used to make me feel quite nervous. Common thoughts I would have would be similar to:
What do you mean I’m missing a lang attribute in my HTML - how do I even edit my HTML using a Drag and Drop builder?
What do I write for my alt text? Is there a right or wrong thing to write to describe an image?
What am I doing
To make matters worse, ESPs don’t normally highlight accessibility issues. Sure, they’ll alert you maybe if you’re missing an unsubscribe in your footer. But it’s rare that they will:
Educate you on the value of alt text and why you should be using it 99% of the time
Flag that your font size is too small
Notify you that zoom is disabled
Add a <title> attribute with customizable valuable text into your navigation
It wasn’t until Parcel came around that I genuinely felt comfortable exploring accessibility warnings and addressing them. Even if they came with a dire “critical” tag which in the past might bring me to complete disabling panic, I know could implement fixes AND understand why I should be implementing those fixes.
Here’s how I check the accessibility of my emails:
When I build my email in Braze and I am ready to pass it into Parcel for testing, I leverage my unique Parcel workspace email address, which allows me to simply paste this email address for my Parcel account, as a test send in Braze, and send my email directly from Braze into Parcel.
If you have a Parcel account, you can find this address under your Workspace Settings.
2. My imported email appears on my navigation
Every time you leverage your unique email address, you’ll be able to see a collection under “Imported from Inbound Emails” - which makes for easy finding.
The name of your email will default to the subject line used.
3. Open up your imported email
Opening up the file allows you to see the email (both visually, and the HTML) that you just passed over from your ESP. Pretty neat!
4. Run Accessibility Checker
From the lower right-hand side, you can open up the accessibility checker to run a review of your email.
5. Review results
Results will be broken down into four categories of severity:
Critical
Serious
Moderate
Mild
By clicking on the header of each category of severity, you can either collapse or expand the breakdown. So if I’m feeling hella overwhelmed I can simply collapse Critical, take a breather with the Moderates, and come back to Critical later.
Clicking on each error jumps into the code, which allows me to pinpoint exactly where the error is originating. Although I might not be technical and previously found HTML overwhelming, if an error presents itself with “missing alt text” and I have Parcel’s Focus Mode enabled, I can easily see not only where the accessibility issue is in the HTML, but also highlighted visually on the right.
In the above image, my first critical error is that I’m actually missing alternative text on my email’s logo - as seen in the HTML but also highlighted on the right side with the blue box around the logo. An easy fix to make is by jumping back into Braze, adding alt text, and moving on to the next issue. Tackling these issues is not so scary!
6. Implementing Fixes
Sometimes, an issue isn’t as quick to fix as adding alt text, something I can do out of the box in Braze from their Drag & Drop builder.
Depending on how many issues are flagged, I may want to implement fixes in Parcel, and export the HTML back to Braze.
Reviewing my first Serious issue, I am given the error that Documents must have a <title> element to aid in navigation. I can see on the left-hand side, that I do have this <title></title> line in line 11, but it’s empty. What’s the problem?!
I’m grateful for Parcel’s inclusion of educational explanations, and as I click through to the documentation linked in the error flag, I now understand why this error was presented.
“A good title is brief, clear, informative, and unique. Ensure that the document's title contains short, descriptive text summarizing the page's contents. To pass this rule, it’s not sufficient to simply have a title element; the element must also contain meaningful text.”
I don’t actually have the ability to add title text from within Braze leveraging their Drag & Drop builder. I have no idea why if it’s a serious issue that should be addressed, but my CSM will soon be receiving an email from me for this new request, and I will be adding in a title from within Parcel in the meantime.
After I implemented a title, I can refresh the Accessibility Checker, and voila - no more error!
Moving on to the next error that threw me for an absolute doozy trying to understand when I saw it. Links must have discernable text. Again, grateful for some good ol’ documentation to break this down for me.
What I’ve learned is that adding discernable text to links is basically the equivalent of alt text, but for links.
By adding in aria-label="This link follows the Invoice2go logo which navigates to your Invoice2go account">, within the same <a> tag as my link, I’ve refreshed the Accessibility Checker and I’m clear on that error now too!
I’d lead you through all errors that I experience when checking for issues, but I encourage you instead to import your own email to Parcel and run the Accessibility Checker on your own email. If you want to check out all the potential rules, you can do so by reviewing the documentation of this feature.
7. Translate feedback to your ESP
Half of the errors you probably will be presented with could actually be solved with the ESP implementing fixes. In the errors I’ve described, Braze could have:
Added the ability to include discernable text on my links
Flagged Alt text was missing
Allowed me to customize title text within the HTML.
I am lucky to have an existing relationship with the Braze email product team, who all allow me to give them open feedback on improvements that I wish to see and why. I encourage all email marketers that wish to improve email accessibility to establish similar relationships or communicate with their ESP support team on improvements that should be critical (regardless of the severity tag Parcel provides 😉).
TLDR
Making your emails better for everyone isn’t exclusive to the technically educated, or the seasoned marketer. You don’t need to have the best tech stacks, to implement, or educate yourself on accessibility. If you give yourself the time, and the patience, you can address the reasons why your emails are exclusive to able-bodied subscribers and bring inclusivity to your emails all on your own.
The real TLDR is that Parcel is the GOAT and everyone should be using it in some capacity for their emails (I am biased because I’m on the Parcel team full disclosure).