search

fletcher / MultiMarkdown-4

This project is now deprecated. Please use MultiMarkdown-6 instead!
https://github.com/fletcher/MultiMarkdown-5
Other
306 stars 59 forks source link

Image and Figure attributes are not accessibly rendered #86

Closed teknetia closed 9 years ago

teknetia commented 10 years ago

When you insert an image in the document, particularly as a figure like the below example, the generated HTML is not accessible as it uses the alt and title attributes incorrectly.

![Image figure caption](path/to/img.jpg "Image title text")

In the example above the generated HTML is

<figure>
    <img src="/path/to/img.jpg" alt="Image figure caption" title="Image title text" />
    <figcaption>Image figure caption</figcaption>
</figure>

The problem is that for a screen reader user or any user agent that doesn't support images the wrong information is given to the user. I am sure this was done to ensure alt="" always existed but it is incorrect use of the attributes and disadvantages a set of users.

The correct usage is alt is the text displayed if the image can't be displayed and as such should describe the image or otherwise give that user context of what it is. The title attribute is the one that the figure caption should come from as this is the name of the image. There is a great write up about this at 456 Berea Street for reference.

The correct output of the figure should be:

<figure>
    <img src="/path/to/img.jpg" alt="Image figure caption" title="Image title text" />
    <figcaption>Image title text</figcaption>
</figure>

This change would of course cause many backwards compatability issues so that must be taken into account. I have a few ideas on how this could be handled. Of course all images are required to have an alt attribute so at a minimum an empty string should be added where nothing is provided.

fletcher commented 9 years ago

I'm not sure why you feel that the the specified caption should not be used as the figcaption. The title and the caption are not the same thing, so substituting them here doesn't make sense.

If you have complex image needs that require more options regarding alternative text for the alt attribute for better accessibility, then you can always use raw HTML. Markdown, and by extension MultiMarkdown, is designed to cover basic use cases. It doesn't cover everything that every user may need.

The information used for the caption can include Markdown markup such as bold/emph/etc. For this to work, it has to draw from the caption text, not the title text (which does not support markup).

You are, of course, welcome to modify the source to handle this situation however you see fit for your own needs.