Bootstrap: Shouldn't we suggest unordered lists (ul li) for dropdown menus?
I've noticed that BS4 has stopped suggesting unordered lists for dropdown menus. I'm wondering why since lists provide semantics in the HTML (think of accessibility and unstyled content). Now the code samples only use divs:
- BS4 dropdown-menu example (with divs and classes)
- BS3 dropdown-menu example (with ul li)
Interestingly enough, the result is the same in BS4 when using lists. Is there a reason for removing list markup from the code samples? Would it make sense to put this back in?
bittner
All 7 comments
Only that it's superfluous. We support custom markup given it's all mostly class based. We should have some mention of this though in the docs.
mdo
on 28 Feb 2018
Technically speaking, things like the <html> and <body> tags are also superfluous. You can write websites without them, and the result will probably work across all browsers. But we shouldn't advertise this.
How about sticking with sample code that always provides semantics, and only mention that it's optional? Though, I believe, developers will find out. Hence, explaining the optional nature is really ... ehm ... optional.
Given the influence Bootstrap has on frontend developers (and the fact that most developers probably take over code samples verbatim), I'd love to see that we consistently stick to what WAI and WCAG - and common sense - endorse. That would be nice.
bittner
on 28 Feb 2018
BS3 dropdown-menu example (with ul li)
I would like to point out for sake of balanced argument that thinking of dropdown menu as ul list of li is what has bitten us in back in BS3 times, where bootstrap's dropdown menu meant this:
And obviously markup was light and semantic, but in web apps dropdowns can get quite complex:
So I would like to advice us against fixating on past approach too much.
rafalp
on 28 Feb 2018
Where in the docs do you suggest we have the reference to custom markup @mdo?
Varunram
on 30 Mar 2018
@rafalp the problem here seems to be that the documentation in the navbar section use <div> instead of <ul>. In that case, the dropdown element is clearly a sublist.
And as @bittner mentioned it, people are (sadly) copy/pasting the code verbatim.
The consequence of that is lot of site don't respect the semantic of HTML and they also don't respect WAI-ARIA standard. The result is that people who use assistive technologies are clearly affected by that.
So, I think that we should, at least, add a mention in the documentation pointing out that it is important to use the right HTML tag depending on here you use a dropdown menu.
Sorry, I know, I'm that annoying person pointing out that a11y is an important thing :).
dannycolin
on 15 Jun 2018
If anyone wants to take this on, happy to see it! I took a look at it earlier and it's a lot of code snippets to change lol.
mdo
on 18 Dec 2018
@mdo Took a stab at this, let me know what you think!
Katherraptor
on 2 Apr 2019
Related issues
devdelimited
路
3Comments
ziyi2
路
3Comments
iklementiev
路
3Comments
steve-32a
路
3Comments
kamov
路
3Comments
Most helpful comment
@rafalp the problem here seems to be that the documentation in the navbar section use
<div>instead of<ul>. In that case, the dropdown element is clearly a sublist.And as @bittner mentioned it, people are (sadly) copy/pasting the code verbatim.
The consequence of that is lot of site don't respect the semantic of HTML and they also don't respect WAI-ARIA standard. The result is that people who use assistive technologies are clearly affected by that.
So, I think that we should, at least, add a mention in the documentation pointing out that it is important to use the right HTML tag depending on here you use a dropdown menu.
Sorry, I know, I'm that annoying person pointing out that a11y is an important thing :).