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
Related
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
We're having a discussion on the usage of h1 tags in a product lister page. There are several facets that can be used to filter the products.
Technical wise it's OK to use multiple h1 tags if they are wrapped in a section or article. But we're in a discussion if it's also useful to use h1's in a lister were we only have a title, packshot and price. It seems to us that it's not a good idea to choose h1's while (SEO-wise) meaningful content is missing.
Below is the markup of 1 product. With no facets selected, we list 100+ products (with lazy loading).
<div class="productItem--vView productItem" data-webid="productLister-item">
<article>
<a class="wrap" href="/products/category">
<header>
<h1><span>product x</span></h1>
<div class="meta">
<div class="spec price price--new">
<div class="value">
<span class="currency">€</span> 10<span class="decimal">.00</span>
<span class="type">new</span>
</div>
</div>
</div>
</header>
<figure>
<div class="image">
<div class="graphic">
<img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=230&h=300'/>
</div>
</div>
</figure>
</a>
</article>
</div>
Is it correct to use h1's here, and what would be the best alternative here. h2?
If you want to use a sectioning content element (like article), it’s a good idea to provide a heading element. If you want to follow the advice in W3C’s HTML5, you should use heading elements of the appropriate rank (probably to support user-agents that don’t support the outline algorithm), instead of using h1 all the time (but h1 is allowed, too, and semantically equivalent).
However, in your case you might not need a sectioning content element, as you only have a title/link, an image, and a price. Creating 100+ entries in the document outline doesn’t seem to be appropriate for such "small" content. You could use a ul and place each product in a li, or maybe you could use a figure for each product.
According to the HTML5 docs, the link tag <a> accepts all contents, but, is this really correct?
For figure elements, which one is valid? If more than one is valid, is any one of them better than the other in any objective way?
<figure class="box">
<a href="#">
<img src="" alt="" />
<figcaption>Hello!</figcaption>
</a>
</figure>
<a href="#" class="box">
<figure>
<img src="" alt="" />
<figcaption>Hello!</figcaption>
</figure>
</a>
<figure class="box">
<a href="#">
<img src="" alt="" />
</a>
<figcaption>Hello!</figcaption>
</figure>
Fragment #1 is invalid (in the sense that it does not pass validation by a conformance checker such as Validator.nu), because a figcaption may not appear as a child of any element but a figure.
Fragments #2 and #3 conform to HTML5, but they mean different things. To start, here is what the spec says about a elements:
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
With this in mind:
In #2, the figure is the hyperlink content.
In #3, only the image is the hyperlink content. The caption is not part of the hyperlink. The image and the caption are both part of the figure, however.
Because they mean different things, neither is "better" than the other in a generic sense. Do you want the entire figure to be a hyperlink? Then use #2. Do you want just the image to be a hyperlink? Then use #3.
In objective terms it is difficult to establish, in technical terms there are the following recommendations of w3c
"The figures element Represents some flow content, optionally with a caption, That is self-contained (like a complete sentence) and is Typically referenced as a single unit from the main flow of the document.
Thus the element can be used to annotate illustrations, diagrams, photos, code listings, etc.
When a figure is Referred to from the main content of the document by identifying it by its caption (eg by figure number), it Enables such content to be easily moved away from primary That content, eg to the side of the page, to dedicated pages, or to an appendix, without Affecting the flow of the document. "
In these terms the # 1 can be considered a way to easily separate a part from the general context
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.