Add alt text to the Choosing a Programming Tool page.

[acharraggi]

Add alt text to images and indent ..image directives.
The alt text for images on this page showed the file name.
e.g. <img alt="../../../_images/BlocksPicture11.jpg" src="../../../_images/BlocksPicture11.jpg">

Note: This pages uses ..image instead of the usual ..figure. Each image is preceded by a paragraph about the programming tool so the image is in context. No caption is really required, but we should provide screen reader text in the alt tag.

While testing that in a screen reader I noticed that each numbered list was a list of one item. That's because the ..image directive is not indented so it was ending the list. Then the next numbered item started a new ordered list.
The screen reader was saying things like "A list of one item", then reading number 2 for the 2nd item.
Now it says a list of three items and then reads them in order.

The images properly say the alt text when encountered by the screen reader.

Here's what the RST source looks like now with the alt text and ..image indented.

1. **The Blocks Programming Tool** - A visual, programming tool that
   lets programmers use a web browser to create, edit and save their op
   modes. This tool is recommended for novice programmers and for users
   who prefer to design their op modes visually, using a drag-and-drop
   interface.

   .. image:: images/BlocksPicture1.jpg
      :alt: Screenshot of the Blocks Programming Tool showing a graphical Blocks program.

2. **The OnBot Java Programming Tool** - A text-based programming

Which generates better looking HTML with a proper ordered list and alt text for the images.

<ol class="arabic">
<li><p><strong>The Blocks Programming Tool</strong> - A visual, programming tool that
lets programmers use a web browser to create, edit and save their op
modes. This tool is recommended for novice programmers and for users
who prefer to design their op modes visually, using a drag-and-drop
interface.</p>
<img alt="Screenshot of the Blocks Programming Tool showing a graphical Blocks program." src="[../../../_images/BlocksPicture11.jpg](https://github.com/_images/BlocksPicture11.jpg)" />
</li>
<li><p><strong>The OnBot Java Programming Tool</strong> - A text-based programming

[acharraggi]

Converted the ..image directive to ..figure. Set the figure :alt: to blank because we're adding a visible text captions.

Converted the list to section headings, added a Recommendation header, and made minor text adjustments to make the page more readable as a web page.

I checked the generated PDF and noticed it was putting one image per page that was separate from the text. The PDF generator does tend to float images out of context (which is not good). However, with text captions at least they now have some context. I adjusted the image sizes so that the first two end up on one page and the the remaining images fit with their text on one page.

The web presentation still looks with smaller images. Users can select the image and open it in a new tab if they want full size. I also set figure **:class: no-scaled-link ** since these images did not have a web link before, and I don't thing they need one now.

I think this could be reviewed now.