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.
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 need to make a website accessible for assistive technology. One issue I have is with a block level anchor tag. The code is similar to this:
<a href="/page">
<div class="text">
<h2>Mammals</h2>
<p>We have a large selection of dogs, cats, and hamsters.</p>
<p class="link-description">Explore Mammals</p>
</div>
<div class="image">
<img src="/cat.jpg" alt="Black cat in a tree" />
</div>
</a>
My goal is to have the entire block (The image, heading, paragraph text, and both div's) clickable but for screen readers to read the link as "Explore Mammals" instead of "Mammals We have a large selection of dogs, cats, and hamsters. Explore Mammals Black cat in a tree." In addition, this is a responsive site so the div's are side by side on desktop but stacked on mobile and the two div's animate in when the page is scrolled.
Does anyone have ideas on how to overcome the accessibility issue described?
That is not an accessibility issue, that is a usability issue. Screen readers just happen to be the audience most affected by it.
In this case you can use aria-label on the <a> to override the content within. Depending on your screen reader it may read the image separately but still use the aria-label text.
<a href="/page" aria-label="Explore Mammals">
<div class="text">
<h2>Mammals</h2>
<p>We have a large selection of dogs, cats, and hamsters.</p>
<p class="link-description">Explore Mammals</p>
</div>
<div class="image">
<img src="/cat.jpg" alt="Black cat in a tree" />
</div>
</a>
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).
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">
I'm curious what tag would make the most semantic sense to encapsulate a group of thumbnail images? Does it make sense to use the <figure> tag (reading the html5 spec, it's not clear)? Or stick with a <div>, or is it considered it's own <section>?
Normally I'd probably use a div to section it off, but trying to utilize the semantic structure of html5, I was hoping maybe there would be a tag that fits this sort of content better.
Thoughts? Suggestions? All are welcome. Thanks!
From a semantic point of view, using <figure> is probably the best fit. If you check the HTML5 spec, you'll see that it's perfectly acceptable to include a series of images within a single <figure> declaration.
Example:
<figure>
<img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>
There is also a similar example shown on HTML5Doctor.com where multiple images (which could just as easily be thumbnails) are listed as children of a single <figure> element.