Accessibility in Emails

[elliottregan]

How can we reproduce this bug?

Any component that generates a <table> element.

What did you expect to happen?

Add role="presentation" to the <table>.

What happened instead?

Without this ARIA Role, screen readers try to read the table as tabular data, which is incorrect.

What email clients does this happen in?

All, when a screen reader is being used.

---

Most of the time you can add a role="presentation" to the Inky component, in the case of <center>, it does not get applied correctly. Ideally, that role would automatically get applied during the build system to keep the working markup cleaner. I don't think there are any drawbacks to this because if you really wanted to display a <table> as tabular data, you would just build the table using the <table> element, not <container>.

Further Reading: http://blog.rebelmail.com/accessibility-in-email-part-ii/

[elliottregan]

I'm happy to submit a PR for this, but unsure of the best approach.

[didoesdigital]

I ran into this issue again today. Having role="presentation" automatically added to tables in Inky components would be a boon for accessibility, but I wonder if it's also worth updating documentation to let people know how to do this.

[davidpustai]

I've made a PR in the Inky repo. It might take some time before it gets approved and bubbles all the way into foundation-emails. If there's anyone who can help, that would be splendid, cause these repos seem dead.

Until then...
...since I am not using any tables in my emails other then the generated ones by Inky, for now I just go with a simple task, that I call everywhere after inline. It appends the role="presentation" to each table. I hope this hack helps someone:

return gulp.src('dist/**/*.html')
  .pipe($.if(PRODUCTION, $.replace('<table', '<table role="presentation"')))
  .pipe(gulp.dest('dist'));

[garyanikin]

Any updates?

[DanielRuf]

Any updates?

No as you can see =)

Any help is very welcome.

[DanielRuf]

I've made a PR in the Inky repo.

Not sure wich one. In such cases please always link it.

[DanielRuf]

There it is: https://github.com/foundation/inky/pull/102/files
Also relevant: foundation/inky#114

[nicksiscoe]

Bump because this would be an improvement still 💯

[elcaptain]

+1