Check out a free preview of the full HTML Email Development, v2 course

The "Accessibility Tools" Lesson is part of the full, HTML Email Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jason surveys different screen readers and browser extensions that test an email's accessibility.

Preview
Close

Transcript from the "Accessibility Tools" Lesson

[00:00:00]
>> Jason Rodriguez: One of the big things you can do though to help, you should follow all those guidelines, but really, just testing for accessibility is a really helpful thing. So setting up and using screen readers, getting familiar with screen readers can be really helpful. If you're on Windows, NVDA is awesome.

[00:00:15]
It's free. It's easy to use. You don't have to keep it on all the time. It sits in the tray. You can click it on. You can start reading through your emails. VoiceOver on Mac stuff, iOS, Mac OS. JAWS is a paid option, a little bit more expensive, but one of the most popular screen readers out there.

[00:00:35]
VoiceOver is massively popular because it's built into Mac's operating system iOS, and it's free to us. There's a couple of browser extensions, which I can actually show off to that are helpful as well. So this is one of my email campaigns that I sent out to you, a fairly small subscriber list.

[00:00:52]
Just updates about things that I'm working on, whatever. But there's a couple of tools that you can use, install on your browser that'll help out. One of my favorites is called NoCoffee Vision Simulator which will allow you to simulate different visual disabilities. So low acuity, it will blur that content, so you can see people that have blurry vision.

[00:01:14]
What they're actually seeing, and this is where creating that strong hierarchy is really important. So using heading elements that are bigger, bolder, darker, that they contain the child elements will help people to scan that regardless of their visual ability. Contrast loss is important. You can see how hard it gets to actually read through this content, especially if you're using really light-type faces on a light background.

[00:01:38]
Or dark-type faces on a dark background.
>> Jason Rodriguez: Ghosting is interesting, see how unreadable that gets what people have to content with that. You can even test out macular degeneration, cataracts, things like that. So you can see how people with all these disabilities have to interact with your email campaign.

[00:02:02]
So that's one of my favorites. Let me turn this guy off.
>> Jason Rodriguez: There's. It works better with the little bookmark. It is called TotAlly, Tot-Ally, which is developed by the Khan Academy. And this just adds this little tab down here with sunglasses. That allows you to quickly see different aspects of your email campaigns, so you can identify headings.

[00:02:32]
It'll show you the structure of your email based on the heading structure. So you can see how that hierarchy works out. It'll identify any contrast issues so it's actually looking at the W3C recommendations for ratios for color contrast. And telling you whether or not you have problems. It'll show things like link text, what a screen reader will actually say or any problems that you might run into.

[00:02:58]
So this link text is unclear. I might wanna fix that. If you have labels, then your email would identify those. Image alternative text landmarks, so this really cool one, is the screen reader wand. So, if you don't have a screen reader installed or aren't familiar with using something like that, you can use a tool like this.

[00:03:15]
Which you just hover over whatever the element is, and it'll show you what a typical screen reader will actually say out loud to that user. So for here, this is reading the alternative text, which says an inaccessible image-based email versus an accessible text-based email. So, that's what hear out, so that's super helpful.

[00:03:35]
Just a couple of other ones. There's a cool one called Silk Tine, which is a service. I think they're a testing service for websites, but they have this great free browser extension that does a lot of simulation for disability. So it has a screen-reader emulator which you can turn on, and it'll.

[00:03:57]
>> Speaker 2: The Intermittent Newsletter, red heart suit, issue 35by Jason Rodriguez- Heading.
>> Jason Rodriguez: So it'll read through your email, show you exactly what somebody is gonna be hearing. You can turn that on, off. It has visual stuff that you can test again, blurriness, different varieties of colour blindness, which is cool to see what that looks like.

[00:04:21]
Really important when you're dealing with graphics and stuff like that. Again, people that have tunnel vision, have lost their peripheral vision, their central vision is cool, cuz that hovers over it as well. This one's interesting. Let me turn these ones off first.
>> Jason Rodriguez: It's like a flashlight.
>> Jason Rodriguez: The dyslexia one's interesting cuz this will actually go through and [LAUGH] start rearranging the letters in your email.

[00:04:52]
Which gives you an idea of people that are dyslexic, what they have to contend with. Because their brain, their eyes, just do that automatically for them. So it's more work for them to read through this. So this is where looking at your copy, looking at the language you're using, making your emails more human and readable sound like humans talking to you.

[00:05:12]
And using simple language could be really helpful. There's a couple other ones. You have stuff built into the browser. Chrome has Lighthouse, which is an audit tool which will bubble up any of those accessibility issues. Wave is another one that's really popular which will show you any errors that you might have in your email campaign.

[00:05:31]
Any suggestions, features that you might wanna work into there. But really testing your emails is a super-helpful thing to do. Because that will allow you to experience your emails similar to how somebody with whatever disability they're contending with will experience your email campaigns. So accessibility, massively important. Fortunately, there's things we can do to make more accessible emails, especially when it comes from the design and development perspective.

[00:05:59]
So again, using text, using alternative text, using all that good stuff that we've talked about already. And then especially in email, making sure that your tables are read out loud to people using screen readers, using that semantic markup. That'll provide that baseline, really good accessible experience for anybody using your email campaigns.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now