phuocng/csslayout

Link <input /> to <label> via id/for

Ryuno-Ki opened this issue · 2 comments

Ryuno-Ki commented

Hello,

first of all: Thank you for your website!
I'm repeatedly using your patterns in projects I'm working on.

That being said, the other day, I had a chat with Marco Zehe on Twitter. In case you don't know him: He's an accessibility expert with Mozilla and fully blind. Thus, he's relying on a screenreader to browse the web.
Marco tried your Floating label pattern and found some accessibility issues:

  1. The <label> isn't linked via the respective <input /> via for attribute. This is critical for screenreaders, but also helps sighted users, as it offers an additional way to raise focus on the <input /> element.
  2. opacity: 0; isn't hiding it for screenreaders (that's tolearable. You might want to use aria-hidden: true;.
  3. The <label> is behind the <input /> element in DOM order: https://github.com/phuoc-ng/csslayout/blob/7c6afbb80dafabf31f76b7f8e57095a3e90c078b/client/patterns/floating-label/Details.tsx#L47-L66
    That's hindering the train of reading, so rather than an annoyance.

Would you accept PRs addressing these issues if they maintain the visual effect?

phuocng commented

@Ryuno-Ki Yes, please give me the PRs if you have time 👍

Ryuno-Ki commented

Opened PR #138.
I might need to open a second one but would like to hear Marco's advise first.
It's easier to check with a screenreader, once the website was updated, I guess.
Plus, he knows those tools way better than me.

I think the floating label pattern can't have an inversed order of <label> and <input /> if I interpret the respective CSS right.
But I don't know, whether having the for matching id is already enough to make screenreaders speak it in proper order.

So far, I went over all <label>s and added for attribute (or htmlFor because React).