Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Now go read about <summary> and <details> and realise it is even easier than you thought!
See if you can create the same with native HTML elements as you won’t need any JavaScript and it will be accessible for people with disabilities too (as at the moment your example isn’t).
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
The button has no text that a screen reader can access, it is missing relevant aria attributes, it is positioned after the section that expands in the DOM so the read order is incorrect etc. And those are things I can spot on a phone without actually testing it.
It certainly is not accessible in its current format.
I didn’t want to list the accessibility issues as OP is doing well and I didn’t want to put them off but I thought I better point them out if you think that is an accessible pattern as I wouldn’t want you using it in production.
Hence why I suggest summary and details as you don’t need to know all of the ARIA etc
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Great job!
Now go read about
<summary>and<details>and realise it is even easier than you thought!See if you can create the same with native HTML elements as you won’t need any JavaScript and it will be accessible for people with disabilities too (as at the moment your example isn’t).
Nice design, Keep going 💪
OP's work is accessible. It could benefit from some visible focus styling though.
The button has no text that a screen reader can access, it is missing relevant aria attributes, it is positioned after the section that expands in the DOM so the read order is incorrect etc. And those are things I can spot on a phone without actually testing it.
It certainly is not accessible in its current format.
I didn’t want to list the accessibility issues as OP is doing well and I didn’t want to put them off but I thought I better point them out if you think that is an accessible pattern as I wouldn’t want you using it in production.
Hence why I suggest summary and details as you don’t need to know all of the ARIA etc
keep in mind, details are not supported in IE, if you want to support IE, that is.
Yes quite right I should have said that. To be fair they do fall back quite gracefully but even so great point! ❤️
Yep! No JS required:
Building an Accordion with only CSS
Nathan Kallman ・ Jul 1 '20 ・ 5 min read