Geek Answers Handbook

Alt? Longdesc? Title? What happens, especially for sites with heavy images?

So, I tried to make my site as accessible as possible (for non-JavaScript users, web crawlers, screenshots, etc.), and I got into a big catch.

The site I am developing is very heavy. (I draw stupid things in my free time, and the site is a kind of "showcase".) Each page on the site has one image (or several, if the context is needed or the image consists of several panels), which is usually accompanied by a single caption below . Therefore, when I got to the point that I had to add access features, I was not sure what to do. For example, let's say I had the image of a man who ate an apple, and there was a worm in jest. So, the first thing I did was to add a ridiculously descriptive text alt, as that was the only way to provide an “equivalent” for screen reading.

<img src="appleeat.png" alt="A man bites into an apple. As it turns out, there a worm in it!">

At first it looked fine, but then it all went very fast when I suddenly wanted to add text up to 300 characters (!!!) for more complex jokes and images. Not only that, but apparently alt text is not for description anyway .

So, I have such problems:

  • Alt text is for equivalents, not descriptions. However, the only way to provide an equivalent in this case is to provide a description.
  • longdesc seems more appropriate for this feat, but longdesc not supported by any browser (at least according to W3Schools), although it seems to be in the HTML5 specification .
  • <figcaption> seems to be the way to go, but in the end it displays the text under the image in question, which is definitely not very attractive to my site, especially if I want to add additional signatures and context to the <p> tags or something like that.

So what should I do? What would I put and where? I’m completely at a dead end, and to be honest, I’m not sure that creating a site based solely on images that are accessible to people who cannot see very well is a good idea.

+8
html accessibility seo image alt
source share
4 answers

The alt attribute is intended for alternative text, that is, for textual replacement of the image, so in the example it is sufficient if it intelligently reports the same story as the image. In fact, most images cannot have texts that are complete “alternatives” or “replacements”; it is usually a matter of capturing some of the most important messages, if possible.

The alt text can be any length. The statement that alt texts should not be descriptions does not mean that it cannot be detailed if necessary. The fact is that there are too many descriptions that say something about the image without transmitting its message (for example, “big red bullet” or “Man in a canoe”).

The longdesc attribute longdesc supported by some software, but is heavily discussed, and is not part of the W3C HTML5 CR, but is being developed as an independent "extension".

The figcaption element is for captions presented with the image. It does not address the issue of alternative text at all. It is intended to present to the user whether he sees the image or not.

+4
source share

If you want to provide complex alternative text (where “complex” can mean: containing lists, tables, audio / video, etc.), you can either use the img element with the longdesc attribute, or object instead of img .

longdesc

In HTML 4.01, longdesc is part of the specification. In HTML5, it was removed and is now designed as an HTML5 extension ( but its currently only a working draft since 2013. Update : became a W3C Recommendation ).

Problem: you will need to enable content on one page, but then you should not visually hide it (since users who do not have access to the screen may want to access this content). Or you will need to add separate pages for the content (but then the search engines will not associate this content with the image, that is, you will miss the rating potential).

object

The object element can be used for any type of media. Its content is backup content that allows you to use markup for alternative text.

 <object data="appleeat.png" type="image/png"> <!-- the alternative content goes here --> <p>A man bites into an apple. As it turns out, there a worm in it!</p> </object>
+2
source share

Here are some examples of alternative text that may be applicable to your situation:

Although I agree with @Jukka that long text is not a problem in itself. It is true that "alt text is not for descriptions", but only because equivalent content is used for the text. If the equivalent content for a particular image is its description, then that's fine.

It is just that for a large number of images used on the Internet, it is not. For example, the best alt text for the Stack logo at the top of this page will not be

Logo: an abstract tray full of paper, followed by the word “stack” and in bold, the word “overflow”

This is simply a “stack overflow” because it provides an equivalent experience for a partially visible person (i.e., he tells them which website they are on).

But if your images are cartoons, I think that for writing text for text, this is a bit like making sound descriptions for movies. You should be more visible if you want to provide equivalent experience. This is certainly a problem, especially if you do not have experience or partially visible users to discuss this with.

Joe Clarke, in his book Making Access Websites, discussed image descriptions:

And even providing alt text for comics, although its example is for dialog-heavy strips, and I'm not sure what experience it provides in today's screen readers:

+1
source share

I think adding descriptive text to <figcaption> is a good idea. Of course, the problem is with browser support, this should be accessible using CSS:

figcaption { display: block; }

Then you can hide this text by default figcaption { display: none; } figcaption { display: none; } and include a link somewhere that will refresh the page with the inscriptions displayed through an alternative style - figcaption { display: block; } figcaption { display: block; }

This parameter then eliminates the need for javascript solutions and gives only headers for those that specifically request them.

Perhaps you can tweak this with a bit of php:

 <head> <style type="text/css"> <?php if(isset($_GET['CaptionDisplay'])) { echo 'figcaption { display: block; }'; }else{ echo 'figcaption { display: none; }'; } ?> </style> </head>

HTML Link - <a href="example.php?CaptionDisplay=true">Show captions</a>

This is completely out of my head :) Let me know if I can better explain something.

0
source share

More articles:


All Articles