question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

UL access-ability and classes

See original GitHub issue

I’ve noticed something odd about one of the accessibility opportunities…

On a webpage I’m testing, I get the warning of: List items (<li>) are not contained within <ul> or <ol> parent elements.

However, when looking at said list, they do have a parent

    element… But, it’s <ul class="categoryName"

    We’ve sectioned this list to only appear on product pages of that category - Is there a major reason why Lighthouse doesn’t accept UL parent elements with classes assigned to them? Does this cause a genuine problem for TTS services, or perhaps this is a bug?

    Thanks-

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
davidglezzcommented, Nov 25, 2019

Please reopen

1reaction
patrickhulcecommented, Feb 19, 2020

@jimitndiaye as explained above axe flags any list where the role is other than list, if you believe this is a mistake, could you please file an issue with a reproducible page in axe-core? We will adopt whatever they consider to be the a11y best practice here.

Given that there’s an MDN example very similar to your markup. I’m inclined to agree that should be handled better. Maybe that can help support the case over there.

Read more comments on GitHub >

github_iconTop Results From Across the Web

H48: Using ol, ul and dl for lists or groups of links - W3C
The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is...
Read more >
Accessibility & Privacy | UL Lafayette
Course Accomodations. The Office of Disability Services (ODS) provides qualified students with disabilities with equal access and reasonable accommodations ...
Read more >
ARIA: group role - Accessibility - MDN Web Docs
... ordered or unordered lists, <ol> or <ul> , with nested <li> children. ... </div> <div id="cats" class="groupHeader" role="presentation" ...
Read more >
Navigation | Accessibility Guidelines
For this reason, it is imperative that navigation is accessible. ... <nav class="primary-nav primary-nav--narrow"> <ul> <li><a href="/our-work/">Our ...
Read more >
Accessibility - React
Web accessibility (also referred to as a11y) is the design and creation of ... when working with lists ( <ol> , <ul> and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found