Skip to content

[qwik] Accessibility issues #1964

Open
Open
[qwik] Accessibility issues#1964
@dustinsgoodman

Description

@dustinsgoodman
dustinsgoodman
opened on Oct 12, 2023

Manually Identified Issues

  • Filter Dropdown items are tab-indexed when they are not visible. They should have tabindex="-1" when the dropdown is not opened so tabbing the page skips over them.
  • Navigation in dropdown items should be possible with arrow keys. Applies to:
    • Filter Dropdown component
    • User Dropdown component

Accessibility Issues Found by Automated Tests

The audit has been made with Axe DevTools. You can install the extension and run the same test from Chrome dev tools (you may need to restart Chrome to see the new tab there).

General

  • Document must have <title> element to aid in navigation

  • <html> element must have a lang attribute

  • Link must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute

Repo Detail (http://localhost:5173/thisdot/starter.dev/)

  • Elements must have sufficient color contrast

    Image

  • Links must be distinguishable without relying on color

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • The link has insufficient color contrast of 2.84:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2563eb, surrounding text: #1f2937)

    • The link has no styling (such as underline) to distinguish it from the surrounding text.

Issues (http://localhost:5173/thisdot/starter.dev/issues/)

  • Buttons must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have inner text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

  • Elements must have sufficient color contrast

    Image

  • Form elements must have labels

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Form element does not have an implicit (wrapped)
    • Form element does not have an explicit
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element has no placeholder attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

Pull Requests (http://localhost:5173/thisdot/starter.dev/pulls/)

  • Buttons must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have inner text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

  • Elements must have sufficient color contrast

    Image

  • Form elements must have labels

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Form element does not have an implicit (wrapped)
    • Form element does not have an explicit
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element has no placeholder attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

User (http://localhost:5173/mhevery/)

  • Buttons must have discernible text

    Image

    To solve this problem, you need to fix at least (1) of the following:

    • Element does not have inner text that is visible to screen readers
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute
    • Element's default semantics were not overridden with role="none" or role="presentation"

  • Elements must have sufficient color contrast

    Image

Organization (http://localhost:5173/orgs/builderIO/)

  • Images must have alt text

    Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions