Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Does this fail 4.1.2 Name, Role, Value? Options List. #4309

A11yTea started this conversation in General
Does this fail 4.1.2 Name, Role, Value? Options List. #4309
@A11yTea A11yTea
Feb 7, 2025 · 1 comment
Return to top
Discussion options

A11yTea
Feb 7, 2025

Hi WCAG community,
I need your help in determining if the following situation is a WCAG failure. We have a coded solution which instead of using radio buttons, the developer wanted to use a list that would be interactable. I tried it with a screen reader and the code seems to work pretty good with pretty nice feedback. I know we should be using HTML by default, but did this developer fail 4.1.2 Name, Role, Value for making a custom component rather than a radio button control?

HTML Code:

<div>
    <div aria-live="polite" aria-atomic="true">Number of items in Option list: 4</div>
    <div>Showing items 1 to 4</div>
  </div>
  <div aria-label="Option list" role="list" tabindex="52">
    <div aria-labelledby="label-1" role="listitem" aria-posinset="1" aria-setsize="4">
      <div id="label-1">Option. Selected.</div>
      <button type="button" aria-label="Banana Committee (BC)" tabindex="0">
        <span>BC</span>
      </button>
      <div>Banana Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
    <div aria-labelledby="label-2" role="listitem" aria-posinset="2" aria-setsize="4">
      <div id="label-2">Option.</div>
      <button type="button" aria-label="Kiwi Committee (KC)" tabindex="0">
        <span>KC</span>
      </button>
      <div>Kiwi Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
    <div aria-labelledby="label-3" role="listitem" aria-posinset="3" aria-setsize="4">
      <div id="label-3">Option.</div>
      <button type="button" aria-label="Mango Committee (MC)" tabindex="0">
        <span>MC</span>
      </button>
      <div>Mango Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
    <div aria-labelledby="label-4" role="listitem" aria-posinset="1" aria-setsize="4">
      <div id="label-4">Option.</div>
      <button type="button" aria-label="Watermelon Committee (WC)" tabindex="0">
        <span>WC</span>
      </button>
      <div>Executive Committee </div>
      <div role="button" aria-label="Icon selected" aria-disabled="true">
        <div aria-hidden="true" width="25px" height="25px">
          <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="17px" height="15px" fill="rgba(255, 255, 255, 1)">
            <title></title>
          </svg>
        </div>
      </div>
    </div>
  </div>
You must be logged in to vote

Replies: 1 comment

Comment options

JAWS-test
Feb 10, 2025

The HTML code is not sufficient to answer the question, as the keyboard and mouse operation implemented via JS is not visible. However, I suspect that in the end it comes down to the same problem as discussed here: #4190
This would be a violation of 4.1.2.
In order to be able to judge it exactly, you should provide a working example on Codepen, for example.
You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants
@A11yTea @JAWS-test
Converted from issue

This discussion was converted from issue #4218 on March 28, 2025 14:23.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.