I'm attempting to write good fallback text content for a webcomic. Naturally, there is a huge amount of actual text locked in the image, and plenty of descriptions/actions/expressions that could also be described. Having longdesc="#transcript" seems like the perfect use case, and comes with benefits for searching and automatic translation.
But what do I do with the alt? I've checked the official specs, and dug around in WebAIM and similar sites, but I've never seen a use case for having longdesc supplant alt. This makes sense for the usual applications (overview a chart in the alt text, link to a full breakdown elsewhere), but it seems like any alternative text I could offer for a comic would be redundant and miss out on the rich markup provided by the long description.
Here are some possibilities:
<img alt="" longdesc="#transcript" />
<img alt="[transcript text stripped of HTML and made attribute-safe]" longdesc="#transcript" />
<img alt="[Summary of comic contents... Which can get iffy, like this: 'Garfield talks about being fat. Punchline: he's fat.']" longdesc="#transcript" />
<img alt="[apologize profusely to screen reader users]" longdesc="#transcript" />
None of these seem ideal for various reasons, whether that be repeated content, no longdesc support, or me annoying Assistive Technology users. Without a sound declaration from folks who have thought about and dealt with this stuff way more than I have, I'm at a loss.
The alt attribute is required for accessibility, and it is even formally required by the HTML 4.01 specification. The use of the longdesc attribute, even if it were implemented, would not make the alt attribute unnecessary. The description of img in HTML 4.01 shows the following example:
<IMG src="sitemap.gif"
alt="HP Labs Site Map"
longdesc="sitemap.html">
It adds: “The alt attribute provides a short description of the image. This should be sufficient to allow users to decide whether they want to follow the link given by the longdesc attribute to the longer description, here "sitemap.html".” (Whether this would be adequate even if longdesc were supported is a different matter.)
Due to lack of support, longdesc has remained useless. In order to refer to a long description, you need to use a normal link near the image. This lets anyone (even people who can see the image but may need some explanation) access the description.
I would think about it from the point of view of someone who needs alt-text, i.e. someone who cannot see the image.
It appears that the transcript is on the same page (from longdesc="#transcript"), so the 'link' that longdesc provides would take you to another section of the same page? Perhaps the transcript is further down the page?
In which case the key information for that user is what it is (very briefly), and where to find the transcript.
I would suggest something like:
<img alt="Comic frames, full description below." longdesc="#transcript" />
Although longdesc is getting a little more support these days and an update to the HTML5 spec is proposed, you can't rely on it yet.
Therefore if the transcript is not immediately apparent, I'd also include a link nearby to take you to it.
Related
I have an image that is purely decorative—the meaningful content for its section of the page is provided by header and sub-header text, and I have no need to highlight the image to assistive software.
In general, the best practice for this from an accessibility POV is a null alt attribute:
<img src="human_unfriendly_filename.jpg" alt=""/>
However, SalesForce's Visualforce templating system strips blank tags out of the source entirely, so the above results in
<img src="human_unfriendly_filename.jpg">
being rendered on the live page.
This is very bad from an accessibility POV, as assistive software will likely default to the image filename. Our SalesForce implementation partner has suggested alt="image", but this is still flagged by our accessibility software, and is explicitly called out as a bad example in the <img> element reference (albeit in a somewhat different context).
Is there a better approach? Visualforce also strips alt (attribute with no value), and alt="null" is apparently discouraged. I'd imagine this only comes up in a narrow set of circumstances, but could an alt value with descriptive text of the image be more appropriate here? Or some other solution? Changing the filename?
I have some time with our a11y consultant booked soon, so I'll report back with their response as well.
You can use one of the following attributes : aria-hidden="true" role=none or role=presentation
Instead of an image use an empty div with appropriate dimensions and image as a background of a div.
After a call with our a11y consultant—who was quite bemused by Visualforce's quirks—this is what we decided on:
<img src="human_unfriendly_filename.jpg" alt="terse description" aria-hidden="true"/>
Technically, it's not great practice to have a non-null alt and aria-hidden on the same image (why would you both describe and hide it?) and might still trigger errors. But it worked as intended (image ignored) in all the readers we tested, and in the event that one does decide to read the alt, its 1-2 words should be minimally obtrusive.
He offered some pushback against further specification with role as it might just look like throwing spaghetti at the wall (my interpretation of his words), and on a broader level stressed the importance of documenting the underling rationale somewhere (commit comments), just in case someone tries use the non-standard approach as evidence of a11y carelessness in legal proceeding.
Finally, while moving from <img> to background-image was indeed the "cleanest" fix, its likely this code pattern will be used at some point for an image that contains user-relevant information, and thus require the ability to provide a non-null alt value.
For a webpage with multiple images of a single product, such as with different angles. Is there a requirement for alt tags for each image?
Viewing examples on Amazon it seems they only have an alt tag on the first product image, but after which there is no alt tag or aria related tags.
The first example here says that the stars have empty alt tags.
To follow proper standards, is it required to have an empty alt tag after the first image? To completely hide the extra non-helpful(same thing different angle) images using aria-hidden or to just do what Amazon did and only put an alt tag on the first image.
Also, are product images themselves even relevant content? If the product title is already there, wouldn't it be easier to just hide the images completely for screen-readers.
According to the W3, "If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group." See https://www.w3.org/WAI/tutorials/images/groups/
First don't use Amazon for examples of how to do accessibility - their site is not a good example (they try, but they have years of bad practices that are hard for them to work around).
The answer to this depends on the product being sold.
For example if it is a mug with a picture of a dog and a cat cuddling then a single image alt tag would probably be the right option and hide the rest of the images from the screen reader.
However if it was a complex product with different images showing dimensions, specs, features etc. then multiple alt tags may be appropriate.
The question to ask is 'does this image portray any new information that would influence a decision to buy'.
If the answer is yes, add an alt tag, if the answer is no, hide it from a screen reader.
EDIT - To Address the Edit Made To The Question
From the perspective of pure accessibility and 'rules' - no, Alt descriptions are not needed for images if every single aspect of the image is described elsewhere.
However, in practice, there should always be at least one Alt tag with a useful description of the product.
The idea of alt tags is to provide blind users with as much information and as similar an experience as possible as sighted users (I am aware not only blind users use screen readers but for simplicity of explanation bear with me).
At the same time however, a blind user will also thank you for providing them with the least amount of information possible to give them the same experience as a sighted user.
A sighted user would see an image first and so should a blind person as it will make sense in the document flow, but adjust your alt description to provide information that is missing from the main description so as to avoid too much duplication of information for screen reader users.
Also (wandering away from accessibility a bit but still relevant as to why to always have at least one alt tag) don't forget SEO - you want that product image to show up in image search if at all possible, especially in a commercial setting, alt tags still help search engines categorise images.
The final argument for whether you should have at least one alt tag is what happens for people who disable images to save on bandwidth - you should still have at least one alt tag to describe what the image(s) should be about. (a different type of 'accessibility' but still relevant).
tl;dr -> yes have at least one alt tag still.
EDIT: One more question, are product images themselves even relevant content? If the product title is already there, wouldn't it be easier to just hide the images completely for screen-readers.
That's the main concern here.
Can we consider images in a commercial website as purely decorative? I don't think so.
Screenreaders can be used by people who are not totally blind, or for blind people to share information with fully sighted people : "look honey, do those colors will match ?"
For instance, people with LHON can still have peripheral vision, and may use a screenreader to facilitate their search.
The more important thing is to have a simple and comprehensive text alternative for the image.
If you only repeat the product name in the image, then having a blank alt might be better. But still, we can imagine someone blind wanting to share the image to get feedback comments.
What would be the correct usage of the alt attribute, given a picture quote?
It would seem to qualify as an image with 'decorated text,' which W3C recommends placing the entirety of the text in the alt attribute. However, I'm guessing that their idea of decorated text is a short phrase. In fact, they recommend a 'short line' for the alt attribute.
Additionally, some screen readers apparently break up the text into blocks of 125 characters.
More specific to my circumstances (since this question probably seems trivial), I run a quote website that gets quite a bit of traffic, so making sure it's accessible and semantic is important to me. In the next version, the quotes will be displayed as a collage — some text, some picture quotes.
I was initially planning to use the following, based on the fact that the alt attribute should describe the image with a short sentence:
Picture quote about courage, perseverance, and success
That's short, descriptive, and great for SEO. However, it would seem to me that descriptions like this would be useless to a blind person who's browsing through quotes on the site. Yes, they could click through to get the entire quote, but still, the alt text wouldn't make that original image or page very useful to them.
And, as an afterthought, I don't know if the word "picture" should be used or not. It's usually recommended to leave out words like image, picture, icon, etc. But in this case, it would seem to be useful, giving the user more information about what's being read to them — considering that the alt text would actually be what's ON the image, rather than what the original image is. And I wouldn't think that the actual image should be referenced at all in the alt attribute, since the 'purpose' of the image is to present the quote.
Then I figured this would make the most sense:
Quote By Anne M. Lindbergh: 'It takes as much courage to have tried
and failed as it does to have tried and succeeded.'
This gives the user a description of what is about to be read to them, followed by a colon — which, from my understanding, will cause screen readers to pause — and concluded with the quote.
The only problem with this is that long quotes, which can get up to between 200 and 600 characters, will create problems for screen readers when used as the alt text. And I even wonder if this format might negatively affect SEO (making it look like I'm over-optimizing).
So with all of that in mind, should I essentially view the picture quotes as 'complex' images, and therefore inaccessible? Or should I add all of the text and hope for the best?
If an img element is the only content of an a element, the alt attribute has to describe the purpose of the link, not necessarily the image itself (details).
But there isn’t really a difference in your case, as the image contains the full quote and the author, and one of these two parts (or both) would be the reason for visiting the link, so you should convey them in the alt, too.
So include in alt exactly what is seen on the image. You could consider adding "Quote of", but that’s probably not necessary for a site about quotes. But I wouldn’t add "Picture of", because it doesn’t seem to be relevant that the quote is provided in the form of an image (and it would describe the image, but you should describe the purpose of the link).
<a href="/anne-m-lindbergh/quote-1">
<img
src="/anne-m-lindbergh/quote-1.png"
alt="Anne M. Lindbergh: “It takes as much courage to have tried and failed as it does to have tried and succeeded.”"
/>
</a>
If it becomes too complex for alt (e.g., too long), you could use object instead of img. This would allow to use markup like q and cite for the fallback/alternative content, too. However, I don’t know how well it’s supported by various consumers.
<a href="/anne-m-lindbergh/quote-1">
<object data="/anne-m-lindbergh/quote-1.png" type="image/png">
<cite>Anne M. Lindbergh</cite>:
<q>It takes as much courage to have tried and failed as it does to have tried and succeeded.</q>
</object>
</a>
Every example I find for https://schema.org/Article gives at least one error in the Google Structured Data Testing Tool
Supposedly headline is now required; that's fine, just change itemprop="name" to itemprop="name headline"
But it also gives the error:
A value for the image field is required.
Required by:
Articles Rich Snippets
why is an image required for Articles?
why isn't this documented anywhere?
what should I give as an image?
I've heard people say the image should be an image of the article (literally interpreting the documentation: "An image of the item.") - Like an actual screenshot of the article. Isn't that useless? Is that even correct? Do I have to give an image? Will the same blank image or logo be ok for every article? Or would duplicate images get penalised due to not being relevant?
Schema.org (the vocabulary) doesn’t require any properties.
Google’s Structured Data Testing Tool is not a Schema.org validator. The tool primarily tests if your use of Schema.org conforms to Google’s own requirements for showing one of their Rich Snippets (or similar features/products).
So if Google’s tool says that a "value for the image field is required", this does not mean that you are technically required to provide it, or that something bad (like a ranking penalty) happens if you don’t provide it. It just means that Google won’t display a Rich Snippet for this document on their SERPs.
Google typically documents the properties they require for their features on https://developers.google.com/structured-data/ (example: their Article Rich Snippet).
Discussing which images are okay in Google’s eyes is off-topic on Stack Overflow (you might get help on Webmasters SE).
From Schema.org’s perspective: the image property is, as you note, defined to have an "image of the item" as value. For Product, it could be a photograph of the product, for Person a portrait etc. For an Article, the equivalent would be a photo/screenshot of the article itself; however, that’s often not really useful. So I think it’s common practice to specify an image that represents this article somehow: practically speaking, an image that could be shown as teaser image for your article. But you should not use the image property just because an image is part of the article (so don’t use it for all images, and don’t use it if you have no image that would/should represent the article); for such cases, you could use the hasPart property instead.
When defining a title or alt to an anchor tag, which is valid HTML5?
Is it best to define both, or only one?
Does it affect SEO at all?
in HTML, even from version 4, the title attribute is valid for almost all elements. alt is different in that it's only valid for images, the idea being to provide a text only alternative version of the image, which would be useful to people with visual impairment (as they'd be able to hear their browser read the text)
It's good practice to provide an alt attribute for images, even if you're going to leave an empty string ( "" ). The alt attribute helps improve accessibility for screen readers since the user most likely can't see the image with which it's associated. The title is less useful for accessibility purposes but is still a good practice to get into.