3 ms·
Except modern HTML actually has a builtin which is accessible, and works far better with screenreaders and other assistant technologies. The details element.
by shakna 4y ago
Except modern HTML actually has a builtin which is accessible, and works far better with screenreaders and other assistant technologies.
The details element.
<details>
<summary>Menu</summary>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/thing">Thing</a></li>
</ul>
</details>
You may want to add a tiny bit of CSS, like adding a border, and setting the cursor to a pointer, for your sighted users:
details {
padding: 0.5em;
border-style: solid;
border-width: 1px;
border-radius: 0.25em;
cursor: pointer;
}
- mariusor 4y agoYou should still wrap the list in a <nav> element to give the browser the context about what the menu represents.
- myfonj 4y agoAlso, while details/summary support in browsers and other user agents and tools is improving over time, it is still not perfect for ... nearly anything. Sadly. https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html https://adrianroselli.com/2019/04/details-summary-are-not-in...
- nimish 4y agoPerfect is the enemy of the good. It's a reasonable general purpose choice. Of course don't use it if you have stricter requirements.
- runarberg 4y agoFWIW This article is almost 4 years old. When it was written 3 years hadn’t passed since Firefox had full support in Firefox 48. Meaning that more time has passed since this article was published then the time between Firefox support and the publication.
- myfonj 4y agoYes, yet last update was last year and coincidentally mentions article "A details element as a burger menu is not accessible" Published on September 20th, 2022: https://cloudfour.com/thinks/a-details-element-as-a-burger-menu-is-not-accessible/ https://cloudfour.com/thinks/a-details-element-as-a-burger-m...
- runarberg 4y agoI don’t think we should take this article at face value. Putting a heading <h2> inside the <summary> is weird and the aforementioned article recommends against it (most experienced web devs know not to put headings inside interactive elements other then <a>). On top of that we have people in this threat that use screen readers and claim that they have no problems with <details>/<summary> which aren’t present in other elements[1]. 1: https://news.ycombinator.com/item?id=34547915 https://news.ycombinator.com/item?id=34547915
- toyg 4y agoworth pointing out that the link is almost 4 years old - which is an age, for browsers. Things might be better now (I've not tried).
- enyo 4y agoUnfortunately there are still plenty of issues with the details element, especially around accessibility. Read more here: https://cloudfour.com/thinks/a-details-element-as-a-burger-menu-is-not-accessible/ https://cloudfour.com/thinks/a-details-element-as-a-burger-m... Hopefully this will change soon. I’ll amend the article when this will be the case.
- inopinatus 4y agoI'd be interested in a similar review of client-specific gaps w.r.t the dialog element (which is even newer to the mainstream, i.e. likely the assistive tech has similar/worse implementation lag).
- shakna 4y agoAs someone who actually uses screenreaders and voice control on a daily basis, most of that is not a huge deal. The "a" element has similar accessibility ratings and holes in implementation.
- neon_electro 4y agoAppreciate you sharing your direct experience!
- tomcam 4y agoWould you mind contacting me at the email address in my profile? I’m about to release an open source thing and I would like to understand some accessibility issues.
- toastal 4y agoReferenced in that article is: https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html https://adrianroselli.com/2019/04/details-summary-are-not-in... Which says JavaScript is required and simplest solution for building this menu. It also states to try to avoid them when possible.
- jazzyjackson 4y ago
- snow_mac 4y agoThis is really cool, thanks for pointing it out!
- davchana 4y agoI used to use a combination of checkbox & divs to show main part, the logs & data tabs on mobile page e.g. https://hukamnama.bydav.in https://hukamnama.bydav.in Now, I found details,& I keep the main page visible all times in a div, & then horizontal accordion styles as Details underneath it for History, Logs & other stuff e.g. https://spa.bydav.in/odo.html https://spa.bydav.in/odo.html (type foo in the box to see page)
- mLuby 4y agoReally wish there were a Markdown equivalent for this.
- zelphirkalt 4y agoThere is probably one of hundreds of markdown dialects, that supports it. Besides, markdown supports directly putting HTML into the markdown text, so it kind of supports all of HTML. How it is rendered depends on the tool you use for that, rather than on markdown as a format.