There are still a few a11ythings to consider.
You don't need to utilize the checkbox hack for the accordion, there's a tag for that: /.
When you use the checkbox hack, the input comes up in the form controls pane of screenreaders, where it doesn't really belong.
You didn't escape or wrap your tags properly, so we can't see the tag you tried to tell us. From my experience, I guess they are <details> and <summary>.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
There are still a few a11ythings to consider.
You don't need to utilize the checkbox hack for the accordion, there's a tag for that: /.
When you use the checkbox hack, the input comes up in the form controls pane of screenreaders, where it doesn't really belong.
Also, giving an an empty href lets browsers consider it as a navigational element, where your example behaves like a button. The contents of a modal will also never be tab-able. The semantic tag for a modal would be , but I wouldn't know how to toggle that without js. I can't really think of a pure css solution that considers these points, though.
You didn't escape or wrap your tags properly, so we can't see the tag you tried to tell us. From my experience, I guess they are
<details>and<summary>.