I built a nice looking and fully accessible dropdown menu by using the native
To build it in a utility-first approach, I created a simple plugin for TailwindCSS.
Just published my first npm package - that small three-line Tailwind Plugin to apply styles when a <details> tag is opened 🤷♀️— Liam Hammett (@LiamHammett) February 13, 2019
A couple of useful examples in the readme of what you can achieve with it pic.twitter.com/TXjwqhmEGy
You can find the plugin over at GitHub.
What might look perfectly readable to the human eye may not be picked up very well by screen readers.
As you can see, in this example, VoiceOver thinks the “2018 - 15” section is a single unit that should be read as “2018 to 2015”.
To give screen readers a fighting chance, you should always make sure to use more semantic elements available in HTML, such as
<time>, if applicable.
You can find the source code for this technique in this GitHub Gist.