I'd like to know the difference between title attr of the tag "a" and alt attr of the tag img.
Also, which should I use when I have an image inside an a? Just like in this case:
<a class="duplicar" href="#"><img src="Images/btnSegDuplicar.gif" alt ="Duplicar" width="76" height="20" /></a>
Right now, as you can see, I'm using the alt but I'm having a little issue. No matter the browser in my development server the tooltips is shown, but in my production server it is not. I tried using both of them (alt and title) and it worked, but it is kind of ugly. Why is that difference between both servers?
You should always use the title attribute for tooltips. With images as well as with anchors.
The alt attribute is solely for the purpose of displaying a text when the image can not be viewed for some reason. That this text is sometimes shown as a tooltip is an incidental artifact of some implementations, and by no means a part of its specification.
Related
I am currently studying the web accessibility guidelines that concern HTML5.
Concerning images, I am currently adding images in HTML as follows:
<!-- Normal Images -->
<img src="https://placeholder.pics/svg/300x300" title="Image Placeholder" alt="Image Placeholder" aria-labelledby="Image Placeholder" width="300" height="300">
<!-- Decorative images -->
<img src="https://placeholder.pics/svg/100x100" role="presentation" aria-hidden="true" alt="" width="100" height="100">
Is it recommended by WAI-ARIA to add both aria-labelledby and alt tags together for normal images? or is there something else that I should adopt?
Do I need to add role="presentation", aria-hidden="true", and alt="" to every decorative image? All three of them should go together? or only one of them? (if only one or two of them then which ones?)
Is it a good practice to add both aria-labelledby and alt tags together for normal images? or is there a better practice that I should adopt.
aria-labelledby
No, in fact adding aria-labelledby and alt together will result in some screen readers reading the name twice. Just use an alt attribute, that is what it is there for, it has the widest support (100%) and will do the job just fine.
Also aria-labelledby requires at least one element in the DOM that contains text, you reference it by ID. You can have more than one label too just for reference. It is designed to be used on other elements that can't be labelled using semantic HTML, not really for images (there are always exceptions but they are rare and this is general guidance).
e.g.
<span id="ID1">Read First</span>
<span id="ID2">You can add a second label that will be read second</span>
<div aria-labelledby="ID1 ID2"></div>
title attribute
Also don't use a title attribute unless you are planning on making it the same as the alt attribute. Otherwise mouse users get a different experience to screen reader users as the title attribute is not accessible to most screen readers. See this in-depth answer I gave about the title attribute and how to roll an accessible version if you want to use it.
accessible image example
So your final, accessible image would look like this:-
<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">
Perfectly accessible and easy to maintain.
Do I need to add role="presentation", aria-hidden="true", and alt="" to every decorative image? All three of them should go together? or only one of them? (if only one or two of them then which ones?)
alt attribute
All you need to do is add an empty alt attribute. Notice how I said empty and not null.
e.g. alt="" NOT just alt. Using alt as a null attribute will result in it being ignored by some screen readers so the file name will get read out.
role="presentation"
For completeness you can add role="presentation" but it will not add any extra support as far as I am aware.
With that being said I personally add role="presentation" to decorative images as our unit testing will flag any empty alt attributes unless this is added. This was a deliberate decision so when we run tests we don't keep checking the same empty alt attributes are correct.
As support for empty alt attributes is also at 99/100% it is also perfectly valid and accessible to just use alt="".
aria-hidden
The only place (well the main time, there are always exceptions) where you would want to use aria-hidden on an external image is if you are going to dynamically hide and show it. Some screen readers monitor WAI-ARIA changes better than DOM changes.
aria-hidden and inline SVGs
I would recommend adding aria-hidden="true", role="presentation" and focusable="false" on inline SVGs that are purely decorative though as Internet Explorer can sometimes allow them to be focused.
Note that you don't use alt attributes on inline SVGs anyway.
decorative images examples
So your final decorative image would be:-
<!--all image types loaded externally using `img` including SVGs-->
<img src="https://placeholder.pics/svg/100x100" alt="" width="100" height="100">
<!--exception for inline SVGs due to focus bug in IE-->
<svg aria-hidden="true" role="presentation" focusable="false">...</svg>
final note on WAI-ARIA
WAI-ARIA is there to provide information when there is no semantic way to do so.
Adding extra WAI-ARIA all over actually makes accessibility worse. You should always start with 'is there a native way to give the information to a screen reader', if there is, WAI-ARIA is not needed or in fact recommended.
After Thought
I mentioned inline SVGs not using the alt attribute, instead you want to use <title> as part of the SVG. Read this quick article on accessible SVGs for a quick overview.
The image inside this anchor tag throws a "Linked image missing alternative text" error in the WAVE accessibility checker:
<img src="google.jpg" alt="" />
You can't have a decorative image being the sole element of a link. This image is a link, it's not decorative.
<img src="google.jpg" alt="" />
When an image is the only content inside the link, its alternative should contain the link destination description.
In other cases, adding the role="presentation" would have been sufficient to explicitely state that you willingly wanted a decorative image which is not the case here.
Support for the title attribute in screen readers and other assistive technologies is extremely limited; it is also useless for sighted keyboard users.
See for example,
Don't Rely on the Title Attribute for Accessibility (2016)
Using the HTML title attribute – updated (2013)
If a link contains only an image and no text, the content of the alt attribute constitutes link's "link text", i.e. this is what a screen reader will announce when the link receives focus. For this reason, the alt attribute cannot be empty in this case. You need something like the following:
<img src="google.jpg" alt="Google" />
If you include actual text next to the image, as in the following example, you can leave the alt attribute empty:
<img src="google.jpg" alt="" />Google
In the last example, the image can be treated as a decorative one, due to the presence of proper link text. If the string Google were included in the alt attribute, it would be announced twice by a screen reader.
Adding a title attribute to the link is not a great idea for the following reasons:
It is useless to sighted keyboard users who cannot hover the mouse pointer over the link.
Screen reader support for the title attribute is not entirely consistent, as can be seen from the test results A "click here" link with TITLE attribute: Screen reader compatibility (last updated in April 2019). Adding the attribute title="google link" to the above examples would just lead to needless repetition in those screen reader and browser combinations that actually support that attribute on links.
Trying to figure out why a Lighthouse audit flagged a bunch of my links as failing the elements have discernible names
<h3>
My New Post Title
</h3>
My question is do all links need aria-labels because I thought if it's just a normal link the text inside the link is what is required?
Or is there something else going on with the structure of my markup? Another flagged element is this one:
<a class="custom classes" href="https://...">
<div class="custom classes" style="background-image: url('https://...');"></div>
<div class="article-thumbnails-small__title">Post Title</div>
</a>
For that one I understand that the a has no text so the aria-label should go on the div with the actual post title, correct?
SOLVED
I was looking at the wrong element... Have a nice day.
Both of your examples are fine and should not be flagged. Something else must be going on. Is the code you posted exactly what was being tested?
ARIA attributes should be used sparingly and are only meant to be used when native markup isn't sufficient. For links, as you said, if there's any text between the <a>...</a>, then that's "discernible text".
If the link doesn't have any direct text but if a child element does, then you're also ok, such as your second example. The <a> doesn't have text but the second <div> has "Post Title". All the child elements of the <a> are considered when looking for the "discernible text". When I tab to that link, I'll hear "Post Title, link" from a screen reader.
However, CSS can affect this. If your class="article-thumbnails-small__title" on the second <div> has a display:none or visibility:hidden, then that text will not be discernible because it's hidden.
If the class has width/height:0px, then it might not be discernible either. Sometimes 0 sized elements are considered hidden.
If your link does not have text but has a nested <img>, as long as the image has alt text, then you're ok.
Good:
<a href="foo.html">
<img src="foo.jpg" alt="foo">
</a>
No Discernible Text:
<a href="foo.html">
<img src="foo.jpg">
</a>
The aria-label attribute on links (a elements with a href attribute) should only be used when, for whatever reason, it is not possible or not desirable to use perceivable link text. (This includes the alt attribute in image links.) If you have normal link text, you should not use the aria-label attribute because that attribute would override the link text. See step F of the text alternative computation in the document Accessible Name and Description Computation 1.1: the a element has an inherent role that allows the computation of its name from its content (i.e. the link text and/or the alt attribute on an img in the link). However, this step is only followed if there is no aria-label attribute on the link element (see step C.
See also Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger in the WAI-ARIA Authoring Practices 1.1, which points out that ARIA sometimes overrides the original semantics or content, citing aria-label as an example.
So if Lighthouse flags links with perceivable link text and no aria-label attribute, there must be something else going on, such as CSS that hides elements.
Let's say I have a list of images on the page, that are wrapped within links. So when u click an image it gets you to a page that displays the larger image
How should I handle title tags here?
Do I put the image title on both the image and the link, or just the image? Does it matter if the title is the same as the "alt" attribute?
<a title="image description" href="#"><img title="image description" alt="image description" src="image.jpg"></a>
HTML5 defines guidelines for alt usage. See the section "A link or button containing nothing but an image":
When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.
So your alt attribute content could include something like "Open larger version of …".
(You may also be interested in my answer to the question on UX SE: What should the ALT text be for an image that is also a link?)
You should never have the same content for alt and title. See the general guidelines (from the W3C Candidate Recommendation of HTML5) (Update: In the W3C Recommendation of HTML5, this section got changed, and it no longer contains that quote.):
A corollary to this is that the alt attribute's value should never contain text that could be considered the image's caption, title, or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.
The image title attribute should describe the image.
The link title attribute should describe the target of the link.
<a title="view larger version" href="#">
<img title="image description" alt="image description" src="image.jpg">
</a>
I want to know what the difference is between alt="" and name=""
Would it be better to put the filename within the alt tag, or the description of the photo?
What makes better sense, both from SEO and validation stand-point?
Using the ALT attribute is more useful in terms of search engine optimalisation. Using the NAME attribute is mainly useful for internal page anchors.
The ALT attribute is intended to provide an alternate text that describes the image for people who use screen-readers, or search engines, for example.
The name attribute is mainly used for internal anchoring, which allows you to navigate within a page using anchors.
Example usage of the name attribute:
<!-- following ancor can be referenced as http://<your_url>#post-123 -->
<a name="post-123">permanent link to some post</a>
Example usage of alt attribute:
<!-- following image shows "FooBar Company Logo" when images can't be shown -->
<img src="logo.jpg" alt="FooBar Company logo" />
For more information regarding links in general: http://www.w3.org/TR/REC-html40/struct/links.html
For more information about how and when to use the ALT attribute, see:
http://www.w3.org/QA/Tips/altAttribute.
The name attribute exists only to provide a name to refer to in JavaScript.
The alt attribute provides an alternate description for search engines, blind people, when the image could not be loaded, etc.
The title attribute provides a description which will be shown when the user hovers over the image with his mouse - some (but not all) browsers will use the alt attribute for this purpose when there is no title
I'd be a little wary of putting the file name in the ALT tag, since it would be displayed if images are turned off. Typically you set the ALT tag to server as a place holder with something like "Site Logo" or something else to indicate what the image is.
The NAME tag is used for anchoring and the like. If you wanted to create a link that scrolled a long page to your image, you would reference it through this.
Yeah, definitely put a description in the alt tag. It is really important for the visually impaired as this is what the screen readers will read when they come across an image. The only potential catch with this is that the alt tag is treated as tool tip text by some browsers, however, you can override that behavior with setting title="".
The alt attribute is intendet to supply an descriptive alternative in text form for the image. So if you have an image that shows a sunflower, you could use:
<img src="sunflower.jpg" alt="image of a sunflower on a sunny day">
The name attribute in intended to name the image for scripting so you can access it using images["sunflower"]. But nowadays you should use the id attribute instead.
You definitly want to use the ALT tag - for all the reasons mentioned above, and: this tag is mandatory according to W3C so you need it if you want to create "compliant code" (see e.g. w3schools).