aria-multiselectable complain with role="tablist"

[Antonio-Laguna]

I have a code similar to this:

<div role="tablist" aria-multiselectable="true">
  <div class="accordion__item">
    <div class="accordion__item-head" id="features_1" role="tab">
      <a role="button" href="#1_body" aria-controls="1_body">Show item</a>
    </div>

    <div class="accordion__item-body" id="1_body" role="tabpanel" aria-labelledby="1">
      <div class="accordion__item-content">
        <p>Foo Bar</p>
      </div>
    </div>
  </div>
  ...
</div>

Yet it's being flagged as having unsupported aria-attribute. However, as per the spec on said attribute: https://www.w3.org/TR/wai-aria/states_and_properties#aria-multiselectable, that attribute can be applied to tablist

[jonathandjensen]

I'm also encountering this issue and per the spec aria-multiselectable is a valid attribute on role="tablist"

[dylanb]

@Belelros have you actually tested that code with screen readers? I know its a bit off-topic, but that code will not work AFAIK unless you add role="presentation" to the interim structures as follows

<div role="tablist" aria-multiselectable="true">
  <div role="presentation" class="accordion__item">
    <div class="accordion__item-head" id="features_1" role="tab">
      <a role="button" href="#1_body" aria-controls="1_body">Show item</a>
    </div>

    <div class="accordion__item-body" id="1_body" role="tabpanel" aria-labelledby="1">
      <div class="accordion__item-content">
        <p>Foo Bar</p>
      </div>
    </div>
  </div>
  ...
</div>

also, you should think about your button inside the tab, that will lead to the tab not being read out correctly.

[BrianSipple]

I'm seeing the same error. Here's the markup structure that I'm currently using:

<div aria-multiselectable="true" role="tablist">
  
  <div>
    <button id="panel-1" aria-controls="panel-body-1" aria-selected="false" aria-expanded="false" role="tab">
      Panel Title
    </button>
    
    <div id="panel-body-1" aria-hidden="true" aria-labelledby="panel-1" role="tabpanel">
      Panel Content
    </div>
  </div>
  
</div>

[onizucraft]

@dylanb I understand role="presentation" is used to hide any semantics on the element and its descendants when they require it's context. How role="presentation" can help in this case, when applied to a <div>?

[dylanb]

@gabrielps when you move focus to the tabs does the screen reader read out the fact that its a tab and how many tabs there are and what number tab the one you're focused on is?

For example, see screen shot

[onizucraft]

@dylanb Screen readers implementation can vary. I just want to know if this behaviour is stated in W3 somewhere. PD: Maybe this is not the place to keep this discussion :) Should we move it somewhere else?

[dylanb]

Look for aria-posinset in the table under "Not Mapped" https://www.w3.org/TR/wai-aria-implementation/

You will see that the description simply states "user agents calculate aria-setsize and aria-posinset for each object in the container based on the number of objects in the DOM"

I know from experience that placing role="presentation" on the interim structures will cause AT to ignore them for the purposes of aria-posinset calculation. It should probably be better specified.

[rios1223]

Thanks for helping me