In my HTML, I have a description list which I had to split up for presentational purposes.
Let's assume the following HTML:
<div class="styling-1">
<dl id="list-1">
<dt>Item 1</dt>
<dd>Description 1</dd>
<dt>Item 2</dt>
<dd>Description 2</dd>
</dl>
</div>
<div class="styling-2">
<dl id="list-2">
<dt>Item 3</dt>
<dd>Description 3</dd>
<dt>Item 4</dt>
<dd>Description 4</dd>
</dl>
</div>
EDIT: Side note for clarification: I cannot use a CSS grid, column layout, ... to take one semantic list and adjust the distribution of its items. The lists are required to be kept separate in HTML.
Now macOS' VoiceOver naturally announces this as two description lists. This is not a deal breaker, but since they are — semantically — a single list, it would be better to have them announced as one.
Hence my question: Does WAI-ARIA (or any other declarative tool) offer a way to tell assistive technology that list-2 is a continuation of list-1?
Now macOS' VoiceOver naturally announces this as two description lists. This is not a deal breaker, but since they are — semantically — a single list, it would be better to have them announced as one.
You're approaching the problem the wrong way round IMHO. The display of your document shouldn't dictate its semantic.
If both lists should be in one single list then do that and find a way to "separate" them on the screen.
According to MDN, it's ok to wrap <dt>, <dd> pairs in <div>:
WHATWG HTML allows wrapping each name-value group in a element in a element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.
<dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>
So you should be able to "break" this single list into two:
<dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div class="new-column">
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>
Related
Can we use a different <dl> for each <dt>, <dd> pairs? Will there be any problems with accessibility if we do it? Use-case being to simplify some Component API. For example:
<!-- Can we do this -->
<div class="container">
<dl>
<dt>First Name</dt>
<dd>Jeff</dd>
</dl>
<dl>
<dt>Last Name</dt>
<dd>Bezos</dd>
</dl>
</div>
<!-- instead of this? -->
<div class="container">
<dl>
<dt>First Name</dt>
<dd>Jeff</dd>
<dt>Last Name</dt>
<dd>Bezos</dd>
</dl>
</div>
In this case, it doesn't matter because definition lists suck in general for accessibility purposes. See my (editorial) comment in this answer, How to properly use aria selectors for definition lists in puppeteer
A definition list does not have a "list" role by default so different screen readers interpret them differently. Because of this, whether you have separate <dl>s or not won't have a huge impact.
"Real" lists, <ul> and <ol>, do make a difference. If you have a group of things that are related and are contained in one list, then it should only be one <ul> rather than a series of <ul>s. A screen reader conveys metadata information about lists such as the number of elements in the list. You get that information "for free" with your eyes if you're sighted. You can generally tell how many items are in a list (if it's not too long) whereas a screen reader user doesn't have that "seeing" option so the screen reader can tell them it's a list with 5 items, but only if it's a single <ul> with 5 <li> elements.
I'm having a difficult time coming up with CSS to style columns with baseline-aligned headings as in the below image. The difficulty comes mainly from needing the headings in each column bottom-aligned with dynamic content (e.g. the "Heading Two" heading has whitespace to align with the baseline of the longer first heading).
There are plenty of ways to "cheat" this with tables or improperly ordered markup, but finding a way to style proper markup that responsively reflows into single columns (as in the second image) has proven difficult.
I'd like to create this with markup such as:
<dl>
<dt>Heading 1</dt>
<dd>Body 1</dd>
<dd>Footer 1</dd>
<dt>Heading 2</dt>
<dd>Body 2</dd>
<dd>Footer 2</dd>
</dl>
I suspect a solution will require wrappers around the "dictionary terms" such as:
<dl>
<div>
<dt>Heading 1</dt>
<dd>Body 1</dd>
<dd>Footer 1</dd>
</div>
<div>
<dt>Heading 2</dt>
<dd>Body 2</dd>
<dd>Footer 2</dd>
</div>
</dl>
which is fine, and swapping out the entirely for divs would be acceptable as well.
I do have a solution using grid layout and explicitly setting rows and columns on each element, but this seems like a more complicated solution than needed.
I am about to present a few products on a website in order to allow a customer to choose between them. Each has a name, description and a list of pros and cons compared to the other products. I am unsure about how to structure the HTML.
I see multiple solutions here, headings and paragraphs being the most obvious one, but I wonder if one of the others might be more appropriate. I think the meta-question here is: Is there even a “most correct” solution; and how would one find go about finding it?
Headings and paragraphs
<h2>Product one</h2>
<p>This is our topseller…</p>
<h3>Pros</h3>
<p>…</p>
<h3>Cons</h3>
<p>…</p>
<h2>Product two</h2>
Definition list
Given that I present a number of things with an accompanying description, the definition list might be suitable, since it creates a tighter link between the product name and the information about it.
<dl>
<dt>Product one</dt>
<dd>
This is our topseller.
<h2>Pros</h2><p>…<\p> <!-- Instead of the heading, I also thought of -->
<h2>Cons</h2><p>…<\p> <!-- using <strong> or no markup at all. -->
</dd>
<dt>Product two</dt>
</dl>
Articles or sections
Based on how important the products are in the context of the page, I think an article might be justified, though I’m not quite convinced about this, since the descriptions will be somewhat short – maybe 5–10 sentences.
<article>
<h1>Product one</h1>
<p>This is our topseller.<p>
…
</article>
<article>
<h1>Product two</h1>
…
</article>
Sections might be more appropriate, considering that the whole comparison probably is the “complete, or self-contained, composition” the W3C talks about in its definiton of HTML, and each product a “thematic grouping” as referenced in the section about sections.
Thematic break
With the re-definition of the hr element to indicate a “paragraph-level thematic break” [3], the rather short descriptions could also be presented in paragraphs
<p>
<strong>Product one.</strong>
This is our topseller.
<strong>Pros:</strong> …
<strong>Cons:</strong>
</p>
<hr>
<p>
<strong>Product two.</strong>
…
</p>
Another option is to use definition lists all the way (and nest your pro/con lists as separate DLs):
<dl>
<dt>Product 1</dt>
<dd>Description of Product 1</dd>
<dd>
<dl>
<dt>Pros</dt>
<dd>Pro 1</dd>
<dd>Pro 2</dd>
<dt>Cons</dt>
<dd>Con 1</dd>
<dd>Con 2</dd>
</dl>
</dd>
<dt>Product 2</dt>
<dd>Description of Product 2</dd>
<dd>
<dl>
<dt>Pros</dt>
<dd>Pro 1</dd>
<dd>Pro 2</dd>
<dt>Cons</dt>
<dd>Con 1</dd>
<dd>Con 2</dd>
</dl>
</dd>
</dl>
Most webshops/ecommerce platforms use ul > li nodes for displaying lists of products (like Magento 2 and some Wordpress plugins). This however, is a personal choice. Depending on the context of products you can use articles, ul or ol elements. Personally I would advise that if you're providing users with list-based content, to always use a ul or ol element like such:
<section class="product-comparison">
<ul>
<li>
<div class="image">
<img src=""/>
</div>
<div class="content">
<div class="title">
<h2>my product title</h2>
</div>
<div class="inner">
<p>my description</p>
</div>
</div>
</li>
...
</ul>
</section>
I have a series of information to display based on a walks distance, ascent etc. I could just do what I always do and use div's, but I wanted to see if there is a more Semantic way to markup this information. Would it be more relevant to a dl?
I want to try
Here is the data from the design:
Here is how my markup currently works:
<div class="contain mission-data--wrap">
<div class="mission__line"></div>
<div class="mission__data--distance">
<p>Distance <span>17km/10.5 miles</span></p>
</div>
<div class="mission__data--time">
<p>Time <span>7 - 9 Hours</span></p>
</div>
<div class="mission__date--accent">
<p>Ascent <span>1352M</span></p>
</div>
<div class="mission__data--gridref">
<p>Grid Ref <span>NN123731</span></p>
</div>
</div>
Is this valid:
<dl class="contain mission-data--wrap">
<dt class="mission__data--distance">Distance</dt>
<dd>17km/10.5 miles</dd>
<dt class="mission__data--time">Time</dt>
<dd>7 - 9 Hours</dd>
<dt class="mission__date--accent">Ascent</dt>
<dd>1352M</dd>
<dt class="mission__data--gridref">Grid Ref</dt>
<dd>NN123731</dd>
</dl>
According to HTML5 recommendations, it's perfectly legal to represent key-value pairs using <dl>s.
Citation from W3C:
The dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements).
Citation from MDN:
Description lists are useful for displaying metadata as a list of key-value pairs.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
IMO, a dl is far more appropriate for groups of key-value pairs (as in your case) than nested divs/spans.
taking into account the semantic web and HTML5, what is the semantically correct way to create an accordion widget?
example:
jQueryUI proposes the following example:
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
now if it is clear that we need a list that has a title and content, now that is what we would need then:
a list of definitions?
<dl>
<dt>
Title
</dt>
<dd>
Content
</dd>
</dl>
Semantics are based on the content.
not the style,
not the interaction.
Because of this, there isn't going to be just one way to markup an accordion widget semantically. As an accordion widget is an interaction.
dl's should be used for name-value groups, so it would be semantic to use a dl with an accordion widget if you've got "terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.":
<dl id="definitions">
<dt>...</dt>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
...
</dl>
If you've got a bunch of articles in an archive, it could be semantic to use:
<h1>Archive</h1>
<div id="articles">
<h2>...</h2>
<article>...</article>
<h2>...</h2>
<article>...</article>
...
</div>
Before worrying about what the content should do, figure out what your content is.