Question 194134 in Html Question posted in
Some basic documentation can be found here.

Html – How to handle interactive controls must be nested by screenreader for the checkbox but checkbox is still readable by the screenreader

I am working on accessibility and test the application by Axe Dev Tool i.e Google Chrome browser extension.
I use a table to display content, where each row (each cell in the row) should be clickable by mouse click. and each row having the checkbox like below code snippet:-

Error (interactive controls must be nested) is coming while scan the page via Axe Dev Tool

<tr data-ng-repeat="getUser in getUserList"  data-ng-click="toggleOrganizationSelection(getOrganization)" tabindex="0" aria-hidden="false">
<td>
    <input type="checkbox" ng-change="onchange()" ng-model="getOrganization.check" role="checkbox" aria-checked="false"  aria-labelledby="select-organisation" aria-label="selectUserList"/>
    
</td>
<td>{{getUser.firstName}}</td>
<td>{{getUser.secondname}} </td>

Help me to fix this.

Thank you in advance

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for giving me the solution but it won't worked. Yes the warning error is "Intractive Controls must not be nested". I am able to access via keyboard button and focus is also individual for div as well as for delete button in my page. Please see the below screenshot. I think the screenshot will help you.

    enter image description here

    enter image description here


  2. 0

    Are you sure the error isn’t

    Error (interactive controls must NOT be nested)

    If you have an interactive element nested inside another interactive element and you click on the inner element, should only the inner element receive the click event or should the outer element as well?

    It’s undefined what should happen and is not a good idea to nest them this way.

    I understand you want to click on the table row to perform some action but when you click on the checkbox, should it also run the click handler for the row?

    I think your code is semantically correct, meaning it’s allowed by HTML, but the behavior might be undefined. Axe is just warning you about it. It’s not a technical WCAG failure unless the nested elements is not allowed by HTML, in which case it would fail WCAG 4.1.1.

    An example of invalid HTML is:

    <a href="...">
  <button>foo</button>
</a>

    The content model for <a> elements says "there must be no interactive content descendant".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search