Replace screenshots of Slack messages with accessible SVGs

Created by: felixfbecker

Replaces the screenshots of Slack messages in the remote work calendars blog post with accessible SVGs so that the message can be read by screen reader users too. Notice how you can select the text inside now with your mouse :)

This is the "premium" solution that required some advanced techniques to generate the SVG (SVG Screenshot and some manual editing of the SVG). I say "premium" because not only is it accessible, it also gives everyone a super crisp vector graphic, where text can even be selected and links are still clickable (e.g. Jean's link to non-linear workdays).

The easier solution to make screenshots of text accessible is to have a screenshot in PNG, then include the text of the screenshot in a <div class="sr-only"> that is only visible to screen readers.

Also changed the captions to use <figure>+<figcaption>.