Radio buttons vs tabpanel in regards to accessbility

Accessibility Advocacy
1

I have a question on how to best write the code in terms of accessibility and whether it is incorrect to use a tabpanel in place of radio buttons.

I have a subscription form. When the user is asked to choose their level of coverage, they must select one of three tabs. Selecting a tab changes the description in the panel below. It is currently coded using tabs and tabpanel. I feel that this is incorrect and the three levels should be coded as radio buttons instead of a tab panel. Is this understanding correct?

However, if the tabs are converted to radio buttons, how should the dynamic content be handled? There is a lot of information, and putting a role=‘status’ on it does not seem appropriate.

Here is a simplified example of the current code:


<div>
    <div class="leftNav">
        <div class="arrow" role="button" aria-label="Select previous option">
            <span class="icon-keyboard_arrow_left" aria-hidden="true"></span>
        </div>
    </div>
    <div class="infoLevel">
        <span class="leveltitle">Level 1</span>
        <span class="monthyTariff">$XX.XX<small>/month</small></span>
        <span class="tarifAnnuel"><small>Tarif valif until 31/12/25</small></span>
        <button aria-label="Subscribe to Level 1">Subscribe</button>
    </div>
    <div class="rightNav">
        <div class="arrow" role="button" aria-label="Select next option">
            <span class="icon-keyboard_arrow_right" aria-hidden="true"></span>
        </div>
    </div>
</div>
<div class="tabs-container">
    <ul role="tablist">
        <li class="tab-hidden">
            <span class="button tab-label" role="tab" aria-selected="false" aria-controls="tab-level-0" id="tab-0" tabindex="0">Niveau 0<br><small>XX,XX&nbsp;€</small></span>
        </li>
        <li class="selected"><span class="button tab-label" role="tab" aria-selected="true" aria-controls="tab-level-1" id="tab-1" tabindex="1">
            Level 1<br><small>$XX.XX</small></span>
        </li>
        <li><span class="button tab-label" role="tab" aria-selected="false" aria-controls="tab-level-2" id="tab-2" tabindex="2">
            Level 2<br><small>$XX.XX</small></span>
        </li>
        <li><span class="button tab-label" role="tab" aria-selected="false" aria-controls="tab-level-3" id="tab-3" tabindex="3">
            Level 3<br><small>$XX.XX</small></span>
        </li>
    </ul>
    <div class="tab-content" id="tab-level-0" role="tabpanel" aria-hidden="true"><p>Select a level of protection and discover the details</p></div>
    <div class="tab-content active" id="tab-level-1" role="tabpanel" aria-hidden="false">
        <p>a bunch of information and lists</p>
        <div class="bloccontainer-1">
            <p>List 1 ...</p>
        </div>
        <div class="bloccontainer-2">
            <p>List 2 ...</p>
        </div>
        <div class="bloccontainer-3">
            <p>List 3 ... </p>
        </div>
        <div class="bloccontainer bloccontainer-2">
            <p>List 4 ...</p>
        </div>
    </div>
    <div class="tab-content" id="tab-level-2" role="tabpanel" aria-hidden="true">
        <p>Text for level 2</p>
    </div>
    <div class="tab-content" id="tab-level-3" role="tabpanel" aria-hidden="true">
        <p>Text for level 33</p>
    </div>
</div>
<button aria-label="Subscribe to Level 1">Subscribe</button>
2

I’ll address your question in 2 parts -

  1. Yes, I think it is ideal to go for radiobuttons instead of tabs for the use case scenario you have described. It just makes more sense.
  2. As far as the expected action on selection of a radiobutton goes - it depends on what the description says and what is in the form after it. The main expectation is that the selection of the tab/radiobutton needs to be announced. After that the user is expected to navigate through the rest of the page - in which case they are going to come across your description anyways. If the description is essential information that a user should not miss, then yes, you can announce that as well using aria-live="polite"