Since we optimized our HTML markup for WCAG 2.0, we have a lot of (sometimes ugly) image descriptions in the google search results including our google site search. Does anyone knows a way to hide them from the result descriptions?
Example:
<h1>fiscal authority</h1>
<img src="..." alt="The image shows the entrance of the fiscal authority" />
<p>
The fiscal authority is...
</p>
Search result:
Fiscal authority
----------------
The Image shows the entrance of the fiscal authority The fiscal authority is...
We cannot...
...move the picture outside of the content
...provide an empty alt="" attribute
...use javascript to insert the image or the alt text after rendering
see http://www.w3.org/TR/WCAG20-TECHS/H37.html for further details
A visitor using a screen reader should get the alt text. I believe this should be a common problem with WCAG and I like to hear how other developers solved this issue?
WCAG Technique H67 clearly states that:
The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.
If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.
Given that BITV very clearly follows the WCAG standard, then an empty alt tag for a purely decorative image (like a doorway) is perfectly fine. It is important to recognise that WCAG is a set of highly subjective recommendations and techniques. Many tests are non-automatable, so if you can appropriately argue compliance than that is enough.
Consider the following:
<h1>fiscal authority</h1>
<img src="doorway.bmp" alt="" />
<p>
The fiscal authority is an institute for authorising fiduciary claims.
</p>
Here the existence of the doorway is purely a decoration.
And contrast with:
<h1>Doorway</h1>
<img src="doorway.bmp" alt="A Victorian-style doorway with beveled edging." />
<p>
A doorway is a hole cut in a wall to allow passage between rooms.
</p>
This is an image of a doorway that adds context to the text (although the image might be better placed).
Related
Getting quite confused when deciding which attributes should go where on the below code:
<div class="image-container">
<img src="images/Local/col-3/03 Rooftops.jpg" />
<div class="image-overlay">
<div class="image-title">Rooftops</div>
</div>
</div>
Assistance placing the Alt attribute, the aria-label and if 'role' is required on the image-container would be great.
Thanks
A basic principle of ARIA, the standard behind role attributes is to avoid them, if you can use semantic HTML elements: The first rule of ARIA
So to your end, there is the <figure> element, which allows grouping media with a <figcaption>. It seems this would be appropriate for your use case.
Most critical for accessibility is to provide an alternative text in the alt attribute, which describes the image, if it's informational. For example "Rooftops with people socialising" or the like.
If your caption for sighted users is explanatory enough to non-sighted ones, you might leave alt empty, but its presence is mandatory: alt="".
<figure class="image-container">
<img src="images/Local/col-3/03 Rooftops.jpg" alt="Rooftops with people socialising" />
<figcaption class="image-overlay">
<div class="image-title">Rooftops</div>
</figcaption>
</figure>
Now this was the theory based on the standards. For the quirky reality though, with different browsers and screen readers supporting different parts, you might need a mixture to support certain versions. See Scott O'Hara's article from 2019 on figure support in different browsers/screenreaders.
If, for some reason, you cannot use semantically correct HTML, there is the figure role, and by means of aria-labelledby you can establish an association between the figure and it's caption: ARIA:figure role and example
I've tried searching but can't seem to find a straight answer regarding redundant links and WCAG compliance.
I have a product collection/category page with a list of products. Each product has a product image, name, price, and 'Learn More' button. The product image and 'Learn More' button both go to the same destination.
<div class="product-wrap">
<div class="product-image">
<img src="product-image.jpg">
</div>
<div class="product-name">
Sample Product Name
</div>
<div class="product-price">
$29.99
</div>
<div class="product-learn-more">
Learn More
</div>
</div>
Based off what I've read having adjacent links go to the same location is not compliant.
I can't link the whole product since I don't want everything clickable so I'm not sure what my options are.
Does anything have any idea how to make this compliant?
The guidance from W3C states that you should wrap the image and the text in a single anchor element. They also state that you must not omit the alt attribute, as this would cause failure of SC 1.1.1.
If this isn't an option in your instance, one possible solution that comes to mind is to use the aria-hidden attribute on your div.product-image.
Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.
https://www.w3.org/TR/wai-aria-1.2/#aria-hidden
Background
I am using Swiper to create a slider for a restaurant website and I would like to code it as semantically as possible. To give you an idea of the content, each slide has four main features:
Background image
Menu category (i.e. sandwiches)
Menu item
Menu item description
If you need a visual (and an appetite):
My Solution
This was the most semantic way I could think of to code it:
<figure class="swiper-slide">
<img src="img/hammin-it-up.jpg" alt="" />
<figcaption>
<strong class="slider-menu-category">Sandwiches</strong>
<dl class="slider-menu-item">
<dt>Hammin' It Up</dt>
<dd>Fontina Cheese & Blackforest Ham grilled on Texas Toast</dd>
</dl>
</figcaption>
</figure>
My Question/s
Is it semantically friendly and w3-OK to use a <dl> within a <figcaption> tag?
Is there a more semantic way to show the slide "title" (aka category) than using a class? I realize this is a separate question, but it's related and I couldn't cram all that into the post title...
My Research
I could not find a site with an exact match to what I did, but I found some that were close:
MDN has some examples with a <cite> tag inside a <figcaption>.
HTML5 Doctor has an <a> and <code> inside the same.
An S.O. user posted an indirectly related question, but I noticed within their markup some <p> tags inside a <figcaption>.
w3.org indicates nothing suggesting my method was incorrect, so I am semi-sure it's fine, but any feedback would be appreciated.
Yes, dl is allowed inside of figure/figcaption: dl is flow content, and figure/figcaption expect flow content according to their content model.
However, I don’t think it’s the best choice in your specific example.
The dl doesn’t really add anything to understanding the content of this figure. It would be appropriate if there were several name-value pairs (e.g., "Price", "Ingredients" etc.), but what you currently have is just a title and a description.
The strong element doesn’t seem to be used according to its definition ("strong importance, seriousness, or urgency") here.
And I also think that the category/title/description isn’t really a caption for the photograph in this case; to me, it seems these 4 elements should be on the same level, so to say. But this is open for interpretation and also depends on the context where this slideshow will be shown.
Instead of using figure, I think that each menu item should be an article. This choice enables the use of headings and header elements:
<article>
<img src="" alt="" />
<header>
<div>Sandwiches</div>
<h1>Hammin' It Up</h1>
</header>
<p>Fontina Cheese & Blackforest Ham grilled on Texas Toast</p>
</article>
use <div> .. </div> for everything , <figcaption> is allowed with HTML5
sticking with div's will be compatable with any browser on any device. You can use a title attribute if you'd like. You can also have any attribute as long as it starts with data-
and example would be <div class="exampleClass" data-title="My Title" data-info="My other info">
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is it the best practice with regards the alt attribute of images?
For example, say I have an image with a caption that says "We look after our staff" and the accompanying image is a picture of a man looking out of a van windows towards the camera, for the alt content should I have something like:
"We look after our staff" (A copy of the image caption)
OR
"A picture of a man looking out of a van windows towards the camera" (A description of the image)
Taken from the w3 spec, reworded;
There is no "wrong" or "right" way of writing alt tags, as it is relative to the context. For example, take the following scenario; on your site, the end user is asked to pick his favourite colour:
The alt tags would be as follows:
<ul>
<li><img src="red.jpeg" alt="Red"></li>
<li><img src="green.jpeg" alt="Green"></li>
<li><img src="blue.jpeg" alt="Blue"></li>
</ul>
A second scenario is if you had a logo which in turn links through to the website, the alt tag should be a description of the link:
A well written alt tag would be:
<a href="http://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>
More applicable for YOUR scenario would be the following examples.
Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the alt attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a link to further information about the painting.
Which should have the following code for the alt text
<header><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></header>
<img src="shalott.jpeg" alt="Painting of a young woman with long hair, sitting in a wooden boat. ">
<p>Description of the painting.</p>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->
...
...
...
<p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.
Further information about the painting.</p>
However.... sometimes an alt tag can be left out all together. For example, if you had the above image with a contextual description relative to the image on the page directly below:
Join us for our medieval theme nights every Friday at Boaters Bar, on
the riverside, Kingston upon Thames.
For the above example, either of the following solutions would be conforming:
<p><img src="shalott.jpeg" alt=""></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p>
Or
<p><img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar,
on the riverside, Kingston upon Thames.</p>
Extract from w3.org
When an image contains words that are important to understanding the
content, the alt text should include those words. This will allow the
alt text to play the same function on the page as the image. Note that
it does not necessarily describe the visual characteristics of the
image itself but must convey the same meaning as the image.
Example 1
An image on a Website provides a link to a free newsletter. The image
contains the text "Free newsletter. Get free recipes, news, and more.
Learn more." The alt text matches the text in the image.
Example 2
An image on a Web site depicts the floor plan of a building. The image
is an image map with each room an interactive map area. The alt text
is "The building's floor plan. Select a room for more information
about the purpose or content of the room." The instruction to "select
a room" indicates that the image is interactive.
http://www.w3.org/TR/WCAG20-TECHS/H37
Warning: this answer is rather subjective.
I use this attribute especially at images having a special function. For example a image of a disk on which the user can click for saving something. Then the value of alt would be "save".
But I don't think you should give a description of every picture. Just say "gallery image" or something like this.
Remember, the alt is for the text replacement for the imagine.
Many cases, I leave have alt = "" because there is no text that would replace that imagine.
Other times, just a single character is best:
<img src="fancy_bullet_point.gif" alt="*">
Just remember the basic rule of thumb: If you did not have the image, what would you put there instead?
The following markup uses the figure element to display an image, inline with the text of a paragraph -- hence the figure is 'included' inside the first <p>.
<div class="object-content">
<p>
<figure class="object-inline-figure">
<img
class="object-inline-figure-image"
height="200"
src="/site_media/media/files/images/WH-487_opt.jpeg"
width="300">
<figcaption class="object-inline-figcaption">
<p class="object-inline-figcaption-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="credits">
<span>Credit: </span>
<span class="object-inline-figcaption-caption-user-credit">
Leigh Grey-Smith</span>,
<span class="object-inline-figcaption-caption-custom-credit">Lady Grey</span>
</p>
</figcaption>
</figure>
The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.</p>
</div>
However, this seems to problematic in at least Chrome and Firefox, that is, when using 'inspect element' (in Chrome), the <figure> and the <p> text/markup are reported to be like:
<p></p>
<figure>
#...
</figure>
The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.
<p></p>
Which effectively 'orphans' the text 'The relationships between...' outside of its <p> markup, losing its styling and semantic meaning... at least to the human viewer of the website page.
Moving the <figure> outside of the <p> seems to have more predictable results, i.e.:
<figure>
#...
</figure>
<p>The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.
</p>
But we kinda lose the 'textwrap' effect when the <figure> is text-aligned left or right.
Is this proper use of <figure> (the former example)?
Is the fault with the browser? (Safari/Firefox & Chrome all produce slightly different, unexpected interpretations)?
What 'should' the proper markup be?
The figure element is block level and therefore the behavior is correct. Permitted parent tags are those that allow flow elements - http://dev.w3.org/html5/markup/figure.html (example div, section, article...)
Therefore the figure tag should be placed outside the p tag. You can float it to allow for wrap.