How do I make a grid of radio buttons accessible and intuitive?

Question

Bakground

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.

Problem

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?

Design 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.

opt 4: Once again a table-like design, this time imitating opt 2. I'm equally uncertain of the accessibility of this version.

Clarifications

• 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).

Answer 1

I prefer the option 3 compacting the yes/no values and consequently solving the column width problem:

Answer 2

Im not 100% sure if this fits WCAG guidelines, but you mentioned everything should be properly labeled. Have you considered using toggle buttons instead of radio buttons? If this is not possible, I would go with something similar to option 3 to reduce the amount of text.

Answer 3

Tables of form elements are absolutely accessible, provided they're coded properly.

ux.stackexchange is about design questions and not programming questions (which should be handled on stackoverflow.com), but it's hard to describe how you can create an accessible table without showing some code.

The below example is for your option 3, although I like the table that @danielilo posted in their answer. The code below could be easily modified to accommodate that table.

Each radio button is labeled by two elements. The column header and the row header. Having the row header as a label might be too verbose for the screen reader user since it'll be announced for every radio button, but it's an option. You can remove "row1" from the aria-labelledby if you don't want the row label announced.

<table>
  <tr>
    <th scope="col">Qualifications</th>
    <th scope="col" id="col1">No requirement</th>
    <th scope="col" id="col2">Merit</th>
    <th scope="col" id="col3">Requirement</th>
  </tr>
  <tr>
    <th scope="row" id="row1">Driving license</th>
    <td><input type="radio" name="r1" aria-labelledby="row1 col1"></td>
    <td><input type="radio" name="r1" aria-labelledby="row1 col2"></td>
    <td><input type="radio" name="r1" aria-labelledby="row1 col3"></td>
  </tr>
  <tr>
    <th scope="row" id="row2">Speaks Swedish</th>
    <td><input type="radio" name="r2" aria-labelledby="row2 col1"></td>
    <td><input type="radio" name="r2" aria-labelledby="row2 col2"></td>
    <td><input type="radio" name="r2" aria-labelledby="row2 col3"></td>
  </tr>
  ...
</table>