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.
Related
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.
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.
I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.
I look at the techniques used, and see that:
you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
you need to make the foreground element to somehow disappear with css tricks.
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer
(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.
As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
The main difference is that in the img tag the image is hardcoded.
With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.
As #Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.
Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:
The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).
However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.
If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).
One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.
This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.
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").
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.