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.
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.
Can a dd element contain a ul element? Like this:
<dl>
<dt>Lorem</dt>
<dd>Sed lectus</dd>
<dt>Vestibulum</dt>
<dd>
<ul>
<li>viverra nec</li>
<li>blandit vel</li>
<li>egestas et</li>
</ul>
</dd>
<dt>Suspendisse</dt>
<dd>Nulla quam</dd>
</dl>
Yes, it is valid for a <dd> to contain a <ul>. According to the HTML Spec, <dd> elements should contain flow content. Unordered lists are considered flow content.
However, if each of the items in your example are alternate descriptions for the proceeding <dt> term, they should not be marked up in an unordered list and should instead be marked up using a series of <dd> elements.
For instance, the following is valid HTML, but semantically incorrect—because it implies that the entire list is a singular description for the term.
<dl>
<dt>Firefox</dt>
<dd>
<ul>
<li>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</li>
<li>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</li>
</ul>
</dd>
</dl>
The valid and semantically correct way to mark up this content is:
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</dd>
</dl>
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>
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 dl that I've coded like so:
<dl>
<dt>term 1</dt>
<dd>definition 1</dd>
<dt>term 2</dt>
<dd>definition 2</dd>
<dt>term 3</dt>
<dd>definition 3</dd>
</dl>
I'm finding it hard to apply the right css for the layout that i want ie. each term and definition in a column. structuring the html in the following way would solve my problem but I am wondering, is this ok? (from an accessibility point of view).
<dl>
<dt>term 1</dt>
<dd>definition 1</dd>
</dl>
<dl>
<dt>term 2</dt>
<dd>definition 2</dd>
</dl>
<dl>
<dt>term 3</dt>
<dd>definition 3</dd>
</dl>
Putting each term in its own list makes it impossible to determine programmatically that the three terms are actually related to each other (in that they're part of the same bit of content on your site). Deviating from standards is certainly necessary from time to time, but you've said nothing that demonstrates that it's necessary here.
If your original underlying problem is "I can't get this list styled the way I want," perhaps a better question for Stack Overflow is: "How can I style this list to look like __."
It seems it's not fully semantic (http://www.w3schools.com/tags/tag_dl.asp) but nobody wants to worry ^^
You can say you have many lists of one definition !