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.
Related
I have an image element with title and alt attributes that is required for SEO optimization. But when the user hovers over the image. The screen reader (NVDA) reads the image and alt text even if they have the same text. I need to find a way to make the screen reader ignore one of them especially alt. Does anyone know a solution? Thanks
<img
className={className}
src={src}
alt={alt}
title={title}
loading="lazy"
{...props}
/>
You should remove the title and use only alt.
All screen readers handle alt and title differently. They all read alt, but when title is also present, their behavior differs and in fact it's configurable (for example Jaws allow to configure that).
Some screen readers read only alt and totally ignore title
Some screen readers read both, alt and then title
Some screen readers read both, title and then alt
Some screen readers read both but only if they are different
Some screen readers read only the longest of the two and ignore the other one
...
This is the reason why using title is discouraged, as it's impossible to know exactly what will actually be read. The alt attribute is the only reliable alternative text to use.
Additionally, forget about all that SEO thing. No one really knows if what you do has any influence.
This is always pure speculations. Think first about users before thinking about machines.
You generally shouldn't have an alt attribute and a title attribute on the same image. It's not invalid, but it doesn't make much logical sense, considering that they do many of the same things. Many browser/screen-readers will also read both, one after the other, which can be a less than ideal experience.
There is a visual component to title where it will appear on hover (which alt doesn't have), but it's not usually clear which elements can be hovered over to produce a tooltip and which can't.
It's also worth noting that title is made for advisory information, whereas alt is made for a textually equivalent description of an image.
For these reasons, I think it's usually best to just avoid the title attribute unless you have some really good reason to be using it and use alt instead. I would remove the title attribute on your image since alt takes precedence in the accessible name computation.
If you really want to, you can remove alt and just have the title attribute. It's not typically the done thing, and some automated checkers may complain about this, but it is valid HTML.
It's also worth mentioning that alt and title aren't SEO attributes. You may be doing these things as part of an SEO review, but these attributes are designed for accessibility. If search engines can also benefit from them, then so be it. At the end of the day, both SEO and accessibility are about making things machine-readable.
you can add aria-hidden="true" , if alt and title both are present
I have an SVG image that I am going to use on my website like this
<img src="test.svg" alt="This is a test alt" />
The question I have, is using .SVG with IMG selector and 'alt' tag OK/good for accessibility?
It doesn't matter the format (as long it is a valid one), it does matter the tag you use (img) and its attributes in this case the alt which has to be descriptive of the image user is seeing
And because you have a svg format, you can also use svg inline as long you follow the accessibility guidelines from W3C.
Provide text equivalents for graphics.
When the text content of a graphic (e.g., in a ‘text’ element) explains its function, no text equivalent is required. Use the ‘title’
child element to explain the function of ‘text’ elements whose meaning
is not clear from their text content.
When a graphic does not include explanatory text content, it requires a text equivalent. If the equivalent is complex, use the
‘desc’ element, otherwise use the ‘title’ child element.
If a graphic is built from meaningful parts, build the description from meaningful parts.
Yes SVGs in an image tag are accessible with an alt. I have also seen an aria-label used but this is probably not necessary. You can also use SVGs natively (without the img tag) follow these specifications:
Official spec here for accessible svgs:
w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines
and an article here on WebAim for the Future of SVG accessibility: webaim.org/blog/future-web-accessibility-svg
and here the W3C Editor's Draft (meaning it's not yet complete): w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments
Make sure to test with the SiteImprove Chrome Extension and whichever screenreader you have access to, JAWS, NVDA or VoiceOver. If the svg is properly read, then chances are it's passed Accessibility.
your example is fine, a screen reader can use the alt property to describe the image
Yes. It is! But first I think we need to have a clear idea of what an image really is. Image is a graphical/visual representation of something. It could be a figure or art. Now there's numerous ways to display an image. But When it comes to format(JPG, PNG, GIF OR SVG),it is the method of how the image is is processed + stored and many other functionality. Once an image is displayed, the only thing that matters to common users, is the content. "alt" is an accessibility attribute, which describes the content of the image. So there should be no relation with "alt" attribute with the format of the image.
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.
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.