Unplanned
Last Updated: 11 May 2021 15:48 by ADMIN
Scott
Created on: 10 May 2021 14:43
Category: Pager
Type: Bug Report
1
List items (<li>) are not contained within <ul> or <ol> parent elements.

An accessibility issue is found on pager lists when scanned by Lighthouse in Chrome.

Tables and lists These are opportunities to improve the experience of reading tabular or list data using assistive technology, like a screen reader.

List items (<li>) are not contained within <ul> or <ol> parent elements.

Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly.

5 comments
ADMIN
Marin Bratanov
Posted on: 11 May 2021 15:48

Indeed, the information Lighthouse provides is not very helpful, and that is as much as I had found. We will be investigating this further, thank you for your report.

--Marin

Scott
Posted on: 11 May 2021 13:47

I found it by running the accessibility report in Lighthouse in Chrome.  Then you can select the element in the Elements viewer in the developer tools and select Issues.  That will give you this more detailed message:

<li> elements must be contained in a <ul> or <ol>: List item does not have a <ul>, <ol> parent element without a role, or a role="list"

It has a link to here:

<li> elements must be contained in a <ul> or <ol> Axe Rules | Deque University | Deque Systems

But that's not much more useful.

ADMIN
Marin Bratanov
Posted on: 11 May 2021 09:31

Hello Scott,

I will log this for further review because I cannot find definitive requirements for this. At first glance it makes sense to me that the role=group is there on the ul element, yet such attributes and roles are not always intuitive or make such sense. If you have a link or documentation that prescribes how pagination controls should be labeled and what attributes they should have, I would appreciate it.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Scott
Posted on: 10 May 2021 21:36

This is similar to the rendering we are seeing.  If you dig a little deeper into the Lighthouse tools the message gets more specific:

<li> elements must be contained in a <ul> or <ol>: List item does not have a <ul>, <ol> parent element without a role, or a role="list"

Maybe the role="group" is what is breaking it.

ADMIN
Marin Bratanov
Posted on: 10 May 2021 17:57

Hi Scott,

Can you help me reproduce this problem with the component rendering? I do not see such an issue in the component rendering - I am attaching a screenshot of a proper HTML structure I see. Am I missing something?

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.