Search code examples
htmlangularaccessibilityhtml-lists

Lists do not contain only <li> elements and script supporting elements (<script> and <template>)

I am testing the accessibility of my webpage in Google chrome light house and getting the following error. I understand the importance of lists being structured properly to help improve the accessibility of the webpage. I am wondering why do I get the following error when I have the list structured properly.

enter image description here

HTML CODE

 <div>
    <ul class="oss-tabs custom-tab">
      <li class="tab-item" [ngClass]="{active: tab.type === currentTab}" 
        *ngFor="let tab of tabs" 
        (click)="switchTab(tab.type)" role="button" 
        id="{{tab.title}}">{{tab.title}}</li>
     </ul>
 </div>
Solution

  • If you specify role="button" it's no longer a list element but a <button> . And you only can have <li> inside your list.

    Better solution is following markup:

      <li id="{{tab.title}}" class="tab-item" [ngClass]="{active: tab.type === currentTab}" *ngFor="let tab of tabs" >
    <button type="button" (click)="switchTab(tab.type)">{{tab.title}}</button>
  </li>

    Reasons why this is better: By adding role="button" you say that this element is a button but I'm not sure this also adds all accessibility-benefits to it. Like you can tab to it with your keyboard, you can click enter to trigger the button click, stuff like this.

    Also don't forget to specify type="button" for the button inside of your list, otherwise it would be a submit button (and this would be wrong for this place)

    You can style your button any way you want, so styling is not an excuse for not using a button element here.