DEV Community

loading...

Discussion on: Building an Accessible Reveal-Card

Collapse
link2twenty profile image
Andrew Bone Author

I had hoped you'd leave a comment, thank you!

I've update my structure slightly and now the screen reader is reading out the collapsed state correctly. 😁

Collapse
inhuofficial profile image
InHuOfficial • Edited

Not many people hope I come along and write a massive list of things to tackle 😜🀣

At a glance on my phone it looks way better, if I get chance tomorrow I will have a look on PC!

If you get the pattern right I’m stealing it as I like the design so it isn’t anything other than selfishness πŸ˜‰

Collapse
demkantor profile image
demkantor

I only got a chance to view on my phone so couldn't fully test accessibility, I'm no expert either but have worked with accessibility agencies on some projects.
Just some quick notes, you don't want the title attribute and the aria-label at the same time, this can confuse some screen readers. Also I wouldn't suggest an h4 tag, assuming this is to be used on page along with other components it's unlikely that it would line up with an h4, if these arent to be headings I would consider a different tag, comes to mind but maybe there is a better choice yet
Glad to see you taking the initiative to test your skills while making accessibility a focus, not many bother to do much here so great job!

Thread Thread
link2twenty profile image
Andrew Bone Author

I've updated the h4 to another styled span. I can't see anything that says not to use a title though, it appears most screen readers ignore titles by default, and others don't support it at all.