Improve SVG accessibility

[petulla]

@alykat

Hey Alyson,

I just took a pretty hard pass on CNN's rig to improve screen reader and assisted device SVG accessibility. I'm still working on it and need to do more testing with Windows screen readers but it makes improvements on the current templates.

Are you interested in a PR with my changes? .

[alykat]

Oh cool! Thank you for offering! I'd love to see what you've done.

[petulla]

@alykat Hey, just an update on this. We're trying to os the CNN dailygraphics rig, which migrates the project to Node (and has these updates). Hope to have some news in the coming months but wanted to close the loop on why I didn't submit this PR.

[thomaswilburn]

Thanks, Sam! I'm going to be working on accessibility and the daily graphics templates as one of my initial tasks, so I'd love to have any info that came up during your work on it.

[petulla]

Cool, @thomaswilburn. This was my framework for accessibility:

Follow this guide and this guide, as well as the FT and Vox guides.

-Add HTML5 semantic markup to all child pages
-Add title/desc to all SVGs
-Add ARIA roles and alt titles to chart elements
-Add ARIA information to tables
-Add title to graphics iframe

In some cases, accessibility is aspirational and not supported yet by current browsers. Still, having these improvements in place for when browsers have better SVG accessibility support seemed worthwhile.

Ill drop you an email so we can chat more off the issues thread.

[petulla]

Closing in favor of this PR