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.
Related
What is meant by Images must have alternate text: Element has no title attribute
I had created img tag but developer tools gives me a warning but i can't understand what that means.
Affected resources
<img src="./img/twitter.png">
This has to do with screen readers. Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.
There are 3 ways to give an image alternate text:
Using an alt attribute i.e. <img alt="drawing of a cat" src="...">
Using an aria-label i.e. <img aria-label="drawing of a cat" src="...">
Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="..."
The alt attribute is needed when the picture is not available or the user turned all pictures off in his/her browser. It's necessary to include this attribute to your img elements.
<img src=".." alt="Alternative text" width="200" height="100" aria-label="For screen readers" />
Use alternate txt for img tag like this : <img src="./img/twitter.png" alt="tweetImg"> .
As it is important, if there is slow connection the alternate txt will be visible or due to some error your image don't show up .
The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.
This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet.
See this to read more about alt
I'm not a fan of using images for site logos, I prefer using text with a designed font style... Since they are just text, browsers and crawlers might not understand what it stands for and I keep wondering how I can initialize my text-based logo to be recognized by HTML.
So I thought of doing something like this:
<h1 role="logo">Stack Overflow</h1>
But this isn't correct because there is nothing like role=logo in HTML.
How can I do this?
If you want browsers and assistive technologies to interpret something as an image, you can use the ARIA img role. But don't place this on the <h1> element, because the role="img" attribute will replace the semantics of the heading with an image. Instead wrap it in a <span> and place the role attribute on it, in order to preserve the heading. Also, don't forget your aria-label attribute.
Don't do this:
<!-- don't do this -->
<h1 role="img" aria-label="Logo">Logo</h1>
<!-- because it gets interpreted as this -->
<img alt="Logo">
Instead, if you must:
<!-- if you must, do this -->
<h1><span role="img" aria-label="Logo">Logo</span></h1>
<!-- because it gets interpreted as this, preserving the heading -->
<h1><img alt="Logo"></h1>
However, I can't think of any tangible benefits to forcing browsers to see your text logo as an image. You're fine just leaving it as a normal <h1>.
It seems your use case is covered by existing ARIA img role. Quoting the docs:
Any set of content that should be consumed as a single image (which
could include images, video, audio, code snippets, emojis, or other
content) can be identified using role="img".
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.
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.
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).