website icon indicating copy to clipboard operation
website copied to clipboard

`role="presentation"` is misapplied on the navbar

Open mattxwang opened this issue 3 years ago • 2 comments

See:

$ pa11y https://uclaacm.com/

> Running Pa11y on URL https://uclaacm.com/

Results for URL: https://www.uclaacm.com/

 • Error: This element's role is "presentation" but contains child elements with semantic meaning.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F92,ARIA4
   ├── #menu-modal > ul
   └── <ul class="nav-items " role="presentation"><li><button type="button" role=...</ul>

 • Error: This element's role is "presentation" but contains child elements with semantic meaning.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F92,ARIA4
   ├── #committee-mobile-nav-item > ul
   └── <ul class="committee-mobile-nav" role="presentation"><li><button type="button" href=...</ul>

 • Error: This element's role is "presentation" but contains child elements with semantic meaning.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F92,ARIA4
   ├── #initiatives-mobile-nav-item > ul
   └── <ul class="committee-mobile-nav" role="presentation"><li><button type="button" href=...</ul>

3 Errors

And an example from MDN on how it should look:

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#">Tab 1</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 2</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 3</a>
  </li>
</ul>

mattxwang avatar Apr 05 '22 18:04 mattxwang

Interested

alireza-jahandoost avatar Apr 26 '22 06:04 alireza-jahandoost

Interested

@matthewcn56 are you explicitly handling these issues or do you want me to? Very down for Alireza to take it on if he's interested!

mattxwang avatar Apr 26 '22 23:04 mattxwang