Improve accessibility of survey task example photos

[eatyourgreens]

Staging branch URL: https://pr-5533.pfe-preview.zooniverse.org

Towards #5531.

Add more descriptive labels to the controls for example images.
Make the example image a live region.
Lint survey task components.

Required Manual Testing

• Does the non-logged in home page render correctly?
• Does the logged in home page render correctly?
• Does the projects page render correctly?
• Can you load project home pages?
• Can you load the classification page?
• Can you submit a classification?
• Does talk load correctly?
• Can you post a talk comment?

Review Checklist

• Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
• Does it work on mobile?
• Can you rm -rf node_modules/ && npm install and app works as expected?
• If the component is in coffeescript, is it converted to ES6? Is it free of eslint errors? Is the conversion its own commit?
• Are the tests passing locally and on Travis?

Optional

• Have you replaced any ChangeListener or PromiseRenderer components with code that updates component state?
• If changes are made to the classifier, does the dev classifier still work?
• Have you resized and compressed any image you've added?
• Have you added in flow type annotations?
• Have you followed the Springer guidelines for commit messages?

[coveralls]

Coverage increased (+0.0003%) to 49.163% when pulling c366034 on a11y-survey-task into e55e021 on master.

[simensta]

I have reviewed this branch on the following systems:
OS X Catalina | Safari 13.0.2
OS X Catalina | Chrome 77
OS X Catalina | Firefox 69.0.2
iPhone XS Max iOS 12.0 | mobile_Chrome
Windows 10 | Edge 18.0

In Chrome and Safari, I was able to hear the changes for example images when using VoiceOver.