foundation
Accessibility in Emails
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/
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.
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'));
I've made a PR in the Inky repo.
Not sure wich one. In such cases please always link it.
There it is: https://github.com/foundation/inky/pull/102/files Also relevant: https://github.com/foundation/inky/pull/114
