Audit image labels for accessibility

[mrphs]

I like how detailed SecureDrop docs are, and it seems like you've done your best not to depend on screenshots, however they are absolutely useful and I just realized they don't seem to have the "title" attribute. This is often overlooked as unnecessary but when I was doing UX studies some time ago, I learned that's something visually impaired people highly depend on.

I know that you're working on new home for documentations. Perhaps this can be something to think about implementing while making the new website. :)

[mrphs]

especially for pages like configuring the router where it says "Keep adding aliases until the screenshot matches what is shown here"

[conorsch]

Sounds like we should add an :alt: parameter to our image:: directives, as seen here: http://docutils.sourceforge.net/docs/ref/rst/directives.html#image (Sorry about the SourceForge URL; it was linked to from here: http://www.sphinx-doc.org/en/stable/rest.html.) From that page:

Alternate text: a short description of the image, displayed by applications that cannot display images, or spoken by applications for visually impaired users.

I'm not aware of any automated tool to do so, but we should be able to wire up a creative recursive grep that will serve for linting.

Next step is meticulously stepping through the docs and making sure all images have alt text.

[mrphs]

After looking deeper at the docs for firewall settings, perhaps a better hack would be adding an "info" note for visually impaired users and suggest downloading the template instead of trying to go through the manual configs. Firewall rules are all only screenshots.

[eloquence]

Sphinx does in fact generate alt attributes (the recommended way to describe media to screen reader software and other assistive technologies) from the labels used for the images throughout the docs, e.g.:

source.html:<p><img alt="Submit a document" src="_images/source-submission_entered_text.png" /></p>
source.html:<p><img alt="Confirmation page" src="_images/source-lookup.png" /></p>
source.html:<p><img alt="Logout" src="_images/source-logout_flashed_message.png" /></p>
source.html:<p><img alt="Restart TBB" src="_images/restart-tor-browser.png" /></p>

For accessibility purposes, it would be useful to audit these labels to make sure they are descriptive of the image, as opposed to labels like "Copy file 1".

[eloquence]

@joaedwar Good meaty candidate issue for you to work on, will require reviewing all image labels to make sure they do in fact help make our documentation more accessible, e.g., when read out loud to a visually impaired person via a screen reader.