bedrock icon indicating copy to clipboard operation
bedrock copied to clipboard

[a11y] /contact page accessibility improvements

Open alexgibson opened this issue 4 months ago • 0 comments

Axe-core® Accessibility Results for /en-US/contact/

Page URL: https://www-dev.allizom.org/en-US/contact/

axe-core found 5 violations

# Description Axe rule ID WCAG Impact Count
1 ARIA role should be appropriate for the element aria-allowed-role Best practice minor 1
2 Heading levels should only increase by one heading-order Best practice moderate 1
3 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2 Level A, WCAG 1.3.1 serious 3

Failed

  1. ARIA role should be appropriate for the element

Learn more

aria-allowed-role

Best practice

Ensure role attribute has an appropriate value for the element

minor

Issue Tags: cat.aria best-practice

# Issue Description To solve this violation, you need to...
1 Element location

<br>.category-tabs<br>

Element source

<br><ul class="category-tabs" role="navigation"><br>
Fix any of the following:

* ARIA role navigation is not allowed for given element
  1. Heading levels should only increase by one

Learn more

heading-order

Best practice

Ensure the order of headings is semantically correct

moderate

Issue Tags: cat.semantics best-practice

# Issue Description To solve this violation, you need to...
1 Element location

<br>.contact-section:nth-child(1) > h4<br>

Element source

<br><h4>Find us online</h4><br>
Fix any of the following:

* Heading order invalid
  1. elements must be contained in a
      or

Learn more

listitem

WCAG 2 Level A, WCAG 1.3.1

Ensure

  • elements are used semantically

    serious

    Issue Tags: cat.structure wcag2a wcag131 EN-301-549 EN-9.1.3.1

    # Issue Description To solve this violation, you need to...
    1 Element location

    <br>.current<br>

    Element source

    <br><li class="current" data-id="contact"><br> <a href="/en-US/contact/">Contact us</a><br> </li><br>
    Fix any of the following:

    * List item parent element has a role that is not role="list"
    2 Element location

    <br>li[data-id="spaces"]<br>

    Element source

    <br><li data-id="spaces"><br> <a href="/en-US/contact/spaces/">Spaces</a><br> </li><br>
    Fix any of the following:

    * List item parent element has a role that is not role="list"
    3 Element location

    <br>li[data-id="communities"]<br>

    Element source

    <br><li data-id="communities"><br> <a href="https://community.mozilla.org/groups/">Communities</a><br> </li><br>
    Fix any of the following:

    * List item parent element has a role that is not role="list"
  • alexgibson avatar Oct 21 '24 08:10 alexgibson