Is it true that if I add aria-hidden="true" for all the images on my website, I wouldn't have to add an alt text to those images because it would basically not be displayed for screen readers or how would validates handle this scenario? Is it recommended to do?
If you're using a CMS and the image is decorative you need to be able to output a blank alt attribute, e.g., <img src="<imagesource>" alt="" />.
If you're hand coding the page and can add the decorative images in through CSS that's another approach.
WCAG 1.1.1 says that non-text content must have a text alternative. That text alternative must have the equivalent purpose. One of the exceptions is for decorative images, images used for formatting, or that would be invisible to everyone (e.g., tracking gifs). These must be "implemented in a way that can be ignored by assistive technology". The accepted method is to have a nullalt attribute, as a missing alt attribute would be read out.
In theory aria-hidden=true would work, but that requires the technology to understand aria. Null (blank) alt attributes have been established a lot longer and will be accepted by more assistive technologies so it's the appropriate way of having an img element on the page that's not read out by screenreaders.
If you don't want to add an alternative text to images (because they are purely decorative and the content could be understood without them), you can leave the alt parameter empty.
There's no need to add aria-hidden attribute.
The best thing to do is to use CSS for decorative images.
Related
A client asked about fixing the problem of their background images not having alt attributes, and in response I suggested what we might need to do is support the IMG aria role on those sections.
I maintain a drag and drop builder product so when I implement this it should be clear to end-user when to provide a ARIA img role and descriptive label to a section.
I understand the general idea is to describe the background image when it's not purely decorative. Often a background image will be something related to the content and also decorative. When do you decide it is useful to add accessible contextual enrichment to a page section with background image?
Here are some examples of the sort of page sections I'm talking about:
https://demo.sooperthemes.com/glazed-main/sections-and-backgrounds
What I'm also worried about, if a section contains a bunch of text and a call to action, will it confuse the screen reader user if this section is labelled "img".
If the goal of the section is to have users sign up for some event, does that mean I cannot use ARIA img role to describe the background image on this section? Then what devices are left for me to describe a background image?
It's generally not good practice to add an ARIA role to a div with a background image. If an image needs a textual description, a more appropriate course of action would be to use the native HTML <img> element with an alt attribute.
Content authors and developers are therefore advised to use background images to render information only when native elements cannot be used.
https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
As a general rule, if the content makes sense without the image, or if image does not convey actionable information, then the image is probably decorative. Background images are not required to have text-descriptions, as they are part of the background, not the foreground.
The W3C provides some guidance on what is a decorative image.
I don't see anything in the example provided that would necessitate a description of any background images.
ARIA just isn't well supported. You can't assign alt text to CSS background images. That said, you can put them in a <span class="visually-hidden">Photo of a dog on a picnic table.</span> That should make the text invisible in a Drupal 8 site. It's more complicated if you aren't using Drupal.
NEVER use role="img" in this way, on a section which contains nested content.
I assume you're describing a structure similar to this:
<div id="fooSection" role="img" aria-label="foo" style="background-image: foo.jpg">
<h2>My heading</h2>
<p>Some more text</p>
Call to action
<div>
What I'm also worried about, if a section contains a bunch of text and a call to action, will it confuse the screen reader user if this section is labelled "img".
The effect is actually far more severe than that. The nested content will not be conveyed to assistive technology at all. In this example, screen reader users will be unaware of the heading, paragraph, and link. They won't be able to use the link either.
The reason is that the ARIA img role is defined as having presentational children, meaning that the descendants won't be exposed in the accessibility tree. Furthermore, the img role doesn't support generating an accessible name from contents, so the only way to get a text alternative for the image is to use aria-label or aria-labelledby.
If you can't avoid using a CSS background image, then you can use <span role="img" aria-label="foo"> as a fake image element nested inside the section.
<div id="fooSection" style="background-image: foo.jpg">
<!-- Text alternative for the background image on div#fooSection -->
<span role="img" aria-label="foo"></span>
<h2>My heading</h2>
<p>Some more text</p>
Call to action
<div>
Here I placed the fake image span as the first child of the DIV with the background-image. You have some flexibility in this; the fake image might make more sense if is came after the heading. This technique is documented in Using ARIA: What If the Author Has to Have a CSS Image on a <div> that Contains Content?, with the caveat that a HTML <img> is preferred.
When do you decide it is useful to add accessible contextual enrichment to a page section with background image?
Most of the time, you will want to convey the image to everyone.
If the image is essential for a full understanding of the content, then you must provide a text alternative.
In many cases, the image might not really be considered essential for understanding, but it still deserves a text alternative. It may be supplemental illustrative material, or something which conveys a mood or impression. The key point here is that the choice of image was an editorial decision; it was chosen to say something. So that should be conveyed to everyone.
Beware of dismissing an image as "decorative" too readily. Pause to consider whether it is purely decorative, or whether it actually fits the previous category of illustrative, but not essential. A technique I use is to ask: "Would it matter if it was replaced by a different image?" (For example, replacing a sports car with a rubber duck.) If the answer is yes, then the image isn't purely decorative, and deserves a text alternative.
I have a site with a number of written documents that are rendered as images. If I wanted to make them accessible to visually impaired people, it would seem that I would need to add the text somewhere.
Each document is rendered as a series of images, one for each page (see this, for example). Would I want to each page's text into its corresponding image's alt attribute, or is there a better way to do it? And, if the alt attribute is the way to go, can I put the entire document in the image for the first page, or is it best to have the text in each attribute correspond exactly to the image it's in?
I would not use the alt attribute as it is used for short descriptions only.
Making all this text accessible would mean rendering it in HTML. In your document, there are lists, there are tables, there are definition lists ; all this needs to be semantically described via HTML so that it is accessible. You would not be able to do this via the alt attribute.
I think of multiple ways you could make this accessible:
have empty alt on all img and render all the text in HTML below the last image. The text can be visible to all, or only to those with screen readers as you wish (via the use of specific CSS, see the "sr-only" class of Bootstrap for example). If you want the text to be visible to all without taking too much visual space, you could hide it behind a toggle button (with the aria-controls and aria-expanded attributes).
on each img, have a short alt attribute and a longdesc attribute. The alt is the title of current page, like "Table of Contents". The longdesc is a link to an HTML page having all the text on the image.
after each img, have some HTML with the text of the image. This description can be visible to screen readers users only. Link each description via the aria-describedby attribute on the image.
I'd go with the first solution, because it's generally the simplest to deal with, and it benefits all users.
Most screenreader software won’t announce an entire page’s worth of content from an alt attribute, let alone a whole document. They have different cutoff points, but alts are intended to give short (a sentence or two) descriptions of pictures rather than large quantities of paragraphs, headings, tables, etc. You can test with a free screenreader (VoiceOver for Apple devices, or NVDA for Windows) to confirm this for yourself.
A better option would be to extract the text using OCR and put it into HTML or a Word doc that uses templated styles. That way people who can’t see the text can still have it read out plus they’ll be able to use all the usual navigation shortcuts like tables of contents and headings. You can still put any charts or graphs in as images with alts, and the amount of text you’d need to describe those would be much shorter and easier to write.
I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html.
Is their any rule of thumb for this ?
As one of the answers pointed out, you need to make the difference between content and actual page style.
Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.
It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.
So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.
The question is it Content or Styling is a good place to draw the line on images.
Will this image be reused? etc.
Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.
If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.
Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").
I am creating a page in asp.net. I am trying to show some information in tabular format when user hovers on a inout button. To do this, I am setting alt attribute to input type button because it should be javascript independent. I tried creating a table and assigning it to the alt attribute as a text.
<input type="button" value="save" alt="<table><tr><td>some info </td></tr>
<tr><td>some other info </td></tr></table>"/>
But it is not displayed as a table with two ros. Instead it is displayed as a single line.
Is there any way to show it in tabular format?
This is not possible just like this. Alt can be just plain text.
You'll have to use JavaScript. Try to google for it :)
You'll have to:
Create table.
Using CSS, set it's position to absolute, near your control and display: none
On item hover, you have to set display: block.
Best for this kind of behavior is to use some Javascript framework, IE jquery
jquery.com
specially read these:
http://api.jquery.com/hover/
http://api.jquery.com/hide/
http://api.jquery.com/show/
Agreed with Ales, Javascript would make this a breeze. YUI's Tooltip allows you to instantiate a Tooltip associated with an element, or set of elements (changing the Tooltip's context, so in case you have many similar behaviours spread across a screen).
http://developer.yahoo.com/yui/examples/container/index.html
Once you have instantiated the Tooltip, its something like Tooltip.setBody("your HTML code");, though by default Tooltip sucks in title text of an <a> tag as its content, or possibly even alt text of an element - not 100% on the alt text default part though - good chance that if it doesn't do it by default, if you grab the alt attribute contents it will display it correctly inside the Tooltip.
Others have already told you that what you've asked for isn't possible, as HTML attributes must be plain text, not more HTML.
They've also told you that there are Javascript and JQuery libraries which will help you do what you're wanting to do. There are loads of scripts you could use, here's a link to one that you might want to try: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I feel I should add one further point which others have missed, and which is actually quite important:
You're using the wrong attribute.
The alt attribute is not the correct attribute to use for a hover tooltip effect. You should be using the title attribute for this.
Using alt works this way for historic reasons in some browsers (I believe it works in IE, but not much else), but it is not intended as a tooltip. The correct use of alt is for a small bit of descriptive text that will appear if the image is not loaded. This could be because the file failed to load, or the user has images turned off, or the user has a text-to-speech browser, etc, but if the image is displayed, then this text should never be displayed.
The title attribute on the other hand is intended to be displayed, and all browsers implement it as a tooltip (in fact, it's not just on <img> tags; you can use title for any element).
Hope that helps.
What is the benefit to add null alt=""? is it only to pass validation or it has more reason
and how it should be write?
like this, no space
alt=""
or this with one blank space
alt=" "
To get your XHTML validated. The alt is a required attribute on images.
Adding it empty is however a sign of laziness from programmers (although I admit I also do it for images that are not key to site navigation like little decorative elements and so on).
P.S. If you have decorative elements like shadow components, certain ornaments you can add them not with images but as a CSS background, thus avoiding the need to write an alternative text and keeping your markup clean of non-content stuff.
Other answers have pointed out the requirements in the standard. Here is a practical example:
Given blank alt text, lynx will render:
Given a missing alt attribute, lynx will render:
filename.jpg
You don't want your content to have irrelevant filenames scattered throughout.
For images that have no suitable alternate text (i. e. pictures that don't carry any semantics, such as decorative elements), the alt attribute should be empty. Empty meaning empty, not a single space (which is a convention and recommendation but a good one).
The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:
Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
Implementors should consult the section on accessibility for information about how to handle cases of omitted alternate text.
—HTML 4 specification. Section 13.8 How to specify alternate text
I'll add this as an answer as well (originally a comment on another answer), since it kind of makes sense to do so.
Images used for styling the page (and therefore has no real "alt" usage) should be inserted through CSS and background-image and its relatives, not through markup. That way you do two good things at once. You keep your design in your stylesheets, and you keep unsemantic code out of your page.
Although I do think the "semantics is god"-movement has failed to see the fail that is div and span, and the inherent ambiguity they produce, I still think a div with background-image is better than an img tag for styling.