I'm designing a form for recruiters where one question pertains what qualifications are required for the job.
My employer is very serious about accessibility/WCAG so any designs need to conform to such guidelines. We have a design system where component designs are pre-defined, so I'm trying to keep it basic (unless a specific need arises where I can petition for new additions).
Following every WCAG-guideline with everything properly labeled, things quickly start to look cluttered. Sometimes that can be solved with smart code, but I'd like to solve as much as possible with good design.
How do I make multiple rows and columns of radio buttons intuitive and accessible at the same time?
Are there better ways than my examples?
The following image contains four designs I can think of (hastily translated for your comfort).
opt 1: This is functionally what I'm trying to achieve, but it feels cluttered.
opt 2: Making each qualification optional gives us leeway to remove the "no requirement" option since we can interpret a non-answer as the same. We are, however, required to clarify that they're optional which adds some text.
opt 3: Here I'm trying a table-like design that imitates opt 1 functionally. This minimizes the use of labels. But the differing lengths of column headings add awkward distances between radio buttons. Most importantly, I'm not sure it can be considered accessible or how to make it so.
- Q: Why "(optional)"? A: That's just one of the guidelines I'm required to follow. In theory, I could write "(optional)" in the heading instead. As long as it's made clear somewhere on the page what pattern all questions follow, then it's OK.
- Q: Why not use an actual table? A: I'm not sure they're responsive enough. The user is not likely to use this service on their phone, but everything needs to be at least usable on the phone without needing to scroll sideways.
- Q: Why not just Google it? A: I've tried to no avail. I can't figure out what the pattern would be called and any keywords I type don't give me the results I want (and english isn't my native language).